.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-new-player-experience/button_close.png); } .decorated-footer .button-img.close:hover { background-image: url(/fe/lol-new-player-experience/button_close_hover.png); } .decorated-footer .button-img.close:active { background-image: url(/fe/lol-new-player-experience/button_close_click.png); } .decorated-footer .button-img.close:disabled { background-image: url(/fe/lol-new-player-experience/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: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-new-player-experience/LeftStraightDefault.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm:hover .left-confirm { background-image: url(/fe/lol-new-player-experience/LeftStraightHover.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm:active .left-confirm { background-image: url(/fe/lol-new-player-experience/LeftStraightClick.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm.disabled .left-confirm { background-image: url(/fe/lol-new-player-experience/LeftStraightDisabled.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm.completed .left-confirm { background-image: url(/fe/lol-new-player-experience/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-new-player-experience/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-new-player-experience/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-new-player-experience/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-new-player-experience/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-new-player-experience/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-new-player-experience/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-new-player-experience/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-new-player-experience/MidDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .middle-confirm:lang(ar-ae) { direction: rtl; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .right-confirm { width: 17px; background-image: url(/fe/lol-new-player-experience/RightDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .left-confirm { background-image: url(/fe/lol-new-player-experience/LeftHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .middle-confirm { background-image: url(/fe/lol-new-player-experience/MidHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .right-confirm { background-image: url(/fe/lol-new-player-experience/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-new-player-experience/LeftClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .middle-confirm { background-image: url(/fe/lol-new-player-experience/MidClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .right-confirm { background-image: url(/fe/lol-new-player-experience/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-new-player-experience/LeftDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .middle-confirm { background-image: url(/fe/lol-new-player-experience/MidDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .right-confirm { background-image: url(/fe/lol-new-player-experience/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-new-player-experience/LeftCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .middle-confirm { background-image: url(/fe/lol-new-player-experience/MidCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .right-confirm { background-image: url(/fe/lol-new-player-experience/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-new-player-experience/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-new-player-experience/Exit_Default.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close[type="back"] .close-icon { background-image: url(/fe/lol-new-player-experience/Back_default.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover { background-image: url(/fe/lol-new-player-experience/Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover .close-icon { background-image: url(/fe/lol-new-player-experience/Exit_Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover[type="back"] .close-icon { background-image: url(/fe/lol-new-player-experience/Back_Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active { background-image: url(/fe/lol-new-player-experience/Clicked.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active .close-icon { background-image: url(/fe/lol-new-player-experience/Exit_Click.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active[type="back"] .close-icon { background-image: url(/fe/lol-new-player-experience/Back_click.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled { background-image: url(/fe/lol-new-player-experience/Disabled.png); cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled .close-icon { background-image: url(/fe/lol-new-player-experience/Exit_Disabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled[type="back"] .close-icon { background-image: url(/fe/lol-new-player-experience/Back_Disabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed { cursor: default; background-image: url(/fe/lol-new-player-experience/Completed.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed .close-icon { background-image: url(/fe/lol-new-player-experience/Checkmark.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed[type="back"] .close-icon { background-image: url(/fe/lol-new-player-experience/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: 1px 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; } .npe-root-component { position: relative; display: flex; flex-direction: column; background-image: url(/fe/lol-new-player-experience/bg_diamonds.png); background-size: 100% 100%; background-repeat: no-repeat; width: 1278px; height: 718px; border-top: 2px solid #785a28; box-sizing: border-box; } .npe-root-component .bg-spinner-wrapper { position: absolute; display: flex; justify-content: center; align-items: center; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; -webkit-mask-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0), #000, #000, #000, #000, #000, rgba(0,0,0,0), rgba(0,0,0,0)); } .npe-root-component .bg-spinner-wrapper .npe-bg-ticks { width: 574px; height: 574px; } .npe-root-component .bg-spinner-wrapper .npe-bg-ticks svg { overflow: visible; width: 100%; height: 100%; } .npe-root-component .bg-spinner-wrapper .npe-bg-ticks.animated { animation: ticks-spin 90s infinite linear; } @-moz-keyframes ticks-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes ticks-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes ticks-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes ticks-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .npe-root-component .bg-spinner-wrapper .npe-bg-ticks .radial-ticks { fill: none; stroke: #785a28; stroke-miterlimit: 10; stroke-width: 14px; stroke-dasharray: 2.5 8.98; opacity: 0.3; transform-origin: center; } .npe-footer-component lol-uikit-close-button { position: absolute; right: 50px; bottom: 17px; } .npe-footer-component .arrow-footer { position: absolute; bottom: 0px; width: 100%; justify-content: inherit; } .npe-footer-component .bottom-right-buttons { position: absolute; right: 20px; bottom: 19px; display: flex; align-items: flex-end; } .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer { font-family: var(--font-display); } .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer-label, .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-info { font-family: var(--font-body); } .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer-label, .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-info, .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer { -webkit-user-select: none; } .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer-label, .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-info, .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer { text-transform: uppercase; } .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer:lang(ko-kr), .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer:lang(ja-jp), .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer:lang(tr-tr), .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer:lang(el-gr), .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer:lang(th-th), .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer:lang(zh-tw) { text-transform: none; } .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer-label, .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-info { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-timer-label:lang(ja-jp), .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-info:lang(ja-jp) { font-size: 13px; } .npe-tutorial-carousel-component { display: flex; overflow: hidden; flex-direction: column; position: absolute; left: 0; top: 0; align-items: center; justify-content: center; width: 100%; height: 100%; } .npe-tutorial-carousel-component .npe-tutorial-item-magic-video { position: absolute; opacity: 0; transition: opacity 0.1s cubic-bezier(0, 0.58, 0.58, 1); top: 0; left: 340px; cursor: default; pointer-events: none; } .npe-tutorial-carousel-component .npe-tutorial-item-magic-video.visible { opacity: 1; } .npe-tutorial-carousel-component .npe-tutorial-carousel { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; position: relative; -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.2, 0.9, 0, 1), opacity 0.4s ease-in-out 0.8s; opacity: 0; } .npe-tutorial-carousel-component .npe-tutorial-carousel.visible { opacity: 1; } .npe-tutorial-carousel-component .npe-tutorial-carousel .npe-tutorial-carousel-item-spacer { flex: 0 0 auto; width: 54px; height: 100%; } .npe-tutorial-carousel-component .npe-tutorial-navigation { position: absolute; bottom: 62px; } .npe-tutorial-carousel-component .npe-tutorial-block { direction: rtl; position: absolute; opacity: 0; display: flex; width: 100%; height: 100px; flex-direction: column; align-items: center; justify-content: center; cursor: default; } .npe-tutorial-carousel-component .npe-tutorial-block.visible { opacity: 1; -webkit-transition: opacity 0.1s ease-in-out; } .npe-tutorial-carousel-component .npe-tutorial-block.hidden { opacity: 0; -webkit-transition: opacity 0.1s ease-in-out 0.1s; } .npe-tutorial-carousel-component .npe-tutorial-block .npe-tutorial-info { color: #0a96aa; width: 200px; text-align: center; } .npe-tutorial-carousel-component .npe-tutorial-carousel-arrow-container { position: absolute; height: 32px; margin: auto; top: 0; left: 0; } .npe-tutorial-carousel-component .npe-tutorial-carousel-arrow { width: 98px; margin: 80px 0; position: absolute; background-color: transparent; cursor: pointer; border: none; outline: none; top: 0; bottom: 0; background-image: url(/fe/lol-new-player-experience/arrow_default.png); background-size: 32px 32px; background-repeat: no-repeat; background-position: center center; transition: background 0.3s ease-out; } .npe-tutorial-carousel-component .npe-tutorial-carousel-arrow:hover { background-image: url(/fe/lol-new-player-experience/arrow_hover.png), radial-gradient(ellipse at right, rgba(255,255,255,0.11) 0%, transparent 70%); background-size: 32px 32px, 100% 100%; background-repeat: no-repeat, no-repeat; background-position: center center, center center; } .npe-tutorial-carousel-component .npe-tutorial-carousel-arrow:active { background-image: url(/fe/lol-new-player-experience/arrow_click.png), radial-gradient(ellipse at right, rgba(255,255,255,0.11) 0%, transparent 70%); background-size: 32px 32px, 100% 100%; background-repeat: no-repeat, no-repeat; background-position: center center, center center; } .npe-tutorial-carousel-component .npe-tutorial-carousel-arrow:disabled { background-image: url(/fe/lol-new-player-experience/arrow_disabled.png); cursor: unset; } .npe-tutorial-carousel-component .npe-tutorial-carousel-arrow.npe-tutorial-carousel-left-arrow { left: 0px; transform: rotate(180deg); } .npe-tutorial-carousel-component .npe-tutorial-carousel-arrow.npe-tutorial-carousel-right-arrow { right: 0px; } .npe-tp-carousel-navigation { display: flex; flex-direction: column; align-items: center; width: 100%; } .npe-tp-carousel-navigation.visible { opacity: 1; -webkit-transition: opacity 0.1s ease-in-out 0.1s; } .npe-tp-carousel-navigation.hidden { opacity: 0; -webkit-transition: opacity 0.1s ease-in-out; } .npe-tp-carousel-navigation .nav-content { display: flex; flex-direction: row; min-width: 170px; height: 64px; justify-content: center; } .npe-tp-carousel-navigation .nav-content .nav-pips { display: flex; align-items: center; height: 100%; } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip { display: flex; flex-direction: column; justify-content: center; align-items: center; background-position: center; width: 24px; height: 24px; cursor: pointer; padding: 0 3px; background-size: 18px 18px; background-repeat: no-repeat; } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.unlocked { background-image: url(/fe/lol-new-player-experience/pip-circle-default.png); } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.unlocked:hover { background-image: url(/fe/lol-new-player-experience/pip-circle-hover.png); } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.unlocked:active { background-image: url(/fe/lol-new-player-experience/pip-circle-clicked.png); } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.unlocked.disabled { background-image: url(/fe/lol-new-player-experience/pip-circle-disabled.png); cursor: default; } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.unlocked.selected { background-image: url(/fe/lol-new-player-experience/pip-circle-selected.png); cursor: default; } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.unlocked.selected.disabled { background-image: url(/fe/lol-new-player-experience/pip-circle-disabled.png); cursor: default; } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.completed { background-image: url(/fe/lol-new-player-experience/pip-checkmark-default.png); } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.completed:hover { background-image: url(/fe/lol-new-player-experience/pip-checkmark-hover.png); cursor: pointer; } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.completed:active { background-image: url(/fe/lol-new-player-experience/pip-checkmark-clicked.png); } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.completed.selected { background-image: url(/fe/lol-new-player-experience/pip-checkmark-selected.png); cursor: default; } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.locked { background-image: url(/fe/lol-new-player-experience/pip-lock-default.png); } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.locked:hover { background-image: url(/fe/lol-new-player-experience/pip-lock-hover.png); cursor: pointer; } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.locked:active { background-image: url(/fe/lol-new-player-experience/pip-lock-clicked.png); } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.locked.disabled { background-image: url(/fe/lol-new-player-experience/pip-lock-disabled.png); } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.locked.selected { background-image: url(/fe/lol-new-player-experience/pip-lock-selected.png); cursor: default; } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.locked.selected.disabled { background-image: url(/fe/lol-new-player-experience/pip-lock-disabled.png); } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.reward { background-size: contain; background-image: url(/fe/lol-new-player-experience/pip-capsule-default.png); } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.reward:hover { background-image: url(/fe/lol-new-player-experience/pip-capsule-hover.png); } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.reward:active { background-image: url(/fe/lol-new-player-experience/pip-capsule-clicked.png); } .npe-tp-carousel-navigation .nav-content .nav-pips .nav-pip.reward.selected { background-image: url(/fe/lol-new-player-experience/pip-capsule-selected.png); cursor: default; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-sequence-block .npe-tutorial-item-sequence, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-title, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block .npe-tutorial-item-reward-title { font-family: var(--font-display); } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-description, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-reward-description, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay { font-family: var(--font-body); } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-sequence-block .npe-tutorial-item-sequence, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-title, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-description, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block .npe-tutorial-item-reward-title, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-reward-description, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay { -webkit-user-select: none; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-sequence-block .npe-tutorial-item-sequence, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-title, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-description, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block .npe-tutorial-item-reward-title, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-reward-description, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-sequence-block .npe-tutorial-item-sequence, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-title, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block .npe-tutorial-item-reward-title { text-transform: uppercase; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-sequence-block .npe-tutorial-item-sequence:lang(ko-kr), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-title:lang(ko-kr), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block .npe-tutorial-item-reward-title:lang(ko-kr), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-sequence-block .npe-tutorial-item-sequence:lang(ja-jp), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-title:lang(ja-jp), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block .npe-tutorial-item-reward-title:lang(ja-jp), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-sequence-block .npe-tutorial-item-sequence:lang(tr-tr), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-title:lang(tr-tr), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block .npe-tutorial-item-reward-title:lang(tr-tr), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-sequence-block .npe-tutorial-item-sequence:lang(el-gr), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-title:lang(el-gr), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block .npe-tutorial-item-reward-title:lang(el-gr), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-sequence-block .npe-tutorial-item-sequence:lang(th-th), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-title:lang(th-th), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block .npe-tutorial-item-reward-title:lang(th-th), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-sequence-block .npe-tutorial-item-sequence:lang(zh-tw), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-title:lang(zh-tw), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block .npe-tutorial-item-reward-title:lang(zh-tw) { text-transform: none; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-sequence-block .npe-tutorial-item-sequence, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block .npe-tutorial-item-reward-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-description, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-reward-description, .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-description:lang(ja-jp), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-reward-description:lang(ja-jp), .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay:lang(ja-jp) { font-size: 13px; } .npe-tutorial-item-card-component { display: flex; flex-direction: row; justify-content: center; width: 324px; height: 414px; position: relative; cursor: pointer; transition: 0.3s; } .npe-tutorial-item-card-component lol-uikit-dialog-frame { width: 324px; height: 414px; } .npe-tutorial-item-card-component:hover.card { -webkit-transition: -webkit-filter 0.3s cubic-bezier(0.23, 1, 0.32, 1); -webkit-filter: brightness(1.2); } .npe-tutorial-item-card-component:hover.card.locked { -webkit-transition: -webkit-filter 0.3s cubic-bezier(0.23, 1, 0.32, 1); -webkit-filter: brightness(1.1); } .npe-tutorial-item-card-component:hover.card.selected { -webkit-filter: unset; cursor: default; } .npe-tutorial-item-card-component.selected { cursor: default; } .npe-tutorial-item-card-component.selected.card::after { transition: box-shadow 0.3s cubic-bezier(0, 0.58, 0.58, 1); box-shadow: 0 0 90px rgba(10,150,170,0.4); } .npe-tutorial-item-card-component.card::after { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; content: ''; transition: box-shadow 0.3s cubic-bezier(0, 0.58, 0.58, 1); box-shadow: 0 0 0 rgba(10,150,170,0); } .npe-tutorial-item-card-component .tutorial-item-card-animation { direction: rtl; padding: 18px; display: flex; flex-direction: column; width: 284px; height: 374px; position: relative; } .npe-tutorial-item-card-component .tutorial-item-card-animation > uikit-switch { pointer-events: none; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-complete-video { position: absolute; top: 71px; left: 32px; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-unlock-video { position: absolute; top: -153px; left: -86px; cursor: default; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-image { width: 320px; height: 410px; background-size: 100% 100%; position: absolute; top: 0; left: 0; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-image.locked { -webkit-filter: saturate(30%); } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block { display: flex; width: 100%; height: 100%; flex: 1 1 auto; position: relative; flex-direction: row; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-sequence-block { padding-top: 4px; margin: 0 0 0 16px; flex: 0 0 auto; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-sequence-block .npe-tutorial-item-sequence { font-size: 48px; background: -webkit-linear-gradient(#cdbe91, #c8aa6e, #785a28); -webkit-text-fill-color: transparent; padding-bottom: 7px; padding-top: 4px; -webkit-background-clip: text; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #cdbe91; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block { flex-direction: column; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-title { color: #cdbe91; padding-bottom: 5px; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-top-block .npe-tutorial-item-text-block .npe-tutorial-item-title:hover { color: #cdbe91; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block { display: flex; flex: 0 0 auto; width: 100%; align-items: center; justify-content: center; flex-direction: column; position: relative; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block .npe-tutorial-item-reward-title { color: #c8aa6e; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block .npe-tutorial-item-reward-block { display: flex; flex-direction: row; margin-top: 11px; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-rewards-block .npe-tutorial-item-reward-block .npe-tutorial-item-reward-icon { background-size: contain; width: 18px; height: 18px; margin: -3px 0 0 7px; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-reward-description { color: #a09b8c; position: relative; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay { color: #785a28; position: absolute; left: 0; top: 0; opacity: 0; height: 100%; width: 100%; background-position: center, top left; background-repeat: no-repeat, no-repeat; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease-out; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay .npe-tutorial-item-lock-text { margin-top: 105px; width: 50%; text-align: center; opacity: 0; color: #c8aa6e; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay .npe-tutorial-item-lock-text.selected { opacity: 1; cursor: default; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay.visible { opacity: 1; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay.hidden { opacity: 0; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay.checkmark { background-image: url(/fe/lol-new-player-experience/checkmark-default.png), linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)); background-size: 128px 128px, 100% 100%; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay.checkmark.largeAnimationsEnabled: { transition: opacity 0.3s ease-out 2.1s; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay.checkmark:hover { background-image: url(/fe/lol-new-player-experience/checkmark-hover.png); background-size: 128px 128px; background-position: center; background-repeat: no-repeat; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay.checkmark.selected { background-image: url(/fe/lol-new-player-experience/checkmark-default.png), linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)); background-size: 128px 128px, 100% 100%; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay.lock { background-image: url(/fe/lol-new-player-experience/lock-default.png), linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)); background-size: 128px 128px, 100% 100%; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay.lock.largeAnimationsEnabled: { transition: opacity 0.3s ease-out 3.5s; } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay.lock:hover { color: #a09b8c; background-image: url(/fe/lol-new-player-experience/lock-hover.png), linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)); } .npe-tutorial-item-card-component .tutorial-item-card-animation .npe-tutorial-item-overlay.lock:hover .npe-tutorial-item-lock-text { color: #f0e6d2; opacity: 1; } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark { font-family: var(--font-body); } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark { -webkit-user-select: none; } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark:lang(ja-jp) { font-size: 13px; } .npe-tutorial-item-reward-component { display: flex; flex-direction: row; justify-content: center; width: 324px; height: 414px; position: relative; cursor: pointer; transition: 0.3s; } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper { direction: rtl; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex: 1 1 auto; } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-item-reward-switch .npe-tutorial-reward-image { width: 324px; height: 450px; background-image: url(/fe/lol-new-player-experience/lg-reward-capsule.png); background-size: cover; background-repeat: no-repeat; background-position: center; margin-top: -43px; margin-left: 7px; } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-item-reward-switch .npe-tutorial-reward-image.locked, .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-item-reward-switch .npe-tutorial-reward-image.completed { -webkit-filter: saturate(50%); opacity: 0.4; } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-item-reward-switch .npe-tutorial-item-reward-video { margin-top: -112px; animation: float-up-and-down 3s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95) alternate; transform: translate3d(0, 5px, 0); } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-item-reward-switch .npe-tutorial-item-reward-video.locked, .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-item-reward-switch .npe-tutorial-item-reward-video.completed { -webkit-filter: saturate(50%); opacity: 0.4; } @-moz-keyframes float-up-and-down { from { transform: translate3d(0, 5px, 0); } to { transform: translate3d(0, -8px, 0); } } @-webkit-keyframes float-up-and-down { from { transform: translate3d(0, 5px, 0); } to { transform: translate3d(0, -8px, 0); } } @-o-keyframes float-up-and-down { from { transform: translate3d(0, 5px, 0); } to { transform: translate3d(0, -8px, 0); } } @keyframes float-up-and-down { from { transform: translate3d(0, 5px, 0); } to { transform: translate3d(0, -8px, 0); } } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark { color: #785a28; position: absolute; left: 0; top: 0; opacity: 0; height: 100%; width: 100%; background-size: 128px 128px; background-position: 57% 50%; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark:hover, .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark.selected, .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark.locked { opacity: 1; } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark .npe-tutorial-reward-lock-text { margin-bottom: 20px; width: 66%; text-align: center; opacity: 0; color: #c8aa6e; } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark .npe-tutorial-reward-lock-text:hover, .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark .npe-tutorial-reward-lock-text.selected { opacity: 1; } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark.completed { background-image: url(/fe/lol-new-player-experience/checkmark-default.png); } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark.completed:hover { background-image: url(/fe/lol-new-player-experience/checkmark-hover.png); } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark.completed.selected { background-image: url(/fe/lol-new-player-experience/checkmark-default.png); } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark.locked { background-image: url(/fe/lol-new-player-experience/lock-default.png); } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark.locked:hover { color: #a09b8c; background-image: url(/fe/lol-new-player-experience/lock-hover.png); } .npe-tutorial-item-reward-component .npe-tutorial-item-reward-wrapper .npe-tutorial-reward-checkmark.locked:hover .npe-tutorial-reward-lock-text { color: #f0e6d2; opacity: 1; } .npe-tutorial-item-reward-component:hover.reward { -webkit-transition: -webkit-filter 0.3s cubic-bezier(0.23, 1, 0.32, 1); -webkit-filter: brightness(1.15); } .npe-tutorial-item-reward-component:hover.reward.selected { -webkit-filter: unset; cursor: default; } .npe-tutorial-item-reward-component.selected { cursor: default; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level, .npe-header-component .summoner-info-anchor .current-player-name, .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text { font-family: var(--font-display); } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level, .npe-header-component .summoner-info-anchor .current-player-name, .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text { font-family: var(--font-display); } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level, .npe-header-component .summoner-info-anchor .current-player-name, .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text { -webkit-user-select: none; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level, .npe-header-component .summoner-info-anchor .current-player-name, .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level, .npe-header-component .summoner-info-anchor .current-player-name, .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text { text-transform: uppercase; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level:lang(ko-kr), .npe-header-component .summoner-info-anchor .current-player-name:lang(ko-kr), .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text:lang(ko-kr), .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level:lang(ja-jp), .npe-header-component .summoner-info-anchor .current-player-name:lang(ja-jp), .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text:lang(ja-jp), .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level:lang(tr-tr), .npe-header-component .summoner-info-anchor .current-player-name:lang(tr-tr), .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text:lang(tr-tr), .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level:lang(el-gr), .npe-header-component .summoner-info-anchor .current-player-name:lang(el-gr), .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text:lang(el-gr), .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level:lang(th-th), .npe-header-component .summoner-info-anchor .current-player-name:lang(th-th), .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text:lang(th-th), .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level:lang(zh-tw), .npe-header-component .summoner-info-anchor .current-player-name:lang(zh-tw), .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text:lang(zh-tw) { text-transform: none; } .npe-header-component .summoner-info-anchor .current-player-name, .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text { text-transform: none; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level, .npe-header-component .summoner-info-anchor .current-player-name, .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .npe-header-component .summoner-info-anchor .current-player-name, .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text { letter-spacing: 0.0375em; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level { color: #a09b8c; } .npe-header-component { width: 100%; height: 80px; position: relative; } .npe-header-component .summoner-info-anchor { display: flex; position: absolute; top: 7px; right: 0px; width: 223px; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level { height: 60px; width: 60px; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level-icon { margin-top: 6px; margin-left: 11px; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level-icon .icon-image { background-color: inherit; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-icon-image { position: absolute; width: 60px; height: 60px; border-radius: 50%; border: 0; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .xp-ring { border-radius: 50%; width: 56px; height: 56px; position: absolute; left: -3px; top: -3px; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .unfilled.xp-ring { background-color: #0a323c; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .filled.xp-ring { background-color: #0596aa; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .center.xp-ring { background-color: #010a13; width: 48px; height: 48px; left: 1px; top: 1px; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .icon-image { position: absolute; overflow: hidden; border-radius: 50%; border: 2px solid transparent; box-sizing: border-box; width: 84%; height: 84%; background-color: #010a13; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level-ring { background-image: url(/fe/lol-new-player-experience/social_panel_level_ring.png); background-position: center; background-size: 76px 76px; position: absolute; width: 70px; height: 70px; top: -10px; left: -10px; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level { width: 32px; font-size: 11px; position: absolute; bottom: 0px; left: 9px; text-align: center; } .npe-header-component .summoner-info-anchor .fancy-icon-with-level .summoner-level.has-long-summoner-level { font-size: 10px; bottom: -1px; } .npe-header-component .summoner-info-anchor .current-player-name { text-overflow: ellipsis; overflow: hidden; white-space: no-wrap; margin-left: 13px; margin-top: 4px; align-self: center; width: 145px; } .npe-header-component .tutorial-path-nav { position: absolute; top: 0; left: 0; width: 100%; height: 80px; border-bottom: 1px solid rgba(240,230,210,0.25); } .npe-header-component .tutorial-path-nav .tutorial-path-nav-items { display: flex; padding-left: 100px; } .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item { position: relative; display: flex; width: 90px; height: 79px; } .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item::before { content: ''; background-image: url(/fe/lol-new-player-experience/nav-pointer.png); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; height: 15px; width: 90px; top: -2px; position: absolute; } .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item::after { content: ''; background-image: url(/fe/lol-new-player-experience/nav-highlight.png); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; height: 45px; width: 150px; position: absolute; bottom: -1px; left: 0px; margin-left: -37px; } .npe-header-component .tutorial-path-nav .tutorial-path-nav-items .tutorial-path-nav-item .tutorial-path-nav-item-text { align-self: center; cursor: default; margin: auto; } .npe-header-component .npe-header-league-logo { margin-left: 15px; margin-top: 12px; } .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-text, .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-footer { font-family: var(--font-display); } .npe-reward-celebration-animation, .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-text, .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-footer { -webkit-user-select: none; } .npe-reward-celebration-animation, .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-text, .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-footer { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-text, .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-footer { text-transform: uppercase; } .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-text:lang(ko-kr), .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-footer:lang(ko-kr), .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-text:lang(ja-jp), .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-footer:lang(ja-jp), .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-text:lang(tr-tr), .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-footer:lang(tr-tr), .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-text:lang(el-gr), .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-footer:lang(el-gr), .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-text:lang(th-th), .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-footer:lang(th-th), .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-text:lang(zh-tw), .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-footer:lang(zh-tw) { text-transform: none; } .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-footer { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-footer:lang(ja-jp) { font-size: 13px; } .npe-reward-celebration-animation { margin: 0; width: 1280px; height: 720px; position: absolute; left: 0; right: 1; top: 0; bottom: 1; margin: 0 0; padding: 0 0; } .npe-reward-celebration-animation .reward-wrapper { display: flex; position: absolute; width: 100%; justify-content: center; align-items: flex-start; height: 450px; top: 120px; left: 0px; } .npe-reward-celebration-animation .reward-wrapper.blue-essence-container { display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 1s; } .npe-reward-celebration-animation .reward-wrapper.blue-essence-container.show { opacity: 1; } .npe-reward-celebration-animation .reward-wrapper.blue-essence-container.hide { opacity: 0; } .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .npe-reward-blue-essence-static { width: 414px; height: 414px; background-image: url("/fe/lol-loot/assets/loot_item_icons/currency_champion.png"); } .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper { position: absolute; top: 78%; left: 39%; } .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-text { color: #cdbe91; min-height: 18px; max-height: 36px; line-height: 18px; vertical-align: middle; text-align: center; } .npe-reward-celebration-animation .reward-wrapper.blue-essence-container .reward-text-wrapper .reward-footer { color: #c89b3c; flex: 1 1 auto; height: 18px; line-height: 18px; vertical-align: middle; text-align: center; margin-top: 0.5rem; } .npe-reward-celebration-animation .reward-wrapper.capsule-container { opacity: 1; transition: opacity 0.75s; } .npe-reward-celebration-animation .reward-wrapper.capsule-container.show { opacity: 1; } .npe-reward-celebration-animation .reward-wrapper.capsule-container.hide { opacity: 0; }