.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-npe-first-touch/button_close.png); } .decorated-footer .button-img.close:hover { background-image: url(/fe/lol-npe-first-touch/button_close_hover.png); } .decorated-footer .button-img.close:active { background-image: url(/fe/lol-npe-first-touch/button_close_click.png); } .decorated-footer .button-img.close:disabled { background-image: url(/fe/lol-npe-first-touch/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-npe-first-touch/LeftStraightDefault.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm:hover .left-confirm { background-image: url(/fe/lol-npe-first-touch/LeftStraightHover.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm:active .left-confirm { background-image: url(/fe/lol-npe-first-touch/LeftStraightClick.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm.disabled .left-confirm { background-image: url(/fe/lol-npe-first-touch/LeftStraightDisabled.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm.completed .left-confirm { background-image: url(/fe/lol-npe-first-touch/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-npe-first-touch/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-npe-first-touch/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-npe-first-touch/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-npe-first-touch/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-npe-first-touch/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-npe-first-touch/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-npe-first-touch/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-npe-first-touch/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-npe-first-touch/RightDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .left-confirm { background-image: url(/fe/lol-npe-first-touch/LeftHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .middle-confirm { background-image: url(/fe/lol-npe-first-touch/MidHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .right-confirm { background-image: url(/fe/lol-npe-first-touch/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-npe-first-touch/LeftClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .middle-confirm { background-image: url(/fe/lol-npe-first-touch/MidClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .right-confirm { background-image: url(/fe/lol-npe-first-touch/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-npe-first-touch/LeftDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .middle-confirm { background-image: url(/fe/lol-npe-first-touch/MidDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .right-confirm { background-image: url(/fe/lol-npe-first-touch/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-npe-first-touch/LeftCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .middle-confirm { background-image: url(/fe/lol-npe-first-touch/MidCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .right-confirm { background-image: url(/fe/lol-npe-first-touch/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-npe-first-touch/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-npe-first-touch/Exit_Default.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close[type="back"] .close-icon { background-image: url(/fe/lol-npe-first-touch/Back_default.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover { background-image: url(/fe/lol-npe-first-touch/Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover .close-icon { background-image: url(/fe/lol-npe-first-touch/Exit_Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover[type="back"] .close-icon { background-image: url(/fe/lol-npe-first-touch/Back_Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active { background-image: url(/fe/lol-npe-first-touch/Clicked.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active .close-icon { background-image: url(/fe/lol-npe-first-touch/Exit_Click.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active[type="back"] .close-icon { background-image: url(/fe/lol-npe-first-touch/Back_click.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled { background-image: url(/fe/lol-npe-first-touch/Disabled.png); cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled .close-icon { background-image: url(/fe/lol-npe-first-touch/Exit_Disabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled[type="back"] .close-icon { background-image: url(/fe/lol-npe-first-touch/Back_Disabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed { cursor: default; background-image: url(/fe/lol-npe-first-touch/Completed.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed .close-icon { background-image: url(/fe/lol-npe-first-touch/Checkmark.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed[type="back"] .close-icon { background-image: url(/fe/lol-npe-first-touch/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; } .rcp-fe-lol-npe-first-touch { width: 100%; height: 100%; } .rcp-fe-lol-npe-first-touch .first-touch-section-controller { color: #fff; } .rcp-fe-lol-npe-first-touch .first-touch-intro-video-container { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; } .rcp-fe-lol-npe-first-touch .first-touch-intro-video-container .npe-intro-video video { width: 1280px; height: 720px; } .rcp-fe-lol-npe-first-touch .first-touch-intro-video-container .skip-wrapper { position: absolute; top: 648px; left: 50%; transform: translateX(-50%); min-width: 112px; } .summoner-name-create-component .first-touch-summoner-name-creation-header, .summoner-name-create-component .first-touch-summoner-name-creation-content .first-touch-summoner-name-creation-subheader, .summoner-name-create-component .char-counter { font-family: var(--font-display); } .summoner-name-create-component .external-link, .summoner-name-create-component .first-touch-summoner-name-creation-input, .summoner-name-create-component .request-error-submit, .summoner-name-create-component .first-touch-summoner-name-creation-error { font-family: var(--font-body); } .summoner-name-create-component .first-touch-summoner-name-creation-header, .summoner-name-create-component .first-touch-summoner-name-creation-content .first-touch-summoner-name-creation-subheader, .summoner-name-create-component .external-link, .summoner-name-create-component .first-touch-summoner-name-creation-input, .summoner-name-create-component .char-counter, .summoner-name-create-component .request-error-submit, .summoner-name-create-component .first-touch-summoner-name-creation-error { -webkit-user-select: none; } .summoner-name-create-component .first-touch-summoner-name-creation-header, .summoner-name-create-component .first-touch-summoner-name-creation-content .first-touch-summoner-name-creation-subheader, .summoner-name-create-component .external-link, .summoner-name-create-component .first-touch-summoner-name-creation-input, .summoner-name-create-component .char-counter, .summoner-name-create-component .request-error-submit, .summoner-name-create-component .first-touch-summoner-name-creation-error { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .summoner-name-create-component .first-touch-summoner-name-creation-header, .summoner-name-create-component .first-touch-summoner-name-creation-content .first-touch-summoner-name-creation-subheader { text-transform: uppercase; } .summoner-name-create-component .first-touch-summoner-name-creation-header:lang(ko-kr), .summoner-name-create-component .first-touch-summoner-name-creation-content .first-touch-summoner-name-creation-subheader:lang(ko-kr), .summoner-name-create-component .first-touch-summoner-name-creation-header:lang(ja-jp), .summoner-name-create-component .first-touch-summoner-name-creation-content .first-touch-summoner-name-creation-subheader:lang(ja-jp), .summoner-name-create-component .first-touch-summoner-name-creation-header:lang(tr-tr), .summoner-name-create-component .first-touch-summoner-name-creation-content .first-touch-summoner-name-creation-subheader:lang(tr-tr), .summoner-name-create-component .first-touch-summoner-name-creation-header:lang(el-gr), .summoner-name-create-component .first-touch-summoner-name-creation-content .first-touch-summoner-name-creation-subheader:lang(el-gr), .summoner-name-create-component .first-touch-summoner-name-creation-header:lang(th-th), .summoner-name-create-component .first-touch-summoner-name-creation-content .first-touch-summoner-name-creation-subheader:lang(th-th), .summoner-name-create-component .first-touch-summoner-name-creation-header:lang(zh-tw), .summoner-name-create-component .first-touch-summoner-name-creation-content .first-touch-summoner-name-creation-subheader:lang(zh-tw) { text-transform: none; } .summoner-name-create-component .first-touch-summoner-name-creation-header { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .summoner-name-create-component .first-touch-summoner-name-creation-content .first-touch-summoner-name-creation-subheader { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .summoner-name-create-component .first-touch-summoner-name-creation-input, .summoner-name-create-component .request-error-submit, .summoner-name-create-component .first-touch-summoner-name-creation-error { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .summoner-name-create-component .external-link { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .summoner-name-create-component .external-link:lang(ja-jp) { font-size: 13px; } .summoner-name-create-component .external-link { color: #0596aa; text-decoration: none; } .summoner-name-create-component .external-link:hover, .summoner-name-create-component .external-link.hover { color: #cdfafa; } .summoner-name-create-component .external-link:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-npe-first-touch/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .summoner-name-create-component .external-link:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .summoner-name-create-component .external-link:hover:after { background-color: #cdfafa; } .summoner-name-create-component .char-counter { font-size: 16px; font-weight: 700; letter-spacing: 0.05em; } .summoner-name-create-component .first-touch-summoner-name-creation-container { width: 1278px; height: 718px; background-size: 100%; overflow: hidden; transition: opacity 0.3s ease; cursor: default; flex-direction: column; display: flex; justify-content: space-between; background-color: #010a13; } .summoner-name-create-component .first-touch-summoner-name-creation-header { direction: ltr; color: #f0e6d2; text-align: center; font-size: 40px; position: absolute; width: 100%; margin-top: 35px; } .summoner-name-create-component .first-touch-summoner-name-creation-wrapper { direction: ltr; width: 100%; height: 513px; position: relative; top: 50%; transform: translateY(-50%); background-image: url("/fe/lol-npe-first-touch/images/summoner-name-create-bg.jpg"); background-size: 100% 100%; } .summoner-name-create-component .first-touch-summoner-name-creation-wrapper::before { content: ""; position: absolute; height: 2px; background-image: -webkit-linear-gradient(left, #32281e 0%, #785a28 50%, #32281e 100%); width: 100%; } .summoner-name-create-component .first-touch-summoner-name-creation-wrapper::after { content: ""; position: absolute; height: 2px; background-image: -webkit-linear-gradient(left, #32281e 0%, #785a28 50%, #32281e 100%); width: 100%; } .summoner-name-create-component .first-touch-summoner-name-creation-content { width: 800px; height: 512px; margin: auto; } .summoner-name-create-component .first-touch-summoner-name-creation-content .first-touch-summoner-name-creation-subheader { color: #a09b8c; text-transform: none; text-align: center; } .summoner-name-create-component .first-touch-summoner-name-creation-content .new-summoner-name-prompt { padding-top: 163px; } .summoner-name-create-component .first-touch-summoner-name-creation-content .forced-name-change-prompt { padding-top: 90px; } .summoner-name-create-component .external-link { font-size: inherit; } .summoner-name-create-component .external-link:after { width: 12px; height: 12px; } .summoner-name-create-component .external-link:lang(ja-jp) { font-size: 24px; } .summoner-name-create-component lol-uikit-flat-input .first-touch-summoner-name-creation-input { margin-top: 43px; line-height: 53px; } .summoner-name-create-component .first-touch-summoner-name-creation-input { font-size: 24px; color: #f0e6d2; padding: 0 50px 0 15px ; width: 495px; height: 50px; margin: auto; display: block; background-color: #1e2328; box-shadow: 0 0 1px 1px #010a13, inset 0 0 1px 1px #010a13; } .summoner-name-create-component .footer-container { height: 100px; display: flex; flex-direction: column; justify-content: center; } .summoner-name-create-component .footer-container .arrow-footer { height: 40px; } .summoner-name-create-component .fade-in-parent { position: relative; visibility: hidden; } .summoner-name-create-component .fade-in-parent * { -webkit-transition: opacity 0.28s linear; opacity: 0; } .summoner-name-create-component .fade-in-parent.loading .loading, .summoner-name-create-component .fade-in-parent.error .error-icon, .summoner-name-create-component .fade-in-parent.counter .char-counter, .summoner-name-create-component .fade-in-parent.confirmed .confirmed-icon, .summoner-name-create-component .fade-in-parent.unavailable .unavailable-icon, .summoner-name-create-component .fade-in-parent.retry .retry-button { opacity: 1; visibility: visible; } .summoner-name-create-component .error-icon { background: url("/fe/lol-npe-first-touch/images/summoner-name-create-warning-icon.png"); } .summoner-name-create-component .confirmed-icon { background: url("/fe/lol-npe-first-touch/images/summoner-name-create-confirmed-icon.png"); } .summoner-name-create-component .unavailable-icon { background: url("/fe/lol-npe-first-touch/images/summoner-name-create-taken-icon.png"); } .summoner-name-create-component .error-icon, .summoner-name-create-component .char-counter, .summoner-name-create-component .confirmed-icon, .summoner-name-create-component .unavailable-icon, .summoner-name-create-component .try-again-button { background-size: 20px; position: absolute; width: 20px; height: 20px; bottom: 15px; right: 169px ; } .summoner-name-create-component .error-icon, .summoner-name-create-component .char-counter, .summoner-name-create-component .confirmed-icon, .summoner-name-create-component .unavailable-icon { pointer-events: none; } .summoner-name-create-component .retry-button { pointer-events: auto; position: absolute; bottom: 9px; right: 163px; } .summoner-name-create-component .char-counter { color: #f0e6d2; } .summoner-name-create-component lol-uikit-spinner { position: absolute; right: 159px ; top: -45px; } .summoner-name-create-component .negative-char { color: #be1e37; } .summoner-name-create-component lol-uikit-flat-button-group { margin-left: 555px; margin-top: 95px; } .summoner-name-create-component .request-error-submit, .summoner-name-create-component .first-touch-summoner-name-creation-error { text-align: center; width: 500px; margin: auto; } .summoner-name-create-component .request-error-submit { position: absolute; width: 100%; margin-top: -27px; } .summoner-name-create-component .error-name-taken, .summoner-name-create-component .request-error-submit, .summoner-name-create-component .request-error-name-availability { color: #c89b3c; } .summoner-name-create-component .first-touch-summoner-name-creation-error { color: #be1e37; padding-top: 5px; } .summoner-name-create-component .request-error-submit, .summoner-name-create-component .first-touch-summoner-name-creation-error { -webkit-transition: opacity 0.28s linear; opacity: 0; } .summoner-name-create-component .request-error-submit.fade-in-error-messages, .summoner-name-create-component .first-touch-summoner-name-creation-error.fade-in-error-messages { opacity: 1; } .npe-first-touch-patching-experience-component { width: 1278px; height: 718px; background-image: url("/fe/lol-npe-first-touch/images/patching-xp-bg.png"); background-size: contain; background-position: center; background-repeat: no-repeat; } .npe-first-touch-champion-carousel-component { width: 1278px; height: 629px; position: absolute; top: 90px; left: 0; } .npe-first-touch-champion-carousel-component .next-button { position: absolute; top: 270px; right: 50px; } .npe-first-touch-champion-carousel-component .previous-button { position: absolute; top: 270px; left: 50px; } .npe-first-touch-champion-carousel-component .champion-selection-indicator { position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%); display: flex; width: 100%; height: 18px; flex-direction: row; align-items: center; margin: auto; margin-top: -2px; } .npe-first-touch-champion-carousel-component .champion-selection-indicator .champion-selection-indicator-list { display: flex; align-items: center; margin: 0 auto; padding: 0; } .npe-first-touch-champion-carousel-component .champion-selection-indicator .champion-pip { display: block; width: 6px; height: 6px; margin-top: -1px; padding: 5px; background: url("/fe/lol-npe-first-touch/images/pip-unselected.png") center no-repeat; background-size: contain; } .npe-first-touch-champion-carousel-component .champion-selection-indicator .champion-pip.champion-pip-selected { background-image: url("/fe/lol-npe-first-touch/images/pip-selected.png"); } .npe-first-touch-champion-carousel-component .champion-selection-indicator .champion-pip:hover:not(.champion-pip-selected) { cursor: pointer; background-image: url("/fe/lol-npe-first-touch/images/pip-hover.png"); } .npe-first-touch-champion-carousel-component .champion-selection-indicator .champion-pip:active:not(.champion-pip-selected) { background-image: url("/fe/lol-npe-first-touch/images/pip-click.png"); } .npe-first-touch-champion-carousel-item-component { width: 960px; height: 540px; position: relative; display: block; margin-left: auto; margin-right: auto; } .npe-first-touch-champion-carousel-item-component .champion-carousel-item-content { width: 100%; height: 540px; overflow: hidden; } .npe-first-touch-champion-carousel-item-component .champion-carousel-item-img { width: inherit; } .npe-first-touch-champion-information-component .champion-heading .champion-name, .npe-first-touch-champion-information-component .champion-heading .champion-title { font-family: var(--font-display); } .npe-first-touch-champion-information-component .champion-description .learn-more-link { font-family: var(--font-body); } .npe-first-touch-champion-information-component .champion-heading .champion-name, .npe-first-touch-champion-information-component .champion-heading .champion-title, .npe-first-touch-champion-information-component .champion-description .learn-more-link { -webkit-user-select: none; } .npe-first-touch-champion-information-component .champion-heading .champion-name, .npe-first-touch-champion-information-component .champion-heading .champion-title, .npe-first-touch-champion-information-component .champion-description .learn-more-link { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .npe-first-touch-champion-information-component .champion-heading .champion-name, .npe-first-touch-champion-information-component .champion-heading .champion-title { text-transform: uppercase; } .npe-first-touch-champion-information-component .champion-heading .champion-name:lang(ko-kr), .npe-first-touch-champion-information-component .champion-heading .champion-title:lang(ko-kr), .npe-first-touch-champion-information-component .champion-heading .champion-name:lang(ja-jp), .npe-first-touch-champion-information-component .champion-heading .champion-title:lang(ja-jp), .npe-first-touch-champion-information-component .champion-heading .champion-name:lang(tr-tr), .npe-first-touch-champion-information-component .champion-heading .champion-title:lang(tr-tr), .npe-first-touch-champion-information-component .champion-heading .champion-name:lang(el-gr), .npe-first-touch-champion-information-component .champion-heading .champion-title:lang(el-gr), .npe-first-touch-champion-information-component .champion-heading .champion-name:lang(th-th), .npe-first-touch-champion-information-component .champion-heading .champion-title:lang(th-th), .npe-first-touch-champion-information-component .champion-heading .champion-name:lang(zh-tw), .npe-first-touch-champion-information-component .champion-heading .champion-title:lang(zh-tw) { text-transform: none; } .npe-first-touch-champion-information-component .champion-heading .champion-name { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .npe-first-touch-champion-information-component .champion-heading .champion-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .npe-first-touch-champion-information-component .champion-heading .champion-title { color: #a09b8c; } .npe-first-touch-champion-information-component .champion-description .learn-more-link { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .npe-first-touch-champion-information-component .champion-description .learn-more-link:lang(ja-jp) { font-size: 13px; } .npe-first-touch-champion-information-component .champion-description .learn-more-link { color: #0596aa; text-decoration: none; } .npe-first-touch-champion-information-component .champion-description .learn-more-link:hover, .npe-first-touch-champion-information-component .champion-description .learn-more-link.hover { color: #cdfafa; } .npe-first-touch-champion-information-component .champion-description .learn-more-link:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-npe-first-touch/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .npe-first-touch-champion-information-component .champion-description .learn-more-link:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .npe-first-touch-champion-information-component .champion-description .learn-more-link:hover:after { background-color: #cdfafa; } .npe-first-touch-champion-information-component { position: absolute; top: 0; width: 50%; height: 540px; } .npe-first-touch-champion-information-component .champion-information-mask { background-image: url("/fe/lol-npe-first-touch/images/splash-art-mask.png"); background-repeat: round; width: 512px; height: 540px; } .npe-first-touch-champion-information-component .champion-heading { direction: ltr; width: 300px; position: absolute; top: 20px; left: 20px; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; align-content: center; height: 66px; border-bottom: 1px solid rgba(155,125,35,0.5); pointer-events: none; } .npe-first-touch-champion-information-component .champion-heading .heading-column { padding: 0 18px 0 0 ; } .npe-first-touch-champion-information-component .champion-heading .champion-role-icon { background-size: contain; width: 44px; height: 44px; background-repeat: no-repeat; } .npe-first-touch-champion-information-component .champion-heading .champion-role-icon.assassin { background-image: url("/fe/lol-npe-first-touch/images/role-icon-assassin.png"); } .npe-first-touch-champion-information-component .champion-heading .champion-role-icon.fighter { background-image: url("/fe/lol-npe-first-touch/images/role-icon-fighter.png"); } .npe-first-touch-champion-information-component .champion-heading .champion-role-icon.mage { background-image: url("/fe/lol-npe-first-touch/images/role-icon-mage.png"); } .npe-first-touch-champion-information-component .champion-heading .champion-role-icon.marksman { background-image: url("/fe/lol-npe-first-touch/images/role-icon-marksman.png"); } .npe-first-touch-champion-information-component .champion-heading .champion-role-icon.support { background-image: url("/fe/lol-npe-first-touch/images/role-icon-support.png"); } .npe-first-touch-champion-information-component .champion-heading .champion-role-icon.tank { background-image: url("/fe/lol-npe-first-touch/images/role-icon-tank.png"); } .npe-first-touch-champion-information-component .champion-heading .champion-title { margin-bottom: 3px; } .npe-first-touch-champion-information-component .champion-description { direction: ltr; width: 300px; position: absolute; top: 100px; left: 20px; } .npe-first-touch-champion-information-component .champion-description lol-uikit-scrollable { pointer-events: none; overflow: auto ; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-header-title, .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-subheader, .npe-first-touch-game-mode-select-component .game-mode-select-tip, .npe-first-touch-game-mode-select-component .game-mode-select-title, .npe-first-touch-game-mode-select-component .game-mode-select-subtitle { font-family: var(--font-display); } .npe-first-touch-game-mode-select-component .game-mode-select-info { font-family: var(--font-body); } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-header-title, .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-subheader, .npe-first-touch-game-mode-select-component .game-mode-select-tip, .npe-first-touch-game-mode-select-component .game-mode-select-title, .npe-first-touch-game-mode-select-component .game-mode-select-subtitle, .npe-first-touch-game-mode-select-component .game-mode-select-info { -webkit-user-select: none; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-header-title, .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-subheader, .npe-first-touch-game-mode-select-component .game-mode-select-tip, .npe-first-touch-game-mode-select-component .game-mode-select-title, .npe-first-touch-game-mode-select-component .game-mode-select-subtitle, .npe-first-touch-game-mode-select-component .game-mode-select-info { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-header-title, .npe-first-touch-game-mode-select-component .game-mode-select-tip, .npe-first-touch-game-mode-select-component .game-mode-select-title, .npe-first-touch-game-mode-select-component .game-mode-select-subtitle { text-transform: uppercase; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-header-title:lang(ko-kr), .npe-first-touch-game-mode-select-component .game-mode-select-tip:lang(ko-kr), .npe-first-touch-game-mode-select-component .game-mode-select-title:lang(ko-kr), .npe-first-touch-game-mode-select-component .game-mode-select-subtitle:lang(ko-kr), .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-header-title:lang(ja-jp), .npe-first-touch-game-mode-select-component .game-mode-select-tip:lang(ja-jp), .npe-first-touch-game-mode-select-component .game-mode-select-title:lang(ja-jp), .npe-first-touch-game-mode-select-component .game-mode-select-subtitle:lang(ja-jp), .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-header-title:lang(tr-tr), .npe-first-touch-game-mode-select-component .game-mode-select-tip:lang(tr-tr), .npe-first-touch-game-mode-select-component .game-mode-select-title:lang(tr-tr), .npe-first-touch-game-mode-select-component .game-mode-select-subtitle:lang(tr-tr), .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-header-title:lang(el-gr), .npe-first-touch-game-mode-select-component .game-mode-select-tip:lang(el-gr), .npe-first-touch-game-mode-select-component .game-mode-select-title:lang(el-gr), .npe-first-touch-game-mode-select-component .game-mode-select-subtitle:lang(el-gr), .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-header-title:lang(th-th), .npe-first-touch-game-mode-select-component .game-mode-select-tip:lang(th-th), .npe-first-touch-game-mode-select-component .game-mode-select-title:lang(th-th), .npe-first-touch-game-mode-select-component .game-mode-select-subtitle:lang(th-th), .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-header-title:lang(zh-tw), .npe-first-touch-game-mode-select-component .game-mode-select-tip:lang(zh-tw), .npe-first-touch-game-mode-select-component .game-mode-select-title:lang(zh-tw), .npe-first-touch-game-mode-select-component .game-mode-select-subtitle:lang(zh-tw) { text-transform: none; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-header-title { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .npe-first-touch-game-mode-select-component .game-mode-select-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .npe-first-touch-game-mode-select-component .game-mode-select-tip, .npe-first-touch-game-mode-select-component .game-mode-select-subtitle { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .npe-first-touch-game-mode-select-component .game-mode-select-tip:lang(ja-jp), .npe-first-touch-game-mode-select-component .game-mode-select-subtitle:lang(ja-jp) { font-size: 13px; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-subheader { color: #a09b8c; font-size: 16px; font-weight: normal; line-height: 24px; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .npe-first-touch-game-mode-select-component .game-mode-select-info { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .npe-first-touch-game-mode-select-component .game-mode-select-info:lang(ja-jp) { font-size: 13px; } .npe-first-touch-game-mode-select-component .spinner-container { width: 1278px; height: 718px; flex-direction: column; display: flex; justify-content: center; align-items: center; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-container { direction: ltr; width: 1278px; height: 718px; background-size: 100%; overflow: hidden; transition: opacity 0.3s ease; cursor: default; flex-direction: column; display: flex; justify-content: center; align-items: center; background: url("/fe/lol-npe-first-touch/images/game-select-background.jpg") no-repeat center/contain; background-repeat: no-repeat; border-top: 2px solid #695b37; } .npe-first-touch-game-mode-select-component .radial-ticks { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 1050px; width: auto; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 45%, #000 55%, transparent 80%); } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-header-title { color: #f0e6d2; text-align: center; width: 100%; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-header { display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: url("/fe/lol-npe-first-touch/images/magic-bg.png"); background-repeat: no-repeat; background-position: 55% 0px; background-size: contain; min-width: 826px; max-width: 80%; padding-top: 55px; margin-top: -55px; overflow: hidden; } .npe-first-touch-game-mode-select-component .title-decoration { background: url("/fe/lol-npe-first-touch/images/title-decoration.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 18px; width: 623px; margin: 10px 0; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-subheader { color: #a09b8c; text-align: center; margin-bottom: 10px; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-wrapper { display: flex; justify-content: flex-start; width: 580px; align-items: center; flex-direction: row; border: solid 1px; padding: 0; margin-top: 25px; opacity: 1; transition: all 0.3s ease; border: 1px solid #3c3c41; -webkit-filter: brightness(100%); } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-wrapper.summoners-rift { height: auto; max-height: 200px; min-height: 190px; position: relative; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-wrapper.summoners-rift:after { content: ""; position: absolute; min-height: 190px; background-repeat: no-repeat; background-size: cover; background-position: 50% 55%; background-image: url("/fe/lol-npe-first-touch/images/league-button-bg.png"); top: 0; left: 0; right: 0; bottom: 0; z-index: -1; opacity: 0.5; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-wrapper.tft { height: auto; min-height: 140px; position: relative; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-wrapper.tft:after { content: ""; position: absolute; min-height: 140px; background-repeat: no-repeat; background-size: cover; background-position: 50% 40%; background-image: url("/fe/lol-npe-first-touch/images/TFT-button-bg.png"); top: 0; left: 0; right: 0; bottom: 0; z-index: -1; opacity: 0.5; } .npe-first-touch-game-mode-select-component .game-mode-select-text-wrapper { padding: 2% 0; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; } .npe-first-touch-game-mode-select-component .game-mode-select-tip { color: #c89b3c; margin-bottom: 10px; } .npe-first-touch-game-mode-select-component .game-mode-select-title { color: #f0e6d2; margin-bottom: 8px; } .npe-first-touch-game-mode-select-component .game-mode-select-subtitle { margin-bottom: 9px; } .npe-first-touch-game-mode-select-component .game-mode-select-info { color: #cdbe91; max-width: 390px; flex-basis: max-content; } .npe-first-touch-game-mode-select-component .summoners-rift-icon-frame { min-width: 160px; min-height: 190px; position: relative; background-image: url("/fe/lol-npe-first-touch/images/map-icon-bg-large.png"); background-position: center center; background-size: 117px 117px; background-repeat: no-repeat; } .npe-first-touch-game-mode-select-component .summoners-rift-icon { width: 100px; height: 100px; transition: all 0.3s ease; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .npe-first-touch-game-mode-select-component .summoners-rift-icon.hover { opacity: 0; } .npe-first-touch-game-mode-select-component .tft-icon-frame { min-width: 160px; min-height: 140px; position: relative; background-image: url("/fe/lol-npe-first-touch/images/map-icon-bg-small.png"); background-position: center center; background-repeat: no-repeat; background-size: 77px 77px; } .npe-first-touch-game-mode-select-component .tft-icon { transition: all 0.3s ease; width: 70px; height: 70px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .npe-first-touch-game-mode-select-component .tft-icon.hover { opacity: 0; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-wrapper:hover { cursor: pointer; opacity: 1; border-image: linear-gradient(to top, #695625 0%, #a9852d 23%, #b88d35 93%, #c8aa6e 100%) 1 stretch; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-wrapper:hover.summoners-rift:after, .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-wrapper:hover.tft:after { opacity: 1; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-wrapper:hover .tft-icon.hover, .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-wrapper:hover .summoners-rift-icon.hover { opacity: 1; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-wrapper:hover .tft-icon.default, .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-wrapper:hover .summoners-rift-icon.default { opacity: 0; } .npe-first-touch-game-mode-select-component .first-touch-game-mode-select-wrapper:hover .hover-arrow { opacity: 1; } .npe-first-touch-game-mode-select-component .hover-arrow { width: 12px; height: 20px; padding-right: 25px; opacity: 0; transition: opacity 0.3s ease; transform: none ; }