.honor-postgame-notification-header { font-family: var(--font-display); } .honor-postgame-notification-header { font-family: var(--font-display); } .honor-postgame-notification-header { -webkit-user-select: none; } .honor-postgame-notification-header { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .honor-postgame-notification-header { text-transform: uppercase; } .honor-postgame-notification-header:lang(ko-kr), .honor-postgame-notification-header:lang(ja-jp), .honor-postgame-notification-header:lang(tr-tr), .honor-postgame-notification-header:lang(el-gr), .honor-postgame-notification-header:lang(th-th), .honor-postgame-notification-header:lang(zh-tw) { text-transform: none; } .honor-postgame-notification-header { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .honor-postgame-notification-header:lang(ar-ae) { letter-spacing: 0; } .honor-postgame-notification-component { margin-top: 10px; position: relative; width: 195px; height: 97px; text-align: center; transition: opacity 0.5s; opacity: 0; pointer-events: none; } .honor-postgame-notification-component.active { opacity: 1; animation: fadeInComponent linear 0.5s; pointer-events: auto; } .honor-postgame-notification-header { direction: ltr; height: 16px; } .honor-postgame-notification-header-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.5s; opacity: 0; white-space: nowrap; } .honor-postgame-notification-header-text.active { opacity: 1; } .honor-postgame-notification-contents { margin-top: 6px; border-top: thin solid #fff; border-bottom: thin solid #fff; border-left: 0 solid transparent; border-right: 0 solid transparent; border-image: linear-gradient(to right, transparent, #463714 10%, #463714 90%, transparent); border-image-slice: 1; background: linear-gradient(to right, transparent, rgba(10,150,170,0.2), transparent); width: 100%; height: 40px; position: relative; } .honor-postgame-notification-flair-container { position: absolute; bottom: -30px; left: 0; right: 0; width: 45px; height: 45px; margin-left: auto; margin-right: auto; } .honor-postgame-notification-flair-icon { position: absolute; bottom: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; transition: opacity 0.5s; opacity: 0; } .honor-postgame-notification-flair-icon.visible { opacity: 1; } .honor-postgame-notification-progress-container { position: absolute; top: -5px; left: 0; right: 0; height: 50px; width: 185px; margin-left: auto; margin-right: auto; overflow: hidden; text-align: center; transition: opacity 0.5s; pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent); } .honor-postgame-notification-progress-container.hidden { opacity: 0; } .honor-postgame-notification-progress-indicator { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; height: 17px; width: 120px; opacity: 0; } .honor-postgame-notification-progress-indicator.top { top: -4px; animation: progressIndicator 4s linear infinite; } .honor-postgame-notification-progress-indicator.bottom { bottom: -4px; animation: progressIndicator 4s linear infinite; } @-moz-keyframes fadeInComponent { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInComponent { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeInComponent { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInComponent { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes progressIndicator { 0% { opacity: 0.6; transform: translateX(-163px); } 100% { opacity: 0.6; transform: translateX(163px); } } @-webkit-keyframes progressIndicator { 0% { opacity: 0.6; transform: translateX(-163px); } 100% { opacity: 0.6; transform: translateX(163px); } } @-o-keyframes progressIndicator { 0% { opacity: 0.6; transform: translateX(-163px); } 100% { opacity: 0.6; transform: translateX(163px); } } @keyframes progressIndicator { 0% { opacity: 0.6; transform: translateX(-163px); } 100% { opacity: 0.6; transform: translateX(163px); } } .honor-postgame-category-icon-component { position: absolute; height: 32px; width: 32px; top: 4px; transition-property: transform; transition-timing-function: ease-in-out; transition-delay: 0.896s; transition-duration: 0.195s; } .honor-postgame-category-icon-component.position0.hexakill, .honor-postgame-category-icon-component.position1.hexakill, .honor-postgame-category-icon-component.position2.hexakill, .honor-postgame-category-icon-component.position3.hexakill { transform: translateX(-18px); } .honor-postgame-category-icon-component.position0 { left: 26px; } .honor-postgame-category-icon-component.position1 { left: 63px; } .honor-postgame-category-icon-component.position2 { right: 63px; } .honor-postgame-category-icon-component.position3 { right: 26px; } .honor-postgame-category-icon-component.position4 { right: 7px; } .honor-postgame-category-icon-group { position: absolute; } .honor-postgame-category-low-spec-glow { position: absolute; top: -70px; width: 160px; height: 160px; background-image: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0.8) 11%, rgba(128,219,255,0.75) 14%, rgba(0,179,250,0.4) 19%, rgba(0,179,250,0.4) 30%, rgba(62,152,187,0.2) 40%, rgba(125,125,125,0) 50%); pointer-events: none; display: none; } .honor-postgame-category-low-spec-glow.position2 { display: block; left: -82px; animation: honorIconGlowFadeInOut 1s linear; opacity: 0; } .honor-postgame-category-low-spec-glow.position3 { display: block; left: -119px; animation: honorIconGlowFadeInOut 1s linear; opacity: 0; } .honor-postgame-category-low-spec-glow.position4 { display: block; left: -138px; animation: honorIconGlowFadeInOut 1s linear; opacity: 0; } .honor-postgame-category-icon { height: 32px; width: 32px; } .honor-postgame-category-icon.position2 { animation: honorIconMovePosition2 1s linear; } .honor-postgame-category-icon.position3 { animation: honorIconMovePosition3 1s linear; } .honor-postgame-category-icon.position4 { animation: honorIconMovePosition4 1s linear; } .honor-postgame-notification-video { position: absolute; top: -234px; left: -234px; pointer-events: none; } .honor-postgame-notification-video.position4 { animation-name: honorIconVideo4Shift; animation-fill-mode: both; animation-timing-function: ease-in; animation-delay: 0.816s; animation-duration: 0.195s; } .honor-postgame-category-beam { position: fixed; top: 0; left: 622px; pointer-events: none; } @-moz-keyframes honorIconGlowFadeInOut { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1); opacity: 1; } 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } @-webkit-keyframes honorIconGlowFadeInOut { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1); opacity: 1; } 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } @-o-keyframes honorIconGlowFadeInOut { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1); opacity: 1; } 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } @keyframes honorIconGlowFadeInOut { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1); opacity: 1; } 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } @-moz-keyframes honorIconMovePosition2 { 0% { transform: translate(-18px, -9px) scale(0); opacity: 0; } 50% { transform: translate(-18px, -9px) scale(1.5); opacity: 1; } 90% { transform: translate(-18px, -9px) scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes honorIconMovePosition2 { 0% { transform: translate(-18px, -9px) scale(0); opacity: 0; } 50% { transform: translate(-18px, -9px) scale(1.5); opacity: 1; } 90% { transform: translate(-18px, -9px) scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-o-keyframes honorIconMovePosition2 { 0% { transform: translate(-18px, -9px) scale(0); opacity: 0; } 50% { transform: translate(-18px, -9px) scale(1.5); opacity: 1; } 90% { transform: translate(-18px, -9px) scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes honorIconMovePosition2 { 0% { transform: translate(-18px, -9px) scale(0); opacity: 0; } 50% { transform: translate(-18px, -9px) scale(1.5); opacity: 1; } 90% { transform: translate(-18px, -9px) scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-moz-keyframes honorIconMovePosition3 { 0% { transform: translate(-55px, -9px) scale(0); opacity: 0; } 50% { transform: translate(-55px, -9px) scale(1.5); opacity: 1; } 90% { transform: translate(-55px, -9px) scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes honorIconMovePosition3 { 0% { transform: translate(-55px, -9px) scale(0); opacity: 0; } 50% { transform: translate(-55px, -9px) scale(1.5); opacity: 1; } 90% { transform: translate(-55px, -9px) scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-o-keyframes honorIconMovePosition3 { 0% { transform: translate(-55px, -9px) scale(0); opacity: 0; } 50% { transform: translate(-55px, -9px) scale(1.5); opacity: 1; } 90% { transform: translate(-55px, -9px) scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes honorIconMovePosition3 { 0% { transform: translate(-55px, -9px) scale(0); opacity: 0; } 50% { transform: translate(-55px, -9px) scale(1.5); opacity: 1; } 90% { transform: translate(-55px, -9px) scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-moz-keyframes honorIconMovePosition4 { 0% { transform: translate(-74px, -9px) scale(0); opacity: 0; } 50% { transform: translate(-74px, -9px) scale(1.5); opacity: 1; } 90% { transform: translate(-74px, -9px) scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes honorIconMovePosition4 { 0% { transform: translate(-74px, -9px) scale(0); opacity: 0; } 50% { transform: translate(-74px, -9px) scale(1.5); opacity: 1; } 90% { transform: translate(-74px, -9px) scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-o-keyframes honorIconMovePosition4 { 0% { transform: translate(-74px, -9px) scale(0); opacity: 0; } 50% { transform: translate(-74px, -9px) scale(1.5); opacity: 1; } 90% { transform: translate(-74px, -9px) scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes honorIconMovePosition4 { 0% { transform: translate(-74px, -9px) scale(0); opacity: 0; } 50% { transform: translate(-74px, -9px) scale(1.5); opacity: 1; } 90% { transform: translate(-74px, -9px) scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-moz-keyframes honorIconVideo4Shift { 0% { transform: translateX(-19px); } 100% { transform: translateX(0); } } @-webkit-keyframes honorIconVideo4Shift { 0% { transform: translateX(-19px); } 100% { transform: translateX(0); } } @-o-keyframes honorIconVideo4Shift { 0% { transform: translateX(-19px); } 100% { transform: translateX(0); } } @keyframes honorIconVideo4Shift { 0% { transform: translateX(-19px); } 100% { transform: translateX(0); } } .honor-postgame-player-component { font-family: var(--font-display); } .honor-postgame-player-component { color: #fff; position: absolute; width: 17px; height: 17px; top: 9px; left: 37px; pointer-events: none; } .honor-postgame-celebration-tooltip-container { position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: auto; } .honor-postgame-celebration-tooltip-container.hidden { display: none; } .honor-postgame-celebration-video { position: absolute; top: -94px; left: -277px; z-index: -1; } .honor-postgame-celebration-icon { position: absolute; width: 16px; height: 16px; top: 0; left: 0; opacity: 0; transition: opacity 0.5s; } .honor-postgame-celebration-icon.visible { opacity: 1; } .prompted-voting-component { width: 100%; height: 100%; box-sizing: border-box; } .prompted-voting-component, .prompted-voting-component .prompted-voting-header { font-family: var(--font-display); } .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-minutes, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-colon, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-seconds { font-family: var(--font-body); } .prompted-voting-component, .prompted-voting-component .prompted-voting-header { font-family: var(--font-display); } .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-minutes, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-colon, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-seconds { font-family: var(--font-body); } .prompted-voting-component .prompted-voting-header, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-minutes, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-colon, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-seconds { -webkit-user-select: none; } .prompted-voting-component .prompted-voting-header, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-minutes, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-colon, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-seconds { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .prompted-voting-component .prompted-voting-header { text-transform: uppercase; } .prompted-voting-component .prompted-voting-header:lang(ko-kr), .prompted-voting-component .prompted-voting-header:lang(ja-jp), .prompted-voting-component .prompted-voting-header:lang(tr-tr), .prompted-voting-component .prompted-voting-header:lang(el-gr), .prompted-voting-component .prompted-voting-header:lang(th-th), .prompted-voting-component .prompted-voting-header:lang(zh-tw) { text-transform: none; } .prompted-voting-component .prompted-voting-header { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .prompted-voting-component .prompted-voting-header:lang(ar-ae) { letter-spacing: 0; } .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-minutes, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-colon, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-seconds { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-minutes:lang(ar-ae), .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-colon:lang(ar-ae), .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-seconds:lang(ar-ae) { letter-spacing: 0; } .prompted-voting-component { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: top; background-repeat: no-repeat; color: #c8aa6e; opacity: 1; } .prompted-voting-component.hidden { opacity: 0; transition: opacity 0.1s linear 1.4s; } .prompted-voting-component .prompted-voting-header { direction: ltr; position: absolute; top: 40px; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; pointer-events: none; } .prompted-voting-component .prompted-voting-player-container { direction: ltr; position: absolute; top: 100px; height: 520px; width: 100%; display: table; opacity: 1; transition: opacity 0.3s linear; text-align: center; } .prompted-voting-component .prompted-voting-skip-button { position: absolute; bottom: 55px; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 28px; transition: opacity 1s; } .prompted-voting-component .prompted-voting-skip-button.hidden { opacity: 0; pointer-events: none; } .prompted-voting-component .prompted-voting-timer { font-size: 0; position: absolute; bottom: 25px; left: 0; right: 0; text-align: center; transition: opacity 1s; pointer-events: none; } .prompted-voting-component .prompted-voting-timer.hidden { opacity: 0; } .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-minutes { text-align: right; width: 200px; display: inline-block; } .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-colon { display: inline-block; } .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-seconds { text-align: left; width: 200px; display: inline-block; } .prompted-voting-component .prompted-voting-vignette { position: absolute; left: 0; width: 100%; height: 98px; background: rgba(0,0,0,0.55); overflow: hidden; } .prompted-voting-component .prompted-voting-vignette.top { top: 0; border-bottom: 2px solid #785a28; box-shadow: 0 4px 4px -4px #000; } .prompted-voting-component .prompted-voting-vignette.bottom { bottom: 0; border-top: 2px solid #785a28; box-shadow: 0 -4px 4px -4px #000; } .prompted-voting-component .prompted-voting-vignette .prompted-voting-vignette-glow { position: absolute; top: 50px; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 350px; height: 100px; background-image: radial-gradient(ellipse, #fff, rgba(255,255,255,0.5) 12.5%, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0.125) 37.5%, transparent 50%); opacity: 0.25; } .prompted-voting-player-component .prompted-voting-candidate-champ, .prompted-voting-player-component .prompted-voting-candidate-name, .prompted-voting-player-component .honor-category-prompt-header { font-family: var(--font-display); } .prompted-voting-player-component .honor-category-prompt-body { font-family: var(--font-body); } .prompted-voting-player-component .prompted-voting-candidate-champ, .prompted-voting-player-component .prompted-voting-candidate-name, .prompted-voting-player-component .honor-category-prompt-header, .prompted-voting-player-component .honor-category-prompt-body { -webkit-user-select: none; } .prompted-voting-player-component .prompted-voting-candidate-champ, .prompted-voting-player-component .prompted-voting-candidate-name, .prompted-voting-player-component .honor-category-prompt-header, .prompted-voting-player-component .honor-category-prompt-body { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .prompted-voting-player-component .prompted-voting-candidate-champ, .prompted-voting-player-component .prompted-voting-candidate-name, .prompted-voting-player-component .honor-category-prompt-header { text-transform: uppercase; } .prompted-voting-player-component .prompted-voting-candidate-champ:lang(ko-kr), .prompted-voting-player-component .prompted-voting-candidate-name:lang(ko-kr), .prompted-voting-player-component .honor-category-prompt-header:lang(ko-kr), .prompted-voting-player-component .prompted-voting-candidate-champ:lang(ja-jp), .prompted-voting-player-component .prompted-voting-candidate-name:lang(ja-jp), .prompted-voting-player-component .honor-category-prompt-header:lang(ja-jp), .prompted-voting-player-component .prompted-voting-candidate-champ:lang(tr-tr), .prompted-voting-player-component .prompted-voting-candidate-name:lang(tr-tr), .prompted-voting-player-component .honor-category-prompt-header:lang(tr-tr), .prompted-voting-player-component .prompted-voting-candidate-champ:lang(el-gr), .prompted-voting-player-component .prompted-voting-candidate-name:lang(el-gr), .prompted-voting-player-component .honor-category-prompt-header:lang(el-gr), .prompted-voting-player-component .prompted-voting-candidate-champ:lang(th-th), .prompted-voting-player-component .prompted-voting-candidate-name:lang(th-th), .prompted-voting-player-component .honor-category-prompt-header:lang(th-th), .prompted-voting-player-component .prompted-voting-candidate-champ:lang(zh-tw), .prompted-voting-player-component .prompted-voting-candidate-name:lang(zh-tw), .prompted-voting-player-component .honor-category-prompt-header:lang(zh-tw) { text-transform: none; } .prompted-voting-player-component .prompted-voting-candidate-champ, .prompted-voting-player-component .prompted-voting-candidate-name { text-transform: none; } .prompted-voting-player-component .prompted-voting-candidate-name, .prompted-voting-player-component .honor-category-prompt-header { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .prompted-voting-player-component .prompted-voting-candidate-name:lang(ar-ae), .prompted-voting-player-component .honor-category-prompt-header:lang(ar-ae) { letter-spacing: 0; } .prompted-voting-player-component .prompted-voting-candidate-name { letter-spacing: 0.025em; } .prompted-voting-player-component .prompted-voting-candidate-name:lang(ar-ae) { letter-spacing: 0; } .prompted-voting-player-component .prompted-voting-candidate-champ { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .prompted-voting-player-component .prompted-voting-candidate-champ:lang(ar-ae) { letter-spacing: 0; } .prompted-voting-player-component .prompted-voting-candidate-champ { letter-spacing: 0.0375em; } .prompted-voting-player-component .prompted-voting-candidate-champ:lang(ar-ae) { letter-spacing: 0; } .prompted-voting-player-component .honor-category-prompt-body { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .prompted-voting-player-component .honor-category-prompt-body:lang(ar-ae) { letter-spacing: 0; } .prompted-voting-player-component { position: relative; background-color: transparent; background-size: auto 100%; background-position: center; background-repeat: no-repeat; display: table-cell; opacity: 0.999; transition: opacity 0.2s ease-in; overflow: hidden; } .prompted-voting-player-component.dimmed { transition: opacity 0.5s linear; opacity: 0.8; } .prompted-voting-player-component.rejected { transition: opacity 0.5s linear; opacity: 0.8; } .prompted-voting-player-component.active { transition: opacity 0s ease; opacity: 1; } .prompted-voting-player-component.total1 { background-size: 100% auto; } .prompted-voting-player-component .prompted-voting-candidate-champ { position: absolute; bottom: 87px; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; pointer-events: none; } .prompted-voting-player-component .prompted-voting-candidate-name { position: absolute; bottom: 65px; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; pointer-events: none; } .prompted-voting-player-component .prompted-voting-candidate-overlay { background-color: #000; opacity: 0.0001; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.2s ease-in; } .prompted-voting-player-component .prompted-voting-candidate-overlay.dimmed { transition: opacity 0.2s; opacity: 0.45; } .prompted-voting-player-component .prompted-voting-candidate-overlay.active { transition: opacity 0s; opacity: 0; } .prompted-voting-player-component .prompted-voting-candidate-overlay.rejected { transition: opacity 1.5s ease-out; opacity: 0.8; } .prompted-voting-player-component .prompted-voting-category-select-container { width: 100%; height: 100%; position: absolute; font-size: 0; } .prompted-voting-player-component .honor-category-prompt-header { position: absolute; width: 100%; top: 322px; left: 0; text-align: center; pointer-events: none; font-size: 20px; } .prompted-voting-player-component .honor-category-prompt-body { color: #c8aa6e; position: absolute; width: 100%; top: 348px; left: 0; text-align: center; pointer-events: none; } .prompted-voting-category-select-component { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; display: inline-block; pointer-events: none; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector { position: absolute; top: 0; height: 100%; width: 33.3333%; opacity: 0; mix-blend-mode: overlay; background-size: cover; background-image: url("/fe/lol-honor/assets/Honor_Vote_Mid_Gradient.png"); pointer-events: auto; cursor: pointer; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.active { opacity: 1; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.selected { opacity: 1; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.rejected { opacity: 0; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position1 { left: 0; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position1.total1 { width: 568px; background-image: url("/fe/lol-honor/assets/Honor_Vote_Side_Gradient.png"); } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position1.total2 { width: 249px; background-image: url("/fe/lol-honor/assets/Honor_Vote_Side_Gradient.png"); } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position2 { left: 0; right: 0; margin-left: auto; margin-right: auto; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position2.total1 { width: 142px; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position2.total2 { width: 141px; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position3 { right: 0; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position3.total1 { width: 568px; background-image: url("/fe/lol-honor/assets/Honor_Vote_Side_Gradient.png"); transform: scaleX(-1); } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position3.total2 { width: 249px; background-image: url("/fe/lol-honor/assets/Honor_Vote_Side_Gradient.png"); transform: scaleX(-1); } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container { position: absolute; top: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 33.3333%; height: 100%; pointer-events: none; transition: transform 2s cubic-bezier(0.1, 0.85, 0, 1); opacity: 0; } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.active { opacity: 1; } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.selected { opacity: 1; } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.total1 { width: 142px; } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.total2 { width: 142px; } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.position1 { transform: translateX(-100%); } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.position1.selected { transform: translateX(0); } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.position3 { transform: translateX(100%); } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.position3.selected { transform: translateX(0); } .prompted-voting-category-select-component .prompted-voting-honor-category-image { cursor: pointer; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: 72px; height: 72px; } .prompted-voting-category-select-component .prompted-voting-selection-animation-container { position: absolute; top: 0; bottom: 0; right: 0; left: 0; height: 0; width: 0; margin: auto; pointer-events: none; } .prompted-voting-category-select-component .prompted-voting-selection-glow { position: absolute; top: -36px; left: -36px; width: 72px; height: 72px; opacity: 0; animation: promptedVotingSelectionGlowAnimation 0.9s linear; } .prompted-voting-category-select-component .prompted-voting-selection-outro { position: absolute; top: -47px; left: -48px; width: 100px; height: 100px; opacity: 0; animation: promptedVotingSelectionOutroAnimation 1.8s linear; } @-moz-keyframes promptedVotingSelectionGlowAnimation { 0% { transform: scale(3); opacity: 0; } 75% { transform: scale(6); opacity: 1; } 90% { transform: scale(6); opacity: 1; } 100% { transform: scale(0); opacity: 1; } } @-webkit-keyframes promptedVotingSelectionGlowAnimation { 0% { transform: scale(3); opacity: 0; } 75% { transform: scale(6); opacity: 1; } 90% { transform: scale(6); opacity: 1; } 100% { transform: scale(0); opacity: 1; } } @-o-keyframes promptedVotingSelectionGlowAnimation { 0% { transform: scale(3); opacity: 0; } 75% { transform: scale(6); opacity: 1; } 90% { transform: scale(6); opacity: 1; } 100% { transform: scale(0); opacity: 1; } } @keyframes promptedVotingSelectionGlowAnimation { 0% { transform: scale(3); opacity: 0; } 75% { transform: scale(6); opacity: 1; } 90% { transform: scale(6); opacity: 1; } 100% { transform: scale(0); opacity: 1; } } @-moz-keyframes promptedVotingSelectionOutroAnimation { 0% { transform: scale(0); opacity: 0; } 45% { transform: scale(2); opacity: 0; } 50% { transform: scale(3); opacity: 1; } 100% { transform: scale(6); opacity: 0; } } @-webkit-keyframes promptedVotingSelectionOutroAnimation { 0% { transform: scale(0); opacity: 0; } 45% { transform: scale(2); opacity: 0; } 50% { transform: scale(3); opacity: 1; } 100% { transform: scale(6); opacity: 0; } } @-o-keyframes promptedVotingSelectionOutroAnimation { 0% { transform: scale(0); opacity: 0; } 45% { transform: scale(2); opacity: 0; } 50% { transform: scale(3); opacity: 1; } 100% { transform: scale(6); opacity: 0; } } @keyframes promptedVotingSelectionOutroAnimation { 0% { transform: scale(0); opacity: 0; } 45% { transform: scale(2); opacity: 0; } 50% { transform: scale(3); opacity: 1; } 100% { transform: scale(6); opacity: 0; } }