.lol-tooltip-component { display: none; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm { text-transform: uppercase; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(ko-kr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(ja-jp), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(tr-tr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(el-gr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(th-th), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(zh-tw) { text-transform: none; } .decorated-footer { width: 100%; display: flex; flex-direction: row; justify-content: center; padding: 0 0 1px; height: 50px; box-sizing: border-box; } .decorated-footer .confirm-button-container { position: relative; display: flex; flex-direction: row; justify-content: center; padding-bottom: 15px; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm { display: flex; min-width: 160px; pointer-events: auto; } .decorated-footer .button-img { width: 30px; height: 30px; background-size: contain; background-color: transparent; border: 0px; outline: 0px; } .decorated-footer .button-img.close { background-image: url(/fe/lol-honor/button_close.png); } .decorated-footer .button-img.close:hover { background-image: url(/fe/lol-honor/button_close_hover.png); } .decorated-footer .button-img.close:active { background-image: url(/fe/lol-honor/button_close_click.png); } .decorated-footer .button-img.close:disabled { background-image: url(/fe/lol-honor/button_close_inactive.png); } .decorated-footer .decorated-footer-decoration { display: flex; position: relative; flex: 1 1 auto; height: 34px; margin-top: 15px; } .decorated-footer .decorated-footer-decoration.decorated-footer-left .button { position: absolute; top: -13px; right: 2px; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { font-family: var(--font-display); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { -webkit-user-select: none; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { text-transform: uppercase; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(ko-kr), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(ja-jp), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(tr-tr), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(el-gr), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(th-th), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(zh-tw) { text-transform: none; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { color: #c8aa6e; font-size: 14px; font-weight: 700; letter-spacing: 0.0325em; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(ar-ae) { letter-spacing: 0; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover { color: #f0e6d2; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:disabled, .arrow-footer[version="7.13"] .confirm-button-container button.confirm:disabled:hover, .arrow-footer[version="7.13"] .confirm-button-container button.confirm[disabled='true'], .arrow-footer[version="7.13"] .confirm-button-container button.confirm[disabled='true']:hover { color: #5c5b57; cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active { color: #785a28; } .arrow-footer[version="7.13"] { width: 100%; display: flex; flex-direction: row; justify-content: center; padding: 0 0 1px; height: 51px; box-sizing: border-box; } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm { margin-left: 0px; } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm .left-confirm { background-image: url(/fe/lol-honor/LeftStraightDefault.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm:hover .left-confirm { background-image: url(/fe/lol-honor/LeftStraightHover.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm:active .left-confirm { background-image: url(/fe/lol-honor/LeftStraightClick.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm.disabled .left-confirm { background-image: url(/fe/lol-honor/LeftStraightDisabled.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm.completed .left-confirm { background-image: url(/fe/lol-honor/LeftStraightCompleted.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.close { display: none; } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container .border-bg .left-border-bg { background-image: url(/fe/lol-honor/BGLeftStraight.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container .border-bg .middle-border-bg { margin: 0 7px; } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration { flex-direction: column; justify-content: center; } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration .arrow-footer-decoration-child { background-size: 100% 100%; width: 256px; height: 8px; } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration .arrow-footer-decoration-child.arrow-footer-decoration-left { margin-right: 50px; align-self: flex-end; background-image: url(/fe/lol-honor/FooterMetalDecorationLeft.png); } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration .arrow-footer-decoration-child.arrow-footer-decoration-right { margin-left: 50px; align-self: flex-start; background-image: url(/fe/lol-honor/FooterMetalDecorationRight.png); } .arrow-footer[version="7.13"] .confirm-button-container { position: relative; display: flex; flex-direction: row; justify-content: center; } .arrow-footer[version="7.13"] .confirm-button-container .border-bg { position: absolute; width: 100%; height: 44px; display: flex; top: -5px; } .arrow-footer[version="7.13"] .confirm-button-container .border-bg .left-border-bg { height: 44px; width: 29px; position: absolute; top: 0px; left: -6px; background-size: 100% 100%; background-image: url(/fe/lol-honor/BGLeft.png); } .arrow-footer[version="7.13"] .confirm-button-container .border-bg .middle-border-bg { flex-grow: 1; height: 44px; margin: 0px 12px; background-size: contain; background-image: url(/fe/lol-honor/BGMid.png); } .arrow-footer[version="7.13"] .confirm-button-container .border-bg .right-border-bg { height: 44px; width: 26px; position: absolute; top: 0; right: -6px; background-size: 100% 100%; background-image: url(/fe/lol-honor/BGRight.png); } .arrow-footer[version="7.13"] .confirm-button-container button { border: 0; outline: 0; padding: 0; background-color: transparent; cursor: pointer; } .arrow-footer[version="7.13"] .confirm-button-container button.disabled { cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { height: 34px; min-width: 170px; margin-left: 29px; padding-right: 1px; color: #a3c7c7; position: relative; display: flex; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm > div { background-size: 100% 100%; height: 34px; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .left-confirm { width: 12px; background-image: url(/fe/lol-honor/LeftDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .middle-confirm { display: flex; justify-content: center; align-items: center; flex-grow: 1; padding: 0px 10px; background-repeat: repeat-x; background-image: url(/fe/lol-honor/MidDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .middle-confirm:lang(ar-ae) { direction: ltr; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .right-confirm { width: 17px; background-image: url(/fe/lol-honor/RightDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .left-confirm { background-image: url(/fe/lol-honor/LeftHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .middle-confirm { background-image: url(/fe/lol-honor/MidHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .right-confirm { background-image: url(/fe/lol-honor/RightHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active { color: #005a82; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .left-confirm { background-image: url(/fe/lol-honor/LeftClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .middle-confirm { background-image: url(/fe/lol-honor/MidClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .right-confirm { background-image: url(/fe/lol-honor/RightClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled { color: #5c5b57; cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .left-confirm { background-image: url(/fe/lol-honor/LeftDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .middle-confirm { background-image: url(/fe/lol-honor/MidDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .right-confirm { background-image: url(/fe/lol-honor/RightDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed { color: #c89b3c; cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .left-confirm { background-image: url(/fe/lol-honor/LeftCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .middle-confirm { background-image: url(/fe/lol-honor/MidCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .right-confirm { background-image: url(/fe/lol-honor/RightCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close { width: 34px; height: 34px; background-size: contain; position: absolute; left: 0px; background-image: url(/fe/lol-honor/Normal.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close .close-icon { height: 34px; width: 34px; background-size: 18px; background-repeat: no-repeat; background-position: center; background-image: url(/fe/lol-honor/Exit_Default.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close[type="back"] .close-icon { background-image: url(/fe/lol-honor/Back_default.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover { background-image: url(/fe/lol-honor/Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover .close-icon { background-image: url(/fe/lol-honor/Exit_Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover[type="back"] .close-icon { background-image: url(/fe/lol-honor/Back_Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active { background-image: url(/fe/lol-honor/Clicked.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active .close-icon { background-image: url(/fe/lol-honor/Exit_Click.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active[type="back"] .close-icon { background-image: url(/fe/lol-honor/Back_click.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled { background-image: url(/fe/lol-honor/Disabled.png); cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled .close-icon { background-image: url(/fe/lol-honor/Exit_Disabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled[type="back"] .close-icon { background-image: url(/fe/lol-honor/Back_Disabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed { cursor: default; background-image: url(/fe/lol-honor/Completed.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed .close-icon { background-image: url(/fe/lol-honor/Checkmark.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed[type="back"] .close-icon { background-image: url(/fe/lol-honor/Checkmark.png); } .arrow-footer[version="7.13"] .arrow-footer-decoration { display: flex; position: relative; flex: 1 1 auto; height: 34px; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button, .basic-footer .confirm-button-container lol-uikit-flat-button { text-transform: uppercase; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(ko-kr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(ko-kr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(ja-jp), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(ja-jp), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(tr-tr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(tr-tr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(el-gr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(el-gr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(th-th), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(th-th), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(zh-tw), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(zh-tw) { text-transform: none; } .basic-footer { padding-left: 34px; padding-right: 35px; } .basic-footer { width: 100%; display: flex; flex-direction: row; justify-content: center; height: 48px; box-sizing: border-box; } .basic-footer .confirm-button-container { position: relative; display: flex; flex-direction: row; justify-content: center; flex-grow: 1; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button, .basic-footer .confirm-button-container lol-uikit-flat-button { display: flex; min-width: 160px; pointer-events: auto; margin-left: 10px; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button:last-child, .basic-footer .confirm-button-container lol-uikit-flat-button:last-child { margin-right: 10px; } .basic-footer .confirm-button-container::after, .basic-footer .confirm-button-container::before { display: flex; border-top: thin solid #785a28; margin-top: 16px; height: 1px; flex-grow: 1; content: " "; } .media-fader { position: absolute; top: 0; } .media-fader .media-fader-asset { -webkit-user-drag: none; } .media-swapper { position: relative; } .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 1s; } .prompted-voting-component.hidden.low-spec { 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-club { position: absolute; bottom: 43px; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; pointer-events: none; } .prompted-voting-player-component .prompted-voting-candidate-club-mark { position: absolute; height: 10px; width: 58px; bottom: 29px; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; pointer-events: none; } .prompted-voting-player-component .prompted-voting-selection-video { position: absolute; top: -99px; left: -190px; } .prompted-voting-player-component .prompted-voting-selection-video.total5 { left: -222px; transform: scaleX(0.8); } .prompted-voting-player-component .prompted-voting-selection-video.total3 { left: -141px; } .prompted-voting-player-component .prompted-voting-selection-video.total2 { left: -30px; } .prompted-voting-player-component .prompted-voting-selection-video.total1 { left: 289px; transform: scale(2); } .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: 0; } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.selected.low-spec { opacity: 1; transform: translateX(0); } .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.position3 { transform: translateX(100%); } .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; } }