.currency-be-component, .currency-rp, .ticker-incident-header, .ready-check-button-accept, .ready-check-status-text .ready-check-status-title, .ready-check-status-text .ready-check-status-title:lang(ja-jp), .animated-progress-bar.main .progress-percent-text, .update-available-tooltip h1, .basic-button .play-button-container .play-button-content .play-button-text, .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl), #patcher-progress-tooltip h1, .tft-season-start .tft-season-start-title, .tft-season-start .tft-season-start-body { font-family: var(--font-display); } .main-navigation-menu-item .menu-item-small-text, .navigation-status-ticker-content, .navigation-status-ticker-content-no-link, .ticker-incident-link, .ready-check-status-text .ready-check-status-details, lol-uikit-content-block.lol-patcher-client-patch-modal-body p, .lol-patcher-error-modal ul, .update-available-tooltip .info, #patcher-progress-tooltip .info, .loading-tab .loading-content .loading-text { font-family: var(--font-body); } .currency-be-component, .currency-rp, .main-navigation-menu-item .menu-item-small-text, .navigation-status-ticker-content, .navigation-status-ticker-content-no-link, .ticker-incident-link, .ticker-incident-header, .ready-check-button-accept, .ready-check-status-text .ready-check-status-title, .ready-check-status-text .ready-check-status-title:lang(ja-jp), .ready-check-status-text .ready-check-status-details, lol-uikit-content-block.lol-patcher-client-patch-modal-body p, .animated-progress-bar.main .progress-percent-text, .lol-patcher-error-modal ul, .update-available-tooltip h1, .update-available-tooltip .info, .basic-button .play-button-container .play-button-content .play-button-text, .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl), #patcher-progress-tooltip h1, #patcher-progress-tooltip .info, .loading-tab .loading-content .loading-text, .tft-season-start .tft-season-start-title, .tft-season-start .tft-season-start-body { -webkit-user-select: none; } .currency-be-component, .currency-rp, .main-navigation-menu-item .menu-item-small-text, .navigation-status-ticker-content, .navigation-status-ticker-content-no-link, .ticker-incident-link, .ticker-incident-header, .ready-check-button-accept, .ready-check-status-text .ready-check-status-title, .ready-check-status-text .ready-check-status-title:lang(ja-jp), .ready-check-status-text .ready-check-status-details, lol-uikit-content-block.lol-patcher-client-patch-modal-body p, .animated-progress-bar.main .progress-percent-text, .lol-patcher-error-modal ul, .update-available-tooltip h1, .update-available-tooltip .info, .basic-button .play-button-container .play-button-content .play-button-text, .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl), #patcher-progress-tooltip h1, #patcher-progress-tooltip .info, .loading-tab .loading-content .loading-text, .tft-season-start .tft-season-start-title, .tft-season-start .tft-season-start-body { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .currency-be-component, .currency-rp, .ticker-incident-header, .ready-check-button-accept, .ready-check-status-text .ready-check-status-title, .ready-check-status-text .ready-check-status-title:lang(ja-jp), .animated-progress-bar.main .progress-percent-text, .update-available-tooltip h1, .basic-button .play-button-container .play-button-content .play-button-text, .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl), #patcher-progress-tooltip h1, .tft-season-start .tft-season-start-title { text-transform: uppercase; } .currency-be-component:lang(ko-kr), .currency-rp:lang(ko-kr), .ticker-incident-header:lang(ko-kr), .ready-check-button-accept:lang(ko-kr), .ready-check-status-text .ready-check-status-title:lang(ko-kr), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(ko-kr), .animated-progress-bar.main .progress-percent-text:lang(ko-kr), .update-available-tooltip h1:lang(ko-kr), .basic-button .play-button-container .play-button-content .play-button-text:lang(ko-kr), .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(ko-kr), #patcher-progress-tooltip h1:lang(ko-kr), .tft-season-start .tft-season-start-title:lang(ko-kr), .currency-be-component:lang(ja-jp), .currency-rp:lang(ja-jp), .ticker-incident-header:lang(ja-jp), .ready-check-button-accept:lang(ja-jp), .ready-check-status-text .ready-check-status-title:lang(ja-jp), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(ja-jp), .animated-progress-bar.main .progress-percent-text:lang(ja-jp), .update-available-tooltip h1:lang(ja-jp), .basic-button .play-button-container .play-button-content .play-button-text:lang(ja-jp), .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(ja-jp), #patcher-progress-tooltip h1:lang(ja-jp), .tft-season-start .tft-season-start-title:lang(ja-jp), .currency-be-component:lang(tr-tr), .currency-rp:lang(tr-tr), .ticker-incident-header:lang(tr-tr), .ready-check-button-accept:lang(tr-tr), .ready-check-status-text .ready-check-status-title:lang(tr-tr), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(tr-tr), .animated-progress-bar.main .progress-percent-text:lang(tr-tr), .update-available-tooltip h1:lang(tr-tr), .basic-button .play-button-container .play-button-content .play-button-text:lang(tr-tr), .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(tr-tr), #patcher-progress-tooltip h1:lang(tr-tr), .tft-season-start .tft-season-start-title:lang(tr-tr), .currency-be-component:lang(el-gr), .currency-rp:lang(el-gr), .ticker-incident-header:lang(el-gr), .ready-check-button-accept:lang(el-gr), .ready-check-status-text .ready-check-status-title:lang(el-gr), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(el-gr), .animated-progress-bar.main .progress-percent-text:lang(el-gr), .update-available-tooltip h1:lang(el-gr), .basic-button .play-button-container .play-button-content .play-button-text:lang(el-gr), .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(el-gr), #patcher-progress-tooltip h1:lang(el-gr), .tft-season-start .tft-season-start-title:lang(el-gr), .currency-be-component:lang(th-th), .currency-rp:lang(th-th), .ticker-incident-header:lang(th-th), .ready-check-button-accept:lang(th-th), .ready-check-status-text .ready-check-status-title:lang(th-th), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(th-th), .animated-progress-bar.main .progress-percent-text:lang(th-th), .update-available-tooltip h1:lang(th-th), .basic-button .play-button-container .play-button-content .play-button-text:lang(th-th), .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(th-th), #patcher-progress-tooltip h1:lang(th-th), .tft-season-start .tft-season-start-title:lang(th-th), .currency-be-component:lang(zh-tw), .currency-rp:lang(zh-tw), .ticker-incident-header:lang(zh-tw), .ready-check-button-accept:lang(zh-tw), .ready-check-status-text .ready-check-status-title:lang(zh-tw), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(zh-tw), .animated-progress-bar.main .progress-percent-text:lang(zh-tw), .update-available-tooltip h1:lang(zh-tw), .basic-button .play-button-container .play-button-content .play-button-text:lang(zh-tw), .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(zh-tw), #patcher-progress-tooltip h1:lang(zh-tw), .tft-season-start .tft-season-start-title:lang(zh-tw) { text-transform: none; } .ready-check-status-text .ready-check-status-title, .tft-season-start .tft-season-start-title { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .ready-check-status-text .ready-check-status-title:lang(ar-ae), .tft-season-start .tft-season-start-title:lang(ar-ae) { letter-spacing: 0; } .ready-check-status-text .ready-check-status-title:lang(ja-jp) { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(ar-ae) { letter-spacing: 0; } .ready-check-button-accept, .update-available-tooltip h1, #patcher-progress-tooltip h1 { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .ready-check-button-accept:lang(ar-ae), .update-available-tooltip h1:lang(ar-ae), #patcher-progress-tooltip h1:lang(ar-ae) { letter-spacing: 0; } .ticker-incident-header, .animated-progress-bar.main .progress-percent-text, .basic-button .play-button-container .play-button-content .play-button-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .ticker-incident-header:lang(ar-ae), .animated-progress-bar.main .progress-percent-text:lang(ar-ae), .basic-button .play-button-container .play-button-content .play-button-text:lang(ar-ae) { letter-spacing: 0; } .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl) { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(ja-jp) { font-size: 13px; } .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(ar-ae) { letter-spacing: 0; } .tft-season-start .tft-season-start-body { color: #a09b8c; font-size: 16px; font-weight: normal; line-height: 24px; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .tft-season-start .tft-season-start-body:lang(ar-ae) { letter-spacing: 0; } lol-uikit-content-block.lol-patcher-client-patch-modal-body p, .loading-tab .loading-content .loading-text { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } lol-uikit-content-block.lol-patcher-client-patch-modal-body p:lang(ar-ae), .loading-tab .loading-content .loading-text:lang(ar-ae) { letter-spacing: 0; } .main-navigation-menu-item .menu-item-small-text, .navigation-status-ticker-content, .navigation-status-ticker-content-no-link, .lol-patcher-error-modal ul, .update-available-tooltip .info, #patcher-progress-tooltip .info { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .main-navigation-menu-item .menu-item-small-text:lang(ja-jp), .navigation-status-ticker-content:lang(ja-jp), .navigation-status-ticker-content-no-link:lang(ja-jp), .lol-patcher-error-modal ul:lang(ja-jp), .update-available-tooltip .info:lang(ja-jp), #patcher-progress-tooltip .info:lang(ja-jp) { font-size: 13px; } .main-navigation-menu-item .menu-item-small-text:lang(ar-ae), .navigation-status-ticker-content:lang(ar-ae), .navigation-status-ticker-content-no-link:lang(ar-ae), .lol-patcher-error-modal ul:lang(ar-ae), .update-available-tooltip .info:lang(ar-ae), #patcher-progress-tooltip .info:lang(ar-ae) { letter-spacing: 0; } .currency-be-component, .currency-rp { font-size: 14px; font-weight: 700; letter-spacing: 0.075em; color: #cdbe91; } .currency-be-component.active, .currency-rp.active { position: relative; color: #f0e6d2; } .currency-be-component:lang(ar-ae), .currency-rp:lang(ar-ae) { letter-spacing: 0; } .ready-check-status-text .ready-check-status-details { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .ready-check-status-text .ready-check-status-details:lang(ja-jp) { font-size: 13px; } .ready-check-status-text .ready-check-status-details:lang(ar-ae) { letter-spacing: 0; } .ticker-incident-link { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .ticker-incident-link:lang(ja-jp) { font-size: 13px; } .ticker-incident-link:lang(ar-ae) { letter-spacing: 0; } .ticker-incident-link { color: #0596aa; text-decoration: none; } .ticker-incident-link:hover, .ticker-incident-link.hover { color: #cdfafa; } .ticker-incident-link:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-navigation/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .ticker-incident-link:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .ticker-incident-link:hover:after { background-color: #cdfafa; } .currency-be-component { display: flex; color: #f0e6d2; min-width: 5px; pointer-events: auto; align-items: center; } .currency-be-icon-container { display: inline-block; position: relative; height: 17px; width: 17px; margin: 0 4px 0 3px; } .currency-be-icon-container video { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .currency-be-icon-static { height: 100%; width: 100%; background-image: url("/fe/lol-static-assets/images/icon-be-150.png"); background-repeat: no-repeat; background-position: -3px center; background-size: contain; } .currency-rp { color: #f0e6d2; background-repeat: no-repeat; background-position: 0% 50%; background-size: contain; padding-left: 24px; min-width: 5px; pointer-events: auto; } .currency-rp { background-image: url("/fe/lol-static-assets/images/icon-rp-32.png"); background-position: 1px center; background-size: 15px 15px; } .currency-container-stacked { margin-left: 23px; margin-right: 9px; } .currency-container-stacked .currency-rp { margin-bottom: 5px; } .currency-container-tooltip p { white-space: nowrap; } .main-navigation-menu-item { min-width: 40px; height: 100%; pointer-events: auto; position: relative; --disabled-color: rgba(240,230,210,0.5); } .main-navigation-menu-item:lang(zh-tw), .main-navigation-menu-item:lang(zh-cn), .main-navigation-menu-item:lang(zh-my) { border: 0; border-image-source: linear-gradient(to bottom, transparent 15%, rgba(205,190,145,0.7) 50%, transparent 85%); border-right: 2px solid transparent; border-image-slice: 2; border-image-repeat: stretch; min-width: 68px; } .main-navigation-menu-item:last-of-type { border-right-width: 0; } .main-navigation-menu-item[disabled] .menu-item-icon { background: rgba(240,230,210,0.5); } .main-navigation-menu-item[active] { pointer-events: none; } .main-navigation-menu-item[active] .menu-item-icon { background: #f0e6d2; } .main-navigation-menu-item:hover .menu-item-icon { background: #f0e6d2; } .main-navigation-menu-item .menu-item-icon-wrapper { display: flex; justify-content: center; } .main-navigation-menu-item .navigation-icon-click-video { display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; } .main-navigation-menu-item .menu-item-small-text { margin-top: 5px; } .main-navigation-menu-item .navigation-cta-wrapper { position: absolute; pointer-events: none; } .main-navigation-menu-item .navigation-cta-wrapper.navigation-icon-cta { top: 0; left: 0; right: 0; bottom: 0; } .main-navigation-menu-item .navigation-cta-wrapper.navigation-icon-cta .navigation-cta-intro, .main-navigation-menu-item .navigation-cta-wrapper.navigation-icon-cta .navigation-cta-loop { display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .main-navigation-menu-item .navigation-cta-wrapper.navigation-pip-cta { right: 7px; top: 25px; } .main-navigation-menu-item .navigation-cta-wrapper.navigation-pip-cta:lang(zh-tw), .main-navigation-menu-item .navigation-cta-wrapper.navigation-pip-cta:lang(zh-cn), .main-navigation-menu-item .navigation-cta-wrapper.navigation-pip-cta:lang(zh-my) { right: 10px; } .main-navigation-menu-item .menu-item-icon { background-color: #cdbe91; width: 24px; height: 24px; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .main-navigation-menu-item .menu-item-icon:hover { background-color: #f0e6d2; } .main-navigation-menu-item .menu-item-icon:active { background-color: #785a28; } .main-navigation-menu-item .menu-item-icon-placeholder { height: 24px; width: 24px; } .main-navigation-menu-item.text-and-icon .navigation-icon-click-video { top: 35%; } .main-navigation-menu-item.text-and-icon .navigation-cta-wrapper.navigation-icon-cta .navigation-cta-intro, .main-navigation-menu-item.text-and-icon .navigation-cta-wrapper.navigation-icon-cta .navigation-cta-loop { top: 35%; } .main-navigation-menu-item.text-and-icon .navigation-cta-wrapper.navigation-pip-cta { top: 15px; right: 10px; } .main-navigation-menu-item.text-and-icon .navigation-cta-wrapper.navigation-pip-cta:lang(zh-tw), .main-navigation-menu-item.text-and-icon .navigation-cta-wrapper.navigation-pip-cta:lang(zh-cn), .main-navigation-menu-item.text-and-icon .navigation-cta-wrapper.navigation-pip-cta:lang(zh-my) { right: 15px; } @-moz-keyframes glowAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes glowAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes glowAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes glowAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } .right-nav-menu .main-navigation-menu-item:lang(zh-tw):last-of-type, .right-nav-menu .main-navigation-menu-item:lang(zh-cn):last-of-type, .right-nav-menu .main-navigation-menu-item:lang(zh-my):last-of-type { margin-right: 0px; } .right-nav-menu .main-navigation-menu-item:last-of-type { margin-right: 10px; } .rcp-fe-lol-navigation.main-nav-bar { display: flex; position: relative; width: 100%; } .wallet-and-badges { display: flex; align-items: center; margin-right: 26px; margin-bottom: 1px; } .left-nav-menu, .right-nav-menu { display: flex; align-items: center; height: 79px; } .right-nav-vertical-rule { width: 1px; height: 57px; background: linear-gradient(to top, rgba(205,190,145,0) 0%, #cdbe91 50%, rgba(205,190,145,0) 100%); } .navigation-root-component, .navigation-root-component-ticker-only { display: flex; padding-left: 215px; padding-right: 223px; height: 100%; width: 840px; border-bottom: thin solid rgba(240,230,210,0.25); } .navigation-root-component-ticker-only { border-bottom: none; } .navigation-root-component-ticker-only:before { content: none; } .navigation-status-ticker { position: relative; display: none; align-items: center; outline: none; } .navigation-status-ticker .ticker-button { background-image: url("/fe/lol-navigation/button-ticker-blue.png"); } .navigation-status-ticker .ticker-button:hover { background-image: url("/fe/lol-navigation/button-ticker-blue-hover.png"); } .navigation-status-ticker .ticker-button:active { background-image: url("/fe/lol-navigation/button-ticker-blue-active.png"); } .navigation-status-ticker.ticker-flyout-visible .ticker-button { background-image: url("/fe/lol-navigation/button-ticker-blue-active.png"); } .navigation-status-ticker.has-incidents { display: flex; } .navigation-status-ticker.status-offline .ticker-button { background-image: url("/fe/lol-navigation/button-ticker-red.png"); } .navigation-status-ticker.status-offline .ticker-button:hover { background-image: url("/fe/lol-navigation/button-ticker-red-hover.png"); } .navigation-status-ticker.status-offline .ticker-button:active { background-image: url("/fe/lol-navigation/button-ticker-red-active.png"); } .navigation-status-ticker.status-offline.ticker-flyout-visible .ticker-button { background-image: url("/fe/lol-navigation/button-ticker-red-active.png"); } .navigation-status-ticker.status-degraded .ticker-button { background-image: url("/fe/lol-navigation/button-ticker-yellow.png"); } .navigation-status-ticker.status-degraded .ticker-button:hover { background-image: url("/fe/lol-navigation/button-ticker-yellow-hover.png"); } .navigation-status-ticker.status-degraded .ticker-button:active { background-image: url("/fe/lol-navigation/button-ticker-yellow-active.png"); } .navigation-status-ticker.status-degraded.ticker-flyout-visible .ticker-button { background-image: url("/fe/lol-navigation/button-ticker-yellow-active.png"); } .ticker-button { height: 32px; width: 32px; margin-left: -10px; margin-right: 15px; background-size: contain; } .ticker-toggle { height: 32px; width: 32px; cursor: pointer; pointer-events: auto; } .navigation-status-ticker-content, .navigation-status-ticker-content-no-link { direction: ltr; width: 300px; pointer-events: auto; padding: 18px; box-sizing: border-box; } .navigation-status-ticker-content-no-link .status-ticker-incident:last-of-type { padding: 0; } .status-ticker-list { width: 100%; box-sizing: border-box; cursor: default; } .status-ticker-links { display: block; text-align: right; margin-bottom: -4px; } .status-ticker-incident { padding: 15px 0; border-top: thin solid #3c3c41; } .status-ticker-incident:first-of-type { border-top: none; padding-top: 0; margin-top: -4px; } .status-ticker-incident:last-of-type { margin-bottom: -4px; } .ticker-incident-radio { display: none; } .ticker-incident-radio:checked + .ticker-incident-content .ticker-incident-body { display: block; } .ticker-incident-radio:checked + .ticker-incident-content .ticker-incident-link { display: inline; } .ticker-incident-content { display: block; padding: 10px 0; } .ticker-incident-content .ticker-incident-body { display: none; } .ticker-incident-content .ticker-incident-link { display: none; } .ticker-incident-header { width: calc(100% - 15px); padding: 0 15px 0 0 ; color: #f0e6d2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0 0 10px; } .ready-check-button-accept { background-image: url(/fe/lol-navigation/button-accept-default.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 212px; height: 70px; box-sizing: border-box; padding-top: 20px; text-align: center; color: #a3c7c7; cursor: pointer; } .ready-check-button-accept:hover:not(.ready-check-button-accept-disabled) { background-image: url("/fe/lol-static-assets/images/button-accept-hover.png"); color: #cdfafa; } .ready-check-button-accept-disabled { cursor: default; background-image: url("/fe/lol-static-assets/images/button-accept-disabled.png"); color: #5c5b57; } .ready-check-button-decline { width: 120px; margin-top: 8px; transition: 100ms opacity; } .ready-check-map-icon { position: relative; width: 92px; height: 92px; } .ready-check-map-icon .ready-check-map-icon-image { width: 100%; } .ready-check-map-background { -webkit-mask-image: url(/fe/lol-navigation/default-background.png); -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; width: 410px; height: 410px; position: absolute; left: calc(50% - 205px); top: calc(50% - 205px); } .ready-check-map-background-declined { -webkit-filter: grayscale(100%); } .ready-check-root-element { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; color: #f0e6d2; width: 530px; height: 530px; -webkit-user-select: none; } .ready-check-root-element .ready-check-visible-state-hack { display: flex; flex-direction: column; justify-content: center; align-items: center; direction: ltr; } .ready-check-buttons-element { position: absolute; display: flex; width: 300px; flex-direction: column; align-items: center; left: calc(50% - 150px); bottom: -11px; } .ready-check-buttons-element .ready-check-decline-button { width: 120px; margin-top: 8px; transition: 100ms opacity; } .ready-check-frame-element { background-image: url("/fe/lol-static-assets/images/ready-check-main-frame.png"); background-repeat: no-repeat; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .ready-check-status-text { position: relative; width: 300px; height: 80px; direction: ltr; } .ready-check-status-text .ready-check-status-title { margin: 10px auto 0 auto; text-align: center; } .ready-check-status-text .ready-check-status-details { color: #a09b8c; text-align: center; margin-top: 5px; } .ready-check-status-text .ready-check-bullet { display: inline-block; margin: 0 0.3em; } .ready-check-timer { position: absolute; top: 2px; left: 0; bottom: 0; right: 0; display: flex; justify-content: center; align-items: center; } .ready-check-timer-countdown, .ready-check-timer-accepted-intro, .ready-check-timer-accepted-idle, .ready-check-timer-declined { display: flex; } .update-available-proxy { position: absolute; top: 11px; left: 29px; width: 141px; height: 76px; padding: 7px 0; pointer-events: none; } .patching-progress-bar { width: 174px; height: 122px; position: absolute; top: -22px; left: 16px; pointer-events: none; } .patching-progress-bar.disabled { display: none; } .patching-progress-bar .modal-holder { pointer-events: auto; } .patcher-bar-proxy { position: absolute; z-index: 1; width: 100%; height: 55px; top: 33px; left: 0; pointer-events: auto; } lol-uikit-content-block.lol-patcher-client-patch-modal-body p { display: flex; flex-direction: column; align-items: center; justify-content: center; } .animated-progress-bar { position: relative; width: 100%; height: 100%; } .animated-progress-bar.patching, .animated-progress-bar.repairing { display: block; } .animated-progress-bar.outro { -webkit-animation: fadeout 800ms forwards; -webkit-animation-delay: 1200ms; } .animated-progress-bar.main .global-mask { display: inherit; position: absolute; width: 100%; height: 100%; padding: inherit; } .animated-progress-bar.main .global-mask.active { -webkit-mask-image: url("/fe/lol-static-assets/images/mask-progress-bar-overlay.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center right; } .animated-progress-bar.main .progress-bar-wrapper { position: relative; width: 100%; height: 100%; padding-left: 48px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-animation: fadein 300ms forwards; } .animated-progress-bar.main .progress-bar-wrapper.outro { -webkit-animation: fadeout 300ms forwards; } .animated-progress-bar.main .progress-bar-wrapper .progress-bar-container { position: relative; display: flex; flex-flow: row nowrap; width: 100%; height: 100%; } .animated-progress-bar.main .progress-bar-wrapper .endpoint-container { position: relative; width: 4px; height: 100%; } .animated-progress-bar.main .progress-bar-wrapper .endpoint-container .video-wrapper { position: absolute; width: 174px; height: 122px; top: 0; left: 0; transform: translateX(-124px); } .animated-progress-bar.main .progress-bar-mask { position: relative; width: 0; height: 100%; border-right: 10px solid transparent; padding: 31px 0; box-sizing: border-box; transition: 300ms all; -webkit-mask-image: linear-gradient(to right, #000, #000); } .animated-progress-bar.main .progress-bar-mask .video-wrapper { position: relative; width: 100%; height: 100%; } .animated-progress-bar.main .progress-percent-text { display: flex; flex-direction: column; justify-content: center; position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 31px 0; padding-left: inherit; box-sizing: border-box; text-align: center; text-shadow: 1px 1px 2px #000; line-height: 16px; direction: ltr; } .animated-progress-bar.main .progress-percent-text .phase { font-size: 12px; } .animated-progress-bar.main .video-state { position: absolute; top: 0; left: 0; object-fit: cover; overflow: hidden; box-sizing: border-box; } .animated-progress-bar.main .video-state.main { width: 122px; padding: 14px 0; } .animated-progress-bar.main .video-state.main .loop { top: 14px; } .animated-progress-bar.main .video-state.border { width: 148px; height: 60px; top: -1px; left: -11px; } .animated-progress-bar.main .video-state.endpoint { transition: 300ms all; top: -1px; } .animated-progress-bar.main .video-state.endpoint .intro { width: 92px; height: 122px; left: 78px; } .animated-progress-bar.main .video-state.endpoint .loop { width: 154px; height: 122px; } .animated-progress-bar.main .video-state.frame { padding: 41px 0; padding-left: 12px; } .animated-progress-bar.main .video-state.logo { padding: 33px 0; } .animated-progress-bar.main .video-state.outro { width: 178px; height: 100%; padding-left: 36px; box-sizing: content-box; } .animated-progress-bar.main .video-state.outro .outro, .animated-progress-bar.main .video-state.outro .intro { width: inherit; height: 108px; margin: 7px 0; } .animated-progress-bar.main .video-state.disabled { display: none; } @-webkit-keyframes fadein { from { filter: opacity(0); } to { filter: opacity(1); } } @-webkit-keyframes fadeout { from { filter: opacity(1); } to { filter: opacity(0); display: none !important; } } @-webkit-keyframes indeterminate { 100% { background-position: -200%; } } .patcher-tooltip-holder, .lol-patcher-modal-holder { display: none; } #rcp-fe-lol-patcher-bootstrap { z-index: 10000; display: flex; width: 500px; height: 274px; overflow: hidden; border: 2px solid #1e282d; top: 0; left: 0; box-sizing: border-box; color: #a09b8c; } .lol-patcher-error-modal { direction: ltr; } .lol-patcher-error-modal h6 { text-align: left; margin: 20px 0; } .lol-patcher-error-modal ul { text-align: left; margin: 20px 0; padding-left: 20px; } .long-progress-bar { width: 804px; height: 122px; top: -20px; left: 240px; } .long-progress-bar .animated-progress-bar .global-mask { display: inherit; position: absolute; width: 100%; height: 100%; padding: inherit; } .long-progress-bar .animated-progress-bar .global-mask.active { -webkit-mask-image: url("/fe/lol-static-assets/images/long-mask-progress-bar-overlay.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center right; padding-right: 25px; } .long-progress-bar .animated-progress-bar .frame { position: absolute; top: 40px; left: 12px; } .long-progress-bar .animated-progress-bar .progress-bar-wrapper .endpoint-container .video-wrapper { position: absolute; width: 272px; height: 272px; top: 7px; left: -51px; transform: translateX(-124px); } .long-progress-bar .animated-progress-bar .progress-percent-text { flex-direction: row; justify-content: center; align-items: center; padding: 0; } .long-progress-bar .animated-progress-bar .progress-percent-text span:last-of-type { padding: 0 0 0 5px; } .long-progress-bar .animated-progress-bar .video-state.endpoint { overflow: visible; } .long-progress-bar .animated-progress-bar .video-state.main { width: 754px; } .long-progress-bar .animated-progress-bar .video-state.main .loop { top: 12px; } .long-progress-bar .animated-progress-bar .video-state.border { width: 776px; height: 66px; left: -11px; top: -2px; } .long-progress-bar .animated-progress-bar .video-state.endpoint .loop { width: 272px; height: 120px; margin: 0; } .video-state { width: 100%; height: 100%; } .video-state .intro, .video-state .loop, .video-state .outro { position: absolute; } .video-state .loop, .video-state .outro { -webkit-animation: fadein 100ms forwards; } .video-state .hanging { -webkit-filter: grayscale(); } .video-state.logo .loop { top: 33px; } .video-state.main .loop { top: 17px; } .league-logo { cursor: pointer; } @-webkit-keyframes fadein { from { filter: opacity(0); } to { filter: opacity(1); } } .update-available-tooltip { text-align: center; user-select: none; direction: ltr; } .update-available-tooltip h1 { color: #f0e6d2; margin: 0px; } .update-available-tooltip hr { border-color: #a09b8c; color: #a09b8c; filter: opacity(50%); border-bottom: 0px; margin: 9px 0px 12px; } .update-available-tooltip .info { color: #a09b8c; font-size: 11px; text-align: initial; } .basic-button { position: absolute; top: 10px; left: 29px; width: 162px; height: 58px; padding: 7px 0; box-sizing: border-box; transition: opacity 300ms ease-out; cursor: default; pointer-events: none; } .basic-button .play-button-frame { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("/fe/lol-static-assets/images/play-button-frame-default.png"); transition: 400ms background ease; } .basic-button .play-button-video, .basic-button .play-button-hover-magic { position: absolute; top: -7px; left: 20px; } .basic-button .large-video { position: absolute; top: -25px; padding-left: 2px; } .basic-button .play-button-container { position: relative; width: 100%; height: 100%; top: 0; left: 0; background-repeat: no-repeat; background-position: 20px center; transition: 400ms 200ms background ease; } .basic-button .play-button-container .play-button-content { position: relative; width: calc(100% - 34px); height: 100%; left: 36px; padding: 6px; box-sizing: border-box; pointer-events: all; cursor: pointer; } .basic-button .play-button-container .play-button-content .play-button-text { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; text-align: center; pointer-events: none; } .basic-button .play-button-container .play-button-content .play-button-text.clicked { color: #3c3c41; } .basic-button .league-logo { position: absolute; top: -6px; left: -13px; cursor: default; } .basic-button.play .play-button-container .play-button-content .play-button-text { width: calc(100% - 16px); } .basic-button:disabled .play-button-content, .basic-button.disabled .play-button-content { cursor: default; } .basic-button:disabled .play-button-container .play-button-content .play-button-text, .basic-button.disabled .play-button-container .play-button-content .play-button-text { color: #3c3c41; } .basic-button.hidden { filter: opacity(0); } .basic-button.hidden .play-button-content { cursor: default; pointer-events: none; } .basic-button.repairing .play-button-container .play-button-text { background-image: url("/fe/lol-static-assets/images/icon-repair.png"); background-size: 36px 36px; background-position: 35px center; background-repeat: no-repeat; } #patcher-progress-tooltip { text-align: center; user-select: none; } #patcher-progress-tooltip h1 { color: #f0e6d2; margin: 0px; } #patcher-progress-tooltip hr { border-color: #a09b8c; color: #a09b8c; filter: opacity(50%); border-bottom: 0px; margin: 9px 0px 12px; } #patcher-progress-tooltip .info { color: #a09b8c; font-size: 11px; text-align: initial; } #patcher-progress-tooltip .filename { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; } .tooltip-holder #patcher-progress-tooltip { display: none; } .shutdown-notification-content p { white-space: pre-line; } .navigation-badge-container { display: flex; align-items: center; } .loyalty-navbar-badge { display: flex; align-items: center; justify-content: flex-end; margin: 0 1px 0 15px; width: 34px; height: 61px; pointer-events: auto; } .loyalty-navbar-badge-icon { width: 33px; height: 33px; background: url("/fe/lol-static-assets/images/loyalty-badge-PCBRewards.png") center center no-repeat; background-size: cover; } .loyalty-tooltip-unlocked-wrapper { display: flex; } .loyalty-tooltip-unlocked-logo { background: url("/fe/lol-static-assets/images/loyalty-icon-league-unlock.png") center center no-repeat; background-size: cover; text-align: center; height: 50px; width: 50px; margin: 7px 7px 0 0 ; } .loyalty-tooltip-unlocked-desc { text-align: left ; height: 100%; } .loyalty-tooltip-lolcafe-wrapper { display: flex; align-items: center; } .loyalty-tooltip-lolcafe-logo { background: url("/fe/lol-static-assets/images/loyalty-icon-lolcafe2.png") center center no-repeat; background-size: cover; width: 77px; height: 92px; margin: 5px 10px 5px 0 ; } .loyalty-tooltip-lolcafe-desc { text-align: left ; } .screen-root[data-screen-name='lol-kr-rating-screen'] { z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; } .screen-root[data-screen-name='lol-kr-rating-screen'] lol-uikit-full-page-backdrop { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; bottom: 0; right: 0; left: 0; background: #000; -webkit-animation: ratingScreenFadeOut 6000ms forwards; animation: ratingScreenFadeOut 6000ms forwards; } .screen-root[data-screen-name='lol-kr-rating-screen'] lol-uikit-dialog-frame { -webkit-animation: ratingScreenFadeInOut 5400ms forwards; animation: ratingScreenFadeInOut 5400ms forwards; } .lol-kr-rating-screen { max-width: 1160px; max-height: 640px; } lol-uikit-content-block.lol-kr-playtime-reminder-toast-content[type=notification] { width: 300px; } @-moz-keyframes ratingScreenFadeInOut { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } } @-webkit-keyframes ratingScreenFadeInOut { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } } @-o-keyframes ratingScreenFadeInOut { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } } @keyframes ratingScreenFadeInOut { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } } @-moz-keyframes ratingScreenFadeOut { 0%, 85% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes ratingScreenFadeOut { 0%, 85% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes ratingScreenFadeOut { 0%, 85% { opacity: 1; } 100% { opacity: 0; } } @keyframes ratingScreenFadeOut { 0%, 85% { opacity: 1; } 100% { opacity: 0; } } .loading-tab { position: relative; z-index: 0; height: 637px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .loading-tab .loading-content { position: relative; margin-top: -80px; } .loading-tab .loading-content .loading-animation { pointer-events: none; } .loading-tab .loading-content .loading-text { text-align: center; position: absolute; top: 212px; width: 100%; } .loading-tab::after { content: ''; display: block; position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; background-image: url("/fe/lol-static-assets/images/background.png"); background-repeat: no-repeat; background-position-y: -80px; opacity: 0.95; } .tft-season-start .tft-season-start-title, .tft-season-start .tft-season-start-body { font-family: var(--font-display); } .rcp-fe-lol-uikit-full-page-modal-iframe { position: absolute; display: flex; width: 100%; height: 100%; -webkit-user-select: none; } div[data-screen-name="rcp-fe-lol-home"] { position: relative; overflow: hidden; width: 100%; height: 100%; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home { width: 100%; height: 100%; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home .root-home { margin-top: 20vh; font-size: 100px; color: #fff; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home iframe { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-user-select: none; border: none; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home .rcp-fe-lol-home-sub-nav lol-uikit-navigation-item:only-child { display: none; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home .wrapper { width: 100%; height: 100%; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home-content { position: relative; top: 0; left: 0; color: #fff; background-color: #000; border: 0; margin: 0; padding: 0; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home-sub-nav { -webkit-user-select: none; position: absolute; top: 79px; left: 35px; border: 0; margin: 0; padding: 0; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home-sub-nav lol-uikit-navigation-item { direction: ltr; margin-top: 9px; } div[data-screen-name="rcp-fe-lol-home"] #rcp-fe-lol-home-error { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 50%; align-items: center; transform: translateY(50%); } div[data-screen-name="rcp-fe-lol-home"] #rcp-fe-lol-home-error .rcp-fe-lol-home-error-group { width: 300px; margin: 0 auto; } div[data-screen-name="rcp-fe-lol-home"] #rcp-fe-lol-home-error .rcp-fe-lol-home-error-group .rcp-fe-lol-home-error-wrench { width: 76px; height: 76px; margin: 0 auto -4px; background-size: contain; background-image: url("/fe/lol-static-assets/images/icon-repair.png"); background-repeat: no-repeat; } div[data-screen-name="rcp-fe-lol-home"] #rcp-fe-lol-home-error .rcp-fe-lol-home-error-group .rcp-fe-lol-home-error-content { direction: ltr; text-align: center; } div[data-screen-name="rcp-fe-lol-home"] #rcp-fe-lol-home-error .rcp-fe-lol-home-error-group .rcp-fe-lol-home-error-btn-container { justify-content: center; display: flex; margin-top: 15px; } div[data-screen-name="rcp-fe-lol-home"] #rcp-fe-lol-home-error .rcp-fe-lol-home-error-group .rcp-fe-lol-home-error-retry-spinner { display: none; width: 32px; height: 32px; animation: spin 1s linear 0s infinite; background-size: contain; background-image: url("/fe/lol-static-assets/images/spinner.png"); background-repeat: no-repeat; } @-moz-keyframes spin { 100% { transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { transform: rotate(360deg); } } @-o-keyframes spin { 100% { transform: rotate(360deg); } } @keyframes spin { 100% { transform: rotate(360deg); } } div[data-screen-name="rcp-fe-lol-home"]:not(.active) .rcp-fe-lol-home-loading-spinner { display: none; } .rcp-fe-lol-home-article-loading-spinner, div[data-screen-name="rcp-fe-lol-home"].active .rcp-fe-lol-home-loading-spinner { display: none; visibility: hidden; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: transparent url("/fe/lol-static-assets/images/spinner.png") no-repeat 50% 50%; background-size: contain; } .rcp-fe-lol-home-article-loading-spinner.loading, div[data-screen-name="rcp-fe-lol-home"].active .rcp-fe-lol-home-loading-spinner.loading { display: block; animation: rcp-fe-lol-home-loading-fadein 250ms forwards, rcp-fe-lol-home-loading-spin 4000ms infinite linear; } .rcp-fe-lol-home-article-loading-spinner.loaded, div[data-screen-name="rcp-fe-lol-home"].active .rcp-fe-lol-home-loading-spinner.loaded { display: none; } .precache-iframe { position: absolute; bottom: 0; left: 0; visibility: hidden; width: 1px; height: 1px; pointer-events: none; } @-moz-keyframes rcp-fe-lol-home-loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes rcp-fe-lol-home-loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes rcp-fe-lol-home-loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rcp-fe-lol-home-loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes rcp-fe-lol-home-loading-fadeout { 0% { visibility: visible; opacity: 1; } 99% { visibility: visible; opacity: 0; } 100% { visibility: hidden; opacity: 0; } } @-webkit-keyframes rcp-fe-lol-home-loading-fadeout { 0% { visibility: visible; opacity: 1; } 99% { visibility: visible; opacity: 0; } 100% { visibility: hidden; opacity: 0; } } @-o-keyframes rcp-fe-lol-home-loading-fadeout { 0% { visibility: visible; opacity: 1; } 99% { visibility: visible; opacity: 0; } 100% { visibility: hidden; opacity: 0; } } @keyframes rcp-fe-lol-home-loading-fadeout { 0% { visibility: visible; opacity: 1; } 99% { visibility: visible; opacity: 0; } 100% { visibility: hidden; opacity: 0; } } @-moz-keyframes rcp-fe-lol-home-loading-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @-webkit-keyframes rcp-fe-lol-home-loading-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @-o-keyframes rcp-fe-lol-home-loading-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @keyframes rcp-fe-lol-home-loading-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } .tft-season-start { position: relative; width: 762px; height: 590px; background-image: url(/fe/lol-navigation/tft-season-start.jpg); background-size: 100%; display: flex; justify-content: flex-end; align-content: center; flex-direction: column; text-align: center; } .tft-season-start .tft-season-start-title { position: relative; font-size: 26px; padding-bottom: 32px; padding-top: 40px; background: linear-gradient(rgba(1,10,19,0), #010a13 30% 100%); } .tft-season-start .tft-season-start-title::after { content: ''; position: absolute; background-image: url(/fe/lol-navigation/tft-season-start-divider.png); background-size: 195px 12px; background-position: center; background-repeat: no-repeat; height: 32px; width: 100%; bottom: 0; left: 0; } .tft-season-start .tft-season-start-body { background: #010a13; padding-bottom: 42px; padding-left: 10%; padding-right: 10%; } div[data-screen-name='rcp-fe-lol-navigation-screen'] { height: 79px; width: 1278px; border-top: 2px solid #785a28; box-sizing: border-box; } div[data-screen-name='rcp-fe-lol-navigation-screen'] .rcp-fe-lol-navigation-app.navbar_backdrop:before { content: ''; position: absolute; left: 0; top: 0; width: 1057px; height: 100%; background-color: rgba(1,0,13,0.3); } .rcp-fe-lol-navigation-app { height: 100%; width: 1055px; -webkit-user-select: none; } #rcp-fe-viewport-root #rcp-fe-lol-navigation-app { pointer-events: none; } .mission-tracker-component .mission-tray-header .mission-tray-title { font-family: var(--font-display); } .mission-tracker-component .mission-tray-header .mission-tray-title { -webkit-user-select: none; } .mission-tracker-component .mission-tray-header .mission-tray-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-tracker-component .mission-tray-header .mission-tray-title { text-transform: uppercase; } .mission-tracker-component .mission-tray-header .mission-tray-title:lang(ko-kr), .mission-tracker-component .mission-tray-header .mission-tray-title:lang(ja-jp), .mission-tracker-component .mission-tray-header .mission-tray-title:lang(tr-tr), .mission-tracker-component .mission-tray-header .mission-tray-title:lang(el-gr), .mission-tracker-component .mission-tray-header .mission-tray-title:lang(th-th), .mission-tracker-component .mission-tray-header .mission-tray-title:lang(zh-tw) { text-transform: none; } .mission-tracker-component .mission-tray-header .mission-tray-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .mission-tracker-component .mission-tray-header .mission-tray-title:lang(ar-ae) { letter-spacing: 0; } .mission-tracker-component { direction: ltr; -webkit-user-select: none; width: 408px; height: 532px; cursor: default; display: flex; flex-direction: column; background: #010a13; border: thin solid #1e282d; } .mission-tracker-component .mission-tray-header { display: flex; align-items: center; justify-content: center; width: 408px; height: 42px; flex: 1 1 auto; border-bottom: thin solid #463714; background: #010a13; overflow: hidden; } .mission-tracker-component .mission-tray-header .mission-tray-title { padding: 0 0 0 12px ; width: 100%; align: left; text-align: left ; } .mission-tracker-component .missions-content { display: flex; flex-direction: row; height: 489px; } .mission-tracker-component .missions-content .mission-sidebar { height: 100%; width: 46px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; float: left; border-right: thin solid #463714; } .mission-tracker-component .missions-content .mission-tray { height: 100%; width: 100%; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; background: none; float: right; } .mission-sidebar-component { position: relative; -webkit-user-select: none; width: 46px; height: 489px; } .mission-sidebar-component > lol-uikit-navigation-bar { position: relative; } .mission-sidebar-component > lol-uikit-navigation-bar > .spacer { height: 100%; width: 100%; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button { position: relative; min-height: 40px; height: 40px; width: 100%; padding-left: 0; padding-bottom: 2px; display: flex; align-items: center; justify-content: center; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button::before { left: 0px; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button > .mission-sidebar-unread { position: absolute; top: -5px; right: -8px; width: 8px; height: 8px; border-radius: 50%; background-color: #c89b3c; visibility: hidden; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button > .mission-sidebar-unread.visible { visibility: visible; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button > .mission-sidebar-unread.visible::after { content: ''; position: absolute; top: 1px; right: 1px; width: 6px; height: 6px; border-radius: 50%; background-color: #c89b3c; box-shadow: 0 0 12px 2px #c89b3c; animation: 1s ease-in-out infinite alternate forwards pulseSeriesUnreadButton; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button:hover { background-color: #1e2328; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button:hover > .mission-sidebar-button-icon { -webkit-filter: contrast(800%); } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button.completed { cursor: pointer; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button.completed > .mission-sidebar-button-icon { -webkit-filter: none; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button[active] > .mission-sidebar-button-icon { -webkit-filter: none; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button .mission-sidebar-button-icon { margin: auto; width: 20px; height: 20px; object-fit: contain; display: block; -webkit-filter: opacity(50%); } .mission-sidebar-component .mission-completed-button { position: relative; outline: none; border: none; background: none; cursor: pointer; padding: 0; background-image: url(/fe/lol-navigation/mission_tracker_completed.png); background-size: cover; background-position-y: 0px; min-height: 35px; height: 35px; } .mission-sidebar-component .mission-completed-button:hover { background-position-y: -35px; } .mission-sidebar-component .mission-completed-button:active { background-position-y: -70px; } .mission-sidebar-component .mission-completed-button:disabled, .mission-sidebar-component .mission-completed-button[disabled], .mission-sidebar-component .mission-completed-button.disabled { cursor: default; background-position-y: -35px; } @-moz-keyframes pulseSeriesUnreadButton { 0% { opacity: 0; -webkit-filter: brightness(1); } 15% { opacity: 0; -webkit-filter: brightness(1); } 100% { opacity: 1; -webkit-filter: brightness(2); } } @-webkit-keyframes pulseSeriesUnreadButton { 0% { opacity: 0; -webkit-filter: brightness(1); } 15% { opacity: 0; -webkit-filter: brightness(1); } 100% { opacity: 1; -webkit-filter: brightness(2); } } @-o-keyframes pulseSeriesUnreadButton { 0% { opacity: 0; -webkit-filter: brightness(1); } 15% { opacity: 0; -webkit-filter: brightness(1); } 100% { opacity: 1; -webkit-filter: brightness(2); } } @keyframes pulseSeriesUnreadButton { 0% { opacity: 0; -webkit-filter: brightness(1); } 15% { opacity: 0; -webkit-filter: brightness(1); } 100% { opacity: 1; -webkit-filter: brightness(2); } } .mission-tray-component { position: relative; -webkit-user-select: none; width: 362px; height: 100%; cursor: default; display: flex; align-items: center; justify-content: center; } .mission-tray-component > .mission-poro-background { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url(/fe/lol-navigation/MissionTracker_Poro.png); background-size: 128px 128px; background-position: center; background-repeat: no-repeat; opacity: 0; transition-property: opacity; transform-style: linear; transition-duration: 0.1s; transition-delay: 0.2s; } .mission-tray-component > .mission-poro-background.visible { opacity: 1; } .mission-tray-component .mission-list { flex: 0 0 auto; background-color: transparent; overflow: hidden; position: relative; } .mission-tray-component .mission-list .no-overflow { overflow: hidden; } .mission-tray-component .mission-list { height: 489px; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header, .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-helper-text, .mission-item-component .mission-item .mission-bottom .mission-duration { font-family: var(--font-body); } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header, .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-helper-text, .mission-item-component .mission-item .mission-bottom .mission-duration { -webkit-user-select: none; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header, .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-helper-text, .mission-item-component .mission-item .mission-bottom .mission-duration { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header, .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-helper-text, .mission-item-component .mission-item .mission-bottom .mission-duration { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header:lang(ja-jp), .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-helper-text:lang(ja-jp), .mission-item-component .mission-item .mission-bottom .mission-duration:lang(ja-jp) { font-size: 13px; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header:lang(ar-ae), .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-helper-text:lang(ar-ae), .mission-item-component .mission-item .mission-bottom .mission-duration:lang(ar-ae) { letter-spacing: 0; } .mission-item-component { flex-direction: row; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; width: 362px; position: relative; top: 0; left: 0; border: thin solid transparent; border-bottom: thin solid #1e282d; transition-property: max-height, height, flex, visibility, opacity, top, background; transform-style: cubic-bezier(0, 0, 0, 1), cubic-bezier(0, 0, 0, 1), cubic-bezier(0, 0, 0, 1), linear, linear, cubic-bezier(0, 0, 0, 1); transition-duration: 0.2s, 0.2s, 0.2s, 0s, 0.2s, 0.01s, 0.15s; transition-delay: 0s, 0s, 0.2s, 0s, 0.2s, 0.2s, 0s; display: flex; visibility: visible; opacity: 1; flex: 1 1 auto; max-height: 325px; } .mission-item-component:hover { background: rgba(255,255,255,0.1); } .mission-item-component:hover .mission-item .mission-top .mission-right .mission-text .mission-header .mission-title { color: #f0e6d2; } .mission-item-component.hidden { display: flex; visibility: hidden; opacity: 0; flex: 0.0001 1 auto; max-height: 0; top: -300px; left: 350px; border: 0; transition-property: max-height, height, flex, visibility, opacity, top, left, border; transition-duration: 0.2s, 0.2s, 0.2s, 0s, 0s, 0.2s, 0.2s, 0; transition-delay: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0s, 0.4s; } .mission-item-component .mission-animation { position: relative; display: flex; width: 100%; } .mission-item-component .mission-animation .new-vid-top { position: absolute; top: 0; left: 0; width: 100%; } .mission-item-component .mission-animation .new-vid-bottom { position: absolute; bottom: -4px; left: 0; width: 100%; } .mission-item-component .mission-animation video { object-fit: fill; width: 100%; } .mission-item-component .mission-item { direction: ltr; position: relative; visibility: visible; display: flex; align-items: initial; justify-content: initial; flex-direction: column; width: 100%; flex: 1 1 auto; margin: 12px 22px 9px 11px ; background-color: transparent; } .mission-item-component .mission-item.overlay:after { content: ''; display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,4,7,0.3); } .mission-item-component .mission-item .mission-top { display: flex; flex-direction: row; width: 100%; flex: 1 1 auto; min-height: 66px; } .mission-item-component .mission-item .mission-top .mission-icon { position: relative; background-repeat: no-repeat; flex: 0 0 auto; width: 64px; height: 64px; border-style: solid; border-width: 1px; border-color: #3c3c41; background-position: center; box-shadow: inset 0 0 0 1px #000; background-size: 64px 64px; box-sizing: border-box; } .mission-item-component .mission-item .mission-top .mission-icon.mission-icon-fade:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,4,7,0.7); } .mission-item-component .mission-item .mission-top .mission-icon.mission-icon-loyalty { border-width: 2px; border-image: linear-gradient(to top, #785a28, #a98130) 1 round; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.5); } .mission-item-component .mission-item .mission-top .mission-icon .mission-expired-icon { background-repeat: no-repeat; flex: 0 0 auto; width: 64px; height: 64px; background: url(/fe/lol-navigation/Xmark.png); background-size: 64px 64px; background-position: center; } .mission-item-component .mission-item .mission-top .mission-icon .mission-completed-icon { background-repeat: no-repeat; width: 64px; height: 64px; position: relative; background: url(/fe/lol-navigation/Checkmark.png); background-size: 64px 64px; background-position: center; } .mission-item-component .mission-item .mission-top .mission-icon .mission-completed-icon.mission-completed-icon-mask { animation: checkmark 0.4s cubic-bezier(0, 0, 0, 1) 0s normal 1 forwards; } @-moz-keyframes checkmark { 0% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 19px 31px, 14px 36px); } 50% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 30px 42px, 25px 47px); } 100% { -webkit-clip-path: polygon(14px 36px, 40px 12px, 50px 22px, 25px 47px); } } @-webkit-keyframes checkmark { 0% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 19px 31px, 14px 36px); } 50% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 30px 42px, 25px 47px); } 100% { -webkit-clip-path: polygon(14px 36px, 40px 12px, 50px 22px, 25px 47px); } } @-o-keyframes checkmark { 0% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 19px 31px, 14px 36px); } 50% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 30px 42px, 25px 47px); } 100% { -webkit-clip-path: polygon(14px 36px, 40px 12px, 50px 22px, 25px 47px); } } @keyframes checkmark { 0% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 19px 31px, 14px 36px); } 50% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 30px 42px, 25px 47px); } 100% { -webkit-clip-path: polygon(14px 36px, 40px 12px, 50px 22px, 25px 47px); } } @-moz-keyframes circle { 0% { stroke-dashoffset: 0; } 30%, 50% { stroke-dashoffset: 314; } 80%, 100% { stroke-dashoffset: 0; } } @-webkit-keyframes circle { 0% { stroke-dashoffset: 0; } 30%, 50% { stroke-dashoffset: 314; } 80%, 100% { stroke-dashoffset: 0; } } @-o-keyframes circle { 0% { stroke-dashoffset: 0; } 30%, 50% { stroke-dashoffset: 314; } 80%, 100% { stroke-dashoffset: 0; } } @keyframes circle { 0% { stroke-dashoffset: 0; } 30%, 50% { stroke-dashoffset: 314; } 80%, 100% { stroke-dashoffset: 0; } } .mission-item-component .mission-item .mission-top .mission-icon .mission-completed-icon-border { position: absolute; width: 66px; height: 66px; top: -1px; left: -1px; background-size: 64px 64px; background-position: 1px 1px; } .mission-item-component .mission-item .mission-top .mission-icon .mission-completed-icon-border > svg { position: absolute; top: 0; left: 0; } .mission-item-component .mission-item .mission-top .mission-icon .mission-completed-icon-border > svg > line { stroke-width: 2; stroke: #f0e6d2; fill: none; stroke-dasharray: 66; stroke-dashoffset: 66; animation: dash 2s cubic-bezier(0, 0, 0, 1) forwards; } @-moz-keyframes dash { from { stroke-dashoffset: 264; opacity: 1; } to { stroke-dashoffset: 66; opacity: 0; } } @-webkit-keyframes dash { from { stroke-dashoffset: 264; opacity: 1; } to { stroke-dashoffset: 66; opacity: 0; } } @-o-keyframes dash { from { stroke-dashoffset: 264; opacity: 1; } to { stroke-dashoffset: 66; opacity: 0; } } @keyframes dash { from { stroke-dashoffset: 264; opacity: 1; } to { stroke-dashoffset: 66; opacity: 0; } } .mission-item-component .mission-item .mission-top .mission-right { display: flex; flex-direction: column; justify-content: space-between; width: 100%; flex: 1 1 auto; min-height: 67px; margin: 0 0 0 12px ; } .mission-item-component .mission-item .mission-top .mission-right .mission-text { display: flex; flex: 1 1 auto; flex-flow: column wrap; width: 100%; overflow: hidden; } .mission-item-component .mission-item .mission-top .mission-right .mission-text.mission-text-badge { width: unset; padding-right: 34px; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header { width: 100%; flex: 0 1 auto; line-height: 16px; color: #a09b8c; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header .mission-title { font-weight: bold; color: #cdbe91; transition: color 0.15s; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header .mission-title.unread { color: #c89b3c; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header .mission-title.unread::before { content: '\25CF '; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header .mission-description { color: #a09b8c; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-helper-text { width: 100%; flex: 1 1 auto; line-height: 16px; color: #5b5a56; } .mission-item-component .mission-item .mission-top .mission-right .mission-right-badge { position: absolute; right: -5px ; left: auto ; top: -13px; background-repeat: no-repeat; background-position: center; background-size: 32px 44px; width: 32px; height: 44px; } .mission-item-component .mission-item .mission-top .mission-right .mission-right-badge.purchased { background-image: url(/fe/lol-navigation/Badge_purchased4k.png); } .mission-item-component .mission-item .mission-top .mission-right .mission-right-badge.loyalty { background-image: url(/fe/lol-navigation/Badge_loyalty4k.png); } .mission-item-component .mission-item .mission-top .mission-right .mission-objectives { display: flex; max-height: 200px; margin-top: 2px; width: 100%; overflow: hidden; } .mission-item-component .mission-item .mission-bottom { display: flex; position: relative; flex-direction: row; width: 100%; justify-content: space-between; align-items: flex-start; margin-top: 9px; } .mission-item-component .mission-item .mission-bottom .mission-rewards { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; } .mission-item-component .mission-item .mission-bottom .mission-expiring { background-repeat: no-repeat; flex: 0 0 auto; width: 24px; height: 16px; background-image: url(/fe/lol-navigation/Timeleft_AlertIcon.png); background-position: center; background-size: 16px 16px; } .mission-item-component .mission-item .mission-bottom .mission-repeating { background-repeat: no-repeat; flex: 0 0 auto; width: 24px; height: 16px; background-image: url(/fe/lol-navigation/RepeatableIcon.png); background-position: center; background-size: 16px 16px; } .mission-item-component .mission-item .mission-bottom .mission-pending { background-repeat: no-repeat; flex: 0 0 auto; width: 24px; height: 14px; background-image: url(/fe/lol-navigation/MissionObject_RewardIcons_Alert.png); background-position: center; background-size: 16px 16px; } .mission-item-component .mission-item .mission-bottom .mission-duration { flex: 0 0 auto; text-align: right; line-height: 19px; color: #5b5a56; } .mission-item-component .mission-item .mission-bottom .mission-duration.completed, .mission-item-component .mission-item .mission-bottom .mission-duration.cooldown { color: #c89b3c; } .mission-item-component .mission-item .mission-bottom .mission-duration.expiring { color: #f0e6d2; } .mission-item-component .mission-item .mission-bottom .mission-duration.pending { color: #5b5a56; } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title { font-family: var(--font-display); } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { font-family: var(--font-body); } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title, .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { -webkit-user-select: none; } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title, .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title { text-transform: uppercase; } .mission-tooltip:lang(ko-kr), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(ko-kr), .mission-tooltip:lang(ja-jp), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(ja-jp), .mission-tooltip:lang(tr-tr), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(tr-tr), .mission-tooltip:lang(el-gr), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(el-gr), .mission-tooltip:lang(th-th), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(th-th), .mission-tooltip:lang(zh-tw), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(zh-tw) { text-transform: none; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { text-transform: none; } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .mission-tooltip:lang(ar-ae), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(ar-ae) { letter-spacing: 0; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type:lang(ja-jp) { font-size: 13px; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type:lang(ar-ae) { letter-spacing: 0; } .mission-tooltip { direction: ltr; min-width: 256px; max-width: 356px; min-height: 198px; max-height: 215px; background: #010a13; display: flex; flex-direction: column; justify-content: center; } .mission-tooltip.mission-reward-double { width: 356px; min-width: 356px; max-width: 356px; } .mission-tooltip.mission-reward-double .mission-tooltip-top { background: url("/fe/lol-navigation/MissionFlyoutBackground_Large.png"); background-repeat: no-repeat; background-size: cover; } .mission-tooltip.mission-reward-single { width: 256px; min-width: 256px; max-width: 256px; } .mission-tooltip.mission-reward-single .mission-tooltip-top { background: url("/fe/lol-navigation/MissionFlyoutBackground_Small.png"); background-repeat: no-repeat; background-size: cover; } .mission-tooltip .mission-tooltip-top { width: 100%; height: 146px; position: relative; } .mission-tooltip .mission-tooltip-top .mission-reward-icons { top: 0; left: 0; width: 100%; height: 146px; display: flex; flex: 1 1 auto; flex-direction: row; justify-content: center; align-items: flex-start; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-icon-bounding { width: 256px; height: 126px; display: flex; flex: 0 0 auto; justify-content: center; align-items: center; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-icon-bounding.multi { width: 178px; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-icon-bounding.splash { height: 146px; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-icon-bounding .mission-reward-icon { width: 256px; height: 126px; flex: 0 0 auto; object-fit: contain; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-icon-bounding .mission-reward-icon.multi { width: 178px; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-icon-bounding .mission-reward-icon.mission-tooltip-type-splash { object-fit: cover; height: 146px; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-icon-bounding .mission-reward-icon.mission-tooltip-type-summoner { width: 92px; height: 92px; border-style: solid; border-width: 1px; border-color: #785a28; border-image: linear-gradient(to bottom, #c8aa6e, #463714) 1; box-shadow: inset 0 0 0 1px #000; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-divider { position: absolute; left: 163.5px; top: 0; width: 29px; height: 100%; background: transparent url("/fe/lol-navigation/MissionReward_TooltipDivider.png"); background-size: 29px 100%; background-repeat: no-repeat; z-index: 20; } .mission-tooltip .mission-tooltip-top .mission-rewards-title { position: absolute; width: 100%; text-align: center; bottom: 0; left: 0; padding-bottom: 7px; padding-top: 10px; background: linear-gradient(to top, #010a13 0%, rgba(0,0,0,0) 100%); z-index: 30; color: #cdbe91; } .mission-tooltip .mission-tooltip-divider-block { height: 1px; flex: 0 0 auto; margin: 0 10px; border: none; } .mission-tooltip .mission-tooltip-divider-block .mission-tooltip-divider { width: 100%; height: 1px; border-bottom: thin solid #1e282d; } .mission-tooltip .mission-tooltip-bottom { width: 100%; height: 100%; display: flex; flex: 1 1 auto; flex-direction: row; justify-content: space-around; align-items: center; } .mission-tooltip .mission-tooltip-bottom .mission-reward-wrapper { display: flex; width: 100%; align-items: flex-start; } .mission-tooltip .mission-tooltip-bottom .mission-reward { display: flex; flex: 1 1 auto; flex-direction: row; justify-content: center; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-icon { height: 18px; width: 18px; align-self: flex-start; background-size: 18px 18px; background-position: 0 0; background-repeat: no-repeat; background-image: url("/fe/lol-navigation/RewardIcons_Champ.png"); } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block { max-width: 220px; height: 100%; flex: 0 0 auto; display: flex; text-align: left ; margin: 0 0 0 5px ; flex-direction: column; font-size: 12px; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block.mission-reward-text-block-multi { max-width: 130px; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-text { flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { color: #a09b8c; flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mission-objective-component, .mission-objective-component .mission-objective-progress-block, .mission-objective-component .mission-objective-progress-block .mission-objective-progress-label, .mission-objective-component .mission-objective-description-block .mission-objective-description { font-family: var(--font-body); } .mission-objective-component, .mission-objective-component .mission-objective-progress-block, .mission-objective-component .mission-objective-progress-block .mission-objective-progress-label, .mission-objective-component .mission-objective-description-block .mission-objective-description { -webkit-user-select: none; } .mission-objective-component, .mission-objective-component .mission-objective-progress-block, .mission-objective-component .mission-objective-progress-block .mission-objective-progress-label, .mission-objective-component .mission-objective-description-block .mission-objective-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-objective-component, .mission-objective-component .mission-objective-progress-block, .mission-objective-component .mission-objective-progress-block .mission-objective-progress-label, .mission-objective-component .mission-objective-description-block .mission-objective-description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .mission-objective-component:lang(ja-jp), .mission-objective-component .mission-objective-progress-block:lang(ja-jp), .mission-objective-component .mission-objective-progress-block .mission-objective-progress-label:lang(ja-jp), .mission-objective-component .mission-objective-description-block .mission-objective-description:lang(ja-jp) { font-size: 13px; } .mission-objective-component:lang(ar-ae), .mission-objective-component .mission-objective-progress-block:lang(ar-ae), .mission-objective-component .mission-objective-progress-block .mission-objective-progress-label:lang(ar-ae), .mission-objective-component .mission-objective-description-block .mission-objective-description:lang(ar-ae) { letter-spacing: 0; } .mission-objective-component { display: table-row-group; width: 100%; margin-top: 1px; color: #5b5a56;  } .mission-objective-component:before { height: 5px; content: ''; display: block; } .mission-objective-component:first-of-type:before { display: none; } .mission-objective-component .mission-objective-progress-block { width: 100%; margin-top: 1px; align-items: center; color: #5b5a56; } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper { width: 100%; vertical-align: middle; } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper .mission-objective-progress-bar { display: flex; border: thin solid #463714; box-shadow: inset 0 0 0 1px #0a1428; box-sizing: border-box; width: 100%; max-width: 208px; background: #0a323c; padding: 1px; overflow: hidden; } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper .mission-objective-progress-bar .mission-objective-completed-progress { position: relative; height: 6px; width: 100%; overflow: hidden; transform: scaleX(0); transform-origin: left; transition: 0.6s cubic-bezier(0, 0, 0, 1) transform; will-change: transform; } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper .mission-objective-progress-bar .mission-objective-completed-progress[data-is-newly-completed-objective="true"]:after { content: ''; position: absolute; width: 100%; height: 100%; transform: translateX(100%); will-change: transform; background: linear-gradient(to right, #fff 20%, transparent 100%); animation: ProgressBackfill 1s cubic-bezier(0, 0, 0, 1) 0s normal 1 forwards; opacity: 0.5; } @-moz-keyframes ProgressBackfill { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @-webkit-keyframes ProgressBackfill { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @-o-keyframes ProgressBackfill { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes ProgressBackfill { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper .mission-objective-progress-bar .mission-objective-completed-progress.in-progress { background: linear-gradient(to right, RGB(16, 102, 145) 10%, #0ac8b9); } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper .mission-objective-progress-bar .mission-objective-completed-progress.completed { background: linear-gradient(to right, #785a28 5%, #c89b3c 90%, #c8aa6e 100%); } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper .mission-objective-progress-bar .mission-objective-completed-progress.expired { background: #3c3c41; } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper .mission-objective-progress-bar.expired-outline { border: thin solid #3c3c41; background: none; } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-label { text-align: right; color: #f0e6d2; padding: 0 0 0 16px ; white-space: nowrap; width: 1%; } .mission-objective-component .mission-objective-description-block .mission-objective-description { width: 100%; color: #a09b8c; padding-bottom: 1px; } .mission-objective-component .mission-objective-description-block .mission-objective-description.has-objective-based-reward { color: #c89b3c; } .mission-objective-component .mission-objective-description-block .mission-objective-description.has-objective-based-reward:before { content: '+'; display: inline-flex; vertical-align: middle; margin: 0 1px 0 0 ; font-size: 16px; } .mission-objectives-component .divider-text { font-family: var(--font-display); } .mission-objectives-component .divider-text { -webkit-user-select: none; } .mission-objectives-component .divider-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-objectives-component .divider-text { text-transform: uppercase; } .mission-objectives-component .divider-text:lang(ko-kr), .mission-objectives-component .divider-text:lang(ja-jp), .mission-objectives-component .divider-text:lang(tr-tr), .mission-objectives-component .divider-text:lang(el-gr), .mission-objectives-component .divider-text:lang(th-th), .mission-objectives-component .divider-text:lang(zh-tw) { text-transform: none; } .mission-objectives-component .divider-text { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .mission-objectives-component .divider-text:lang(ja-jp) { font-size: 13px; } .mission-objectives-component .divider-text:lang(ar-ae) { letter-spacing: 0; } .mission-objectives-component { width: 100%; display: flex; flex: 1 1 auto; } .mission-objectives-component td { padding: 0; } .mission-objectives-component .mission-objectives-table { width: 100%; border-collapse: collapse; } .mission-objectives-component .objective-divider { width: 100%; height: 24px; display: flex; flex-wrap: nowrap; align-items: center; margin-top: 4px; } .mission-objectives-component .divider-text { color: #a09b8c; padding: 0 10px 0 10px; overflow: hidden; } .mission-objectives-component .divider-line { height: 1px; flex-grow: 1; background: #3c3c41; } .mission-objectives-component .divider-diamond { display: inline-block; height: 7px; flex-basis: 7px; position: relative; background-position: center; background-image: url(/fe/lol-navigation/diamond_4k.png); background-repeat: no-repeat; background-size: 100% 100%; } .mission-reward .reward-description { font-family: var(--font-body); } .mission-reward .reward-description { -webkit-user-select: none; } .mission-reward .reward-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-reward .reward-description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .mission-reward .reward-description:lang(ja-jp) { font-size: 13px; } .mission-reward .reward-description:lang(ar-ae) { letter-spacing: 0; } .mission-reward { width: 100%; flex: 1 1 auto; align-items: center; display: flex; } .mission-reward .reward-icon { background-repeat: no-repeat; background-size: 16px 16px; background-position: center; width: 18px; height: 18px; flex: 0 0 auto; } .mission-reward .reward-description { flex: 1 1 auto; display: inline-flex; height: 18px; width: 100%; color: $color_palette_paladin2; margin: 0 0 0 7px ; align-items: center; } .mission-reward .reward-description.is-objective-based-reward { color: #c89b3c; } .mission-reward .reward-description.is-objective-based-reward:before { content: '+'; display: inline-flex; margin: 0 1px 0 0 ; font-size: 16px; } .series-induction-component .series-induction-buttons .series-induction-buttons-or, .series-induction-component .series-induction-title { font-family: var(--font-display); } .series-induction-component .series-induction-description { font-family: var(--font-body); } .series-induction-component .series-induction-buttons .series-induction-buttons-or, .series-induction-component .series-induction-title, .series-induction-component .series-induction-description { -webkit-user-select: none; } .series-induction-component .series-induction-buttons .series-induction-buttons-or, .series-induction-component .series-induction-title, .series-induction-component .series-induction-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .series-induction-component .series-induction-buttons .series-induction-buttons-or, .series-induction-component .series-induction-title { text-transform: uppercase; } .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(ko-kr), .series-induction-component .series-induction-title:lang(ko-kr), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(ja-jp), .series-induction-component .series-induction-title:lang(ja-jp), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(tr-tr), .series-induction-component .series-induction-title:lang(tr-tr), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(el-gr), .series-induction-component .series-induction-title:lang(el-gr), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(th-th), .series-induction-component .series-induction-title:lang(th-th), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(zh-tw), .series-induction-component .series-induction-title:lang(zh-tw) { text-transform: none; } .series-induction-component .series-induction-buttons .series-induction-buttons-or { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(ja-jp) { font-size: 13px; } .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(ar-ae) { letter-spacing: 0; } .series-induction-component .series-induction-description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .series-induction-component .series-induction-description:lang(ja-jp) { font-size: 13px; } .series-induction-component .series-induction-description:lang(ar-ae) { letter-spacing: 0; } .series-induction-component { flex-direction: row; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; width: 362px; position: relative; top: 0; left: 0; border-bottom: thin solid #1e282d; transition-property: max-height, height, flex, visibility, opacity, top, background; transform-style: cubic-bezier(0, 0, 0, 1), cubic-bezier(0, 0, 0, 1), cubic-bezier(0, 0, 0, 1), linear, linear, cubic-bezier(0, 0, 0, 1); transition-duration: 0.2s, 0.2s, 0.2s, 0s, 0.2s, 0.01s, 0.15s; transition-delay: 0s, 0s, 0.2s, 0s, 0.2s, 0.2s, 0s; display: flex; visibility: visible; opacity: 1; flex: 1 1 auto; max-height: 325px; } .series-induction-component.hidden { display: flex; visibility: hidden; opacity: 0; flex: 0.0001 1 auto; max-height: 0; top: -300px; left: 350px; border: 0; transition-property: max-height, height, flex, visibility, opacity, top, left, border; transition-duration: 0.2s, 0.2s, 0.2s, 0s, 0s, 0.2s, 0.2s, 0s; transition-delay: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0s, 0.4s; } .series-induction-component:hover .series-induction-root { background: rgba(255,255,255,0.1); } .series-induction-component:hover .series-induction-root .series-induction-title { color: #f0e6d2; } .series-induction-component .series-induction-background { width: 100%; height: 100%; background-blend-mode: screen; background-position: center top; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; } .series-induction-component .series-induction-root { width: 362px; box-sizing: border-box; position: relative; display: flex; flex-direction: column; flex-wrap: wrap; min-height: 80px; justify-content: space-between; align-items: center; padding: 14px; transition: background 0.15s; } .series-induction-component .series-induction-buttons { width: 100%; display: flex; flex-direction: row; margin-left: auto; margin-right: auto; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 16px; } .series-induction-component .series-induction-buttons > lol-uikit-flat-button { min-width: 110px; } .series-induction-component .series-induction-buttons .series-induction-buttons-or { color: #a09b8c; margin-right: 8px; margin-left: 8px; line-height: initial; } .series-induction-component .series-induction-title { font-weight: bold; color: #cdbe91; margin: 0px 0px 4px 0px; padding: 0px; line-height: 18px; font-size: 15px; text-align: center; transition: color 0.15s; } .series-induction-component .series-induction-description { color: #a09b8c; margin: 0px; margin-top: 2px; padding: 0px; text-align: center; line-height: 16px; display: flex; justify-content: center; } .series-induction-component .series-induction-description.expiring { margin-right: 20px; } .series-induction-component .series-induction-description.expiring:before { content: ""; display: block; background-repeat: no-repeat; flex: 0 0 auto; width: 16px; height: 16px; margin-right: 4px; background-image: url(/fe/lol-navigation/Timeleft_AlertIcon.png); background-position: center; background-size: 16px 16px; } .series-induction-component .induction-accept { display: block; } .series-induction-component .visible { visibility: visible; } .series-induction-component .series-induction-accept-border { --border-width: 2px; bottom: -7px; left: -px; position: absolute; right: -20px; top: -7px; } .series-induction-button { width: 48px; height: 48px; margin-right: 8px; margin-left: 8px; position: relative; cursor: pointer; } .series-induction-button .series-induction-button-glow { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; transition-property: opacity; transform-style: cubic-bezier(0, 0, 0, 1); transition-duration: 0.2s; -webkit-filter: brightness(75%) saturate(200%); } .series-induction-button .series-induction-button-image { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; transition-property: background; transform-style: linear; transition-duration: 0.2s; } .series-induction-button:hover .series-induction-button-glow { opacity: 0.8; } .series-induction-button:hover .series-induction-button-image { background: #f0e6d2; } .token-upsell-card-component .token-upsell-card-title .token-upsell-count, .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle { font-family: var(--font-display); } .token-upsell-card-component .token-upsell-card-title, .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle { font-family: var(--font-body); } .token-upsell-card-component .token-upsell-card-title, .token-upsell-card-component .token-upsell-card-title .token-upsell-count, .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle { -webkit-user-select: none; } .token-upsell-card-component .token-upsell-card-title, .token-upsell-card-component .token-upsell-card-title .token-upsell-count, .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .token-upsell-card-component .token-upsell-card-title .token-upsell-count { text-transform: uppercase; } .token-upsell-card-component .token-upsell-card-title .token-upsell-count:lang(ko-kr), .token-upsell-card-component .token-upsell-card-title .token-upsell-count:lang(ja-jp), .token-upsell-card-component .token-upsell-card-title .token-upsell-count:lang(tr-tr), .token-upsell-card-component .token-upsell-card-title .token-upsell-count:lang(el-gr), .token-upsell-card-component .token-upsell-card-title .token-upsell-count:lang(th-th), .token-upsell-card-component .token-upsell-card-title .token-upsell-count:lang(zh-tw) { text-transform: none; } .token-upsell-card-component .token-upsell-card-title .token-upsell-count { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .token-upsell-card-component .token-upsell-card-title .token-upsell-count:lang(ar-ae) { letter-spacing: 0; } .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle:lang(ja-jp) { font-size: 13px; } .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle:lang(ar-ae) { letter-spacing: 0; } .token-upsell-card-component .token-upsell-card-title { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .token-upsell-card-component .token-upsell-card-title:lang(ja-jp) { font-size: 13px; } .token-upsell-card-component .token-upsell-card-title:lang(ar-ae) { letter-spacing: 0; } .token-upsell-card-component { width: 362px; margin: 0px; padding: 0px; flex-direction: column; align-items: flex-start; justify-content: flex-start; position: relative; display: flex; visibility: visible; opacity: 1; flex: 1 1 auto; box-sizing: border-box; border-bottom: thin solid #1e282d; } .token-upsell-card-component:hover .token-upsell-card-root { background-color: rgba(255,255,255,0.1); } .token-upsell-card-component:hover .token-upsell-card-root .token-upsell-card-title { color: #f0e6d2; } .token-upsell-card-component .token-upsell-card-root { width: 362px; height: 64px; box-sizing: border-box; position: relative; display: flex; flex-direction: row; align-items: center; padding: 8px; background-size: 100% 100%; transition: background 0.15s; } .token-upsell-card-component .token-upsell-icon { background-repeat: no-repeat; background-size: 64px 45px; background-position: center; width: 64px; height: 45px; margin-left: 4px; flex: 0 0 auto; } .token-upsell-card-component .token-upsell-content { width: 298px; display: flex; margin-left: 4px; margin-right: 7px; } .token-upsell-card-component .token-upsell-card-title { display: flex; flex-direction: column; justify-content: center; } .token-upsell-card-component .token-upsell-card-title .token-upsell-count { margin: 0px 0px 0px 8px; padding: 0px; text-align: left; } .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle { margin: 0px 0px 0px 8px; padding: 0px; text-align: left; } .token-upsell-card-component .store-redirect-button { display: flex; flex-direction: row; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .token-upsell-card-component .store-redirect-button > lol-uikit-flat-button { min-width: 110px; } .token-upsell-card-component .store-redirect { display: block; } .token-upsell-card-component .visible { visibility: visible; } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title { font-family: var(--font-display); } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { font-family: var(--font-body); } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title, .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { -webkit-user-select: none; } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title, .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title { text-transform: uppercase; } .token-tooltip:lang(ko-kr), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(ko-kr), .token-tooltip:lang(ja-jp), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(ja-jp), .token-tooltip:lang(tr-tr), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(tr-tr), .token-tooltip:lang(el-gr), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(el-gr), .token-tooltip:lang(th-th), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(th-th), .token-tooltip:lang(zh-tw), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(zh-tw) { text-transform: none; } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { text-transform: none; } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .token-tooltip:lang(ar-ae), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(ar-ae) { letter-spacing: 0; } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block:lang(ja-jp) { font-size: 13px; } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block:lang(ar-ae) { letter-spacing: 0; } .token-tooltip { min-width: 256px; max-width: 356px; min-height: 198px; max-height: 215px; background: #010a13; display: flex; flex-direction: column; justify-content: center; } .token-tooltip .token-tooltip-top { width: 256px; height: 146px; position: relative; background-repeat: no-repeat; background-size: cover; } .token-tooltip .token-tooltip-top .token-tooltip-top-title { position: absolute; width: 100%; text-align: center; bottom: 0; left: 0; padding-bottom: 7px; padding-top: 10px; background: linear-gradient(to top, #010a13 0%, rgba(0,0,0,0) 100%); z-index: 1; color: #cdbe91; } .token-tooltip .token-tooltip-divider-block { height: 1px; flex: 0 0 auto; margin: 0 10px; border: none; } .token-tooltip .token-tooltip-divider-block .token-tooltip-divider { width: 100%; height: 1px; border-bottom: thin solid #1e282d; } .token-tooltip .token-tooltip-bottom { width: 100%; height: 100%; display: flex; flex: 1 1 auto; flex-direction: row; justify-content: space-around; align-items: center; } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { color: #a09b8c; flex: 0 0 auto; max-width: 220px; text-align: left; margin-left: 5px; flex-direction: column; font-size: 12px; display: flex; justify-content: center; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { font-family: var(--font-display); } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { -webkit-user-select: none; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { text-transform: uppercase; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(ko-kr), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(ja-jp), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(tr-tr), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(el-gr), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(th-th), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(zh-tw) { text-transform: none; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(ar-ae) { letter-spacing: 0; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { font-family: var(--font-display); } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { font-family: var(--font-display); } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { -webkit-user-select: none; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { text-transform: uppercase; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(ko-kr), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(ja-jp), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(tr-tr), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(el-gr), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(th-th), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(zh-tw) { text-transform: none; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(ar-ae) { letter-spacing: 0; } .mission-log-component { position: relative; width: 362px; height: 574px; } .mission-log-component .mission-log-container { width: 100%; height: 100%; } .mission-log-component .mission-log-container .mission-log-content { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header { direction: ltr; height: 32px; width: 100%; display: flex; align-items: center; border-bottom: thin solid #463714; background: #010a13; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { padding: 0 0 0 12px ; } .mission-log-component .mission-log-container .mission-log-content .mission-list { width: 100%; height: 510px; flex: 1 1 auto; } .mission-log-component .mission-log-container .mission-log-content .mission-list lol-uikit-scrollable { overflow-x: hidden; width: 100%; height: 510px; } .mission-log-component .mission-log-container .mission-log-content .mission-log-close-container { position: relative; bottom: -2px; flex: 0 0 auto; } .mission-log-component .mission-log-container .mission-log-content .mission-log-close-container .mission-log-close-button { position: relative; bottom: 0; width: 100px; height: 32px; } .mission-celebration-view-component { -webkit-user-select: none; } .mission-celebration-view-component { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-celebration-view-component { width: 100%; height: 100%; left: 0; top: 0; outline: none; } .mission-celebration-view-component .mission-celebration-animation .hidden.high { opacity: 1; animation: 0.2s linear forwards fadeOut; } .mission-celebration-view-component .mission-celebration-animation .hidden.low { opacity: 0; visibility: hidden; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .mission-celebration-view-component .mission-celebration-animation .visible.high { opacity: 0; animation: 0.2s linear forwards fadeIn; } .mission-celebration-view-component .mission-celebration-animation .visible.low { opacity: 1; visibility: visible; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .mission-celebration-view-component .mission-celebration-animation .mission-reward-dissipate { position: absolute; top: 194px; height: 330px; width: 512px; left: 0; } .mission-celebration-view-component .mission-celebration-animation .intro-wrapper { opacity: 1; position: absolute; left: 0; width: 100%; justify-content: center; align-items: center; top: 194px; height: 330px; } .mission-celebration-view-component .mission-celebration-animation .mission-celebration-rewards-wrapper .mission-reward-divider { position: absolute; left: 0; top: -16px; width: 33px; height: 340px; width: 100%; background-position: top center; background-repeat: no-repeat; } .mission-celebration-rewards-component { -webkit-user-select: none; } .mission-celebration-rewards-component { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-mission-celebration-rewards { right: 1px; bottom: 1px; border: thin solid #1e282d; overflow: hidden; } .mission-celebration-rewards-component { --reward_multi_width: 224px; --full_reward_height: 330px; --small_reward_height: 224px; --reward_top: 194px; width: 1280px; height: 720px; } .mission-celebration-rewards-component.large { --full_reward_height: 445px; --small_reward_height: 224px; --reward_top: 137px; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-dissipate { position: absolute; top: var(--reward_top); height: var(--full_reward_height); } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-dissipate.rewards-small-dissipate { width: 515px; left: 380px; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-dissipate.rewards-medium-dissipate { width: 900px; left: 190px; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-dissipate.rewards-large-dissipate { width: 1280px; left: 0px; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .hidden.high { opacity: 1; animation: 0.2s linear forwards fadeOut; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .hidden.low { opacity: 0; visibility: hidden; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .mission-celebration-rewards-component .mission-celebration-rewards-animation .visible.high { opacity: 0; animation: 0.2s linear forwards fadeIn; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .visible.low { opacity: 1; visibility: visible; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-wrapper { opacity: 0; display: flex; position: absolute; width: 100%; justify-content: center; align-items: flex-start; top: var(--reward_top); height: var(--full_reward_height); } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-wrapper.show-rewards.high { opacity: 0; animation: 0.2s linear forwards fadeIn; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-wrapper.show-rewards.low { opacity: 1; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-wrapper.hide-rewards.high { opacity: 1; animation: 1s cubic-bezier(1, 0, 0.97, 0.82) forwards hideReward, 0.6s linear forwards fadeReward; } @-webkit-keyframes hideReward { from { top: var(--reward_top); } to { top: -120px; } } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-wrapper.hide-rewards.low { animation: 0.4s linear forwards fadeReward; } @-webkit-keyframes fadeReward { from { opacity: 1; } to { opacity: 0; } } .mission-celebration-reward-component .celebration-text-block .celebration-text, .mission-celebration-reward-component .celebration-text-block .celebration-footer { font-family: var(--font-display); } .mission-celebration-reward-component .celebration-text-block .celebration-text, .mission-celebration-reward-component .celebration-text-block .celebration-footer { -webkit-user-select: none; } .mission-celebration-reward-component .celebration-text-block .celebration-text, .mission-celebration-reward-component .celebration-text-block .celebration-footer { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-celebration-reward-component .celebration-text-block .celebration-text, .mission-celebration-reward-component .celebration-text-block .celebration-footer { text-transform: uppercase; } .mission-celebration-reward-component .celebration-text-block .celebration-text:lang(ko-kr), .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(ko-kr), .mission-celebration-reward-component .celebration-text-block .celebration-text:lang(ja-jp), .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(ja-jp), .mission-celebration-reward-component .celebration-text-block .celebration-text:lang(tr-tr), .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(tr-tr), .mission-celebration-reward-component .celebration-text-block .celebration-text:lang(el-gr), .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(el-gr), .mission-celebration-reward-component .celebration-text-block .celebration-text:lang(th-th), .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(th-th), .mission-celebration-reward-component .celebration-text-block .celebration-text:lang(zh-tw), .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(zh-tw) { text-transform: none; } .mission-celebration-reward-component .celebration-text-block .celebration-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .mission-celebration-reward-component .celebration-text-block .celebration-text:lang(ar-ae) { letter-spacing: 0; } .mission-celebration-reward-component .celebration-text-block .celebration-footer { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(ja-jp) { font-size: 13px; } .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(ar-ae) { letter-spacing: 0; } .mission-celebration-reward-component { --reward_multi_width: 224px; --full_reward_height: 330px; --small_reward_height: 224px; --splash_width: 120px; --splash_height: 194px; --splash_frame_width: 145px; --splash_frame_height: 212px; --champion_icon_x: 89px; --champion_icon_y: 149px; --champion_icon_radius: 22px; --champion_chroma_y: -15px; --champion_chroma_size: 71px; --small_reward_size: 110px; --medium_reward_size: 110px; --medium_frame_size: 118px; --chroma_frame_height: 128px; --champion-icon-position-top: 147px; position: relative; display: flex; justify-content: center; align-items: flex-start; width: var(--reward_multi_width); height: var(--full_reward_height); flex-direction: column; } .mission-celebration-reward-component.large { --full_reward_height: 445px; --small_reward_height: 320px; --splash_width: 178px; --splash_height: 300px; --reward_multi_width: 264px; --splash_frame_width: 217px; --splash_frame_height: 330px; --champion_icon_x: 77px; --champion_icon_y: 218px; --champion_icon_radius: 34px; --champion_chroma_y: -20px; --champion_chroma_size: 100px; --medium_reward_size: 153px; --medium_frame_size: 168px; --chroma_frame_height: 183px; --champion-icon-position-top: 216px; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .mission-celebration-reward-component.intro-reward { -webkit-animation: 0.2s linear fadeIn; animation-fill-mode: forwards; } .mission-celebration-reward-component .celebration-reward-icon-wrapper { flex: 0 0 auto; position: relative; width: var(--reward_multi_width); height: var(--small_reward_height); display: flex; justify-content: center; align-items: center; opacity: 1; margin-top: 25px; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-champion-icon-circle { position: absolute; justify-content: center; align-items: center; display: flex; margin: auto; left: 1px; right: 0; top: var(--champion-icon-position-top); width: calc(var(--champion_icon_radius) * 2 + 6px); height: calc(var(--champion_icon_radius) * 2 + 6px); border-radius: 50%; background: #010a13; box-shadow: 0px 0px 3px 0.5px #1e282d; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-champion-icon-circle .celebration-reward-champion-icon-wrapper { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: calc(var(--champion_icon_radius) * 2 + 2px); height: calc(var(--champion_icon_radius) * 2 + 2px); border-radius: 50%; overflow: hidden; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-champion-icon-circle .celebration-reward-champion-icon-wrapper .celebration-reward-champion-icon { position: absolute; left: -3px; top: -3px; width: calc(var(--champion_icon_radius) * 2 + 7px); height: calc(var(--champion_icon_radius) * 2 + 7px); background-size: contain; box-shadow: inset 0px 0px 4px 3.5px #010a13; border-radius: 50%; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-border { left: 0; top: 0; position: absolute; width: var(--reward_multi_width); height: var(--small_reward_height); background: url(/fe/lol-navigation/IconFrame.png); background-size: var(--medium_frame_size) var(--medium_frame_size); background-repeat: no-repeat; background-position: center; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-border.splash { background: url(/fe/lol-navigation/ChampionFrame.png); background-size: var(--splash_frame_width) var(--splash_frame_height); background-repeat: no-repeat; background-position: center; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-border.skin { background: url(/fe/lol-navigation/SkinFrame.png); background-size: var(--splash_frame_width) var(--splash_frame_height); background-repeat: no-repeat; background-position: center; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-border.shard { background: url(/fe/lol-navigation/ShardFrame.png); background-size: var(--splash_frame_width) var(--splash_frame_height); background-repeat: no-repeat; background-position: center; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-border.chroma { height: var(--small_reward_height); background: url(/fe/lol-navigation/ChromaFrame_2k.png); background-size: var(--medium_frame_size) var(--chroma_frame_height); background-repeat: no-repeat, no-repeat; background-position: center, center; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow { margin: 0; padding: 0; display: flex; padding: 2px; position: relative; justify-content: center; align-items: center; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-chroma-bg { left: 1px; top: -5px; margin: auto; width: var(--medium_reward_size); height: var(--medium_reward_size); position: absolute; object-fit: contain; background: url(/fe/lol-navigation/Chroma_BG.png); -webkit-mask-image: url(/fe/lol-navigation/ChromaMask.png); -webkit-mask-size: var(--medium_reward_size) var(--medium_reward_size); } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow.chroma { padding: 0px; width: var(--medium_reward_size); height: var(--medium_reward_size); } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper { width: var(--reward_multi_width); height: var(--small_reward_height); object-fit: contain; position: relative; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper .celebration-reward-image { width: inherit; height: inherit; object-fit: inherit; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper.splash { object-fit: cover; height: var(--splash_height); width: var(--splash_width); -webkit-mask-size: var(--splash_width) var(--splash_height); -webkit-mask-image: url(/fe/lol-navigation/ChampionMask.png); } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper.splash.shard { -webkit-mask-size: var(--splash_width) var(--splash_height); -webkit-mask-image: url(/fe/lol-navigation/SkinShardMask.png); } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper.splash.shard:before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #1b9eb0; opacity: 0.7; mix-blend-mode: color; -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, rgba(0,0,0,0.6) 100%, #fff 100%); } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper.chroma { height: var(--champion_chroma_size); width: var(--champion_chroma_size); top: var(--champion_chroma_y); object-fit: contain; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper.small-reward { width: var(--small_reward_size); height: var(--small_reward_size); } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper.spell, .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper.icon { position: relative; width: var(--medium_reward_size); height: var(--medium_reward_size); -webkit-mask-size: var(--medium_reward_size) var(--medium_reward_size); -webkit-mask-image: url(/fe/lol-navigation/ChromaMask.png); } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .mission-celebration-reward-component .celebration-text-block { cursor: default; display: flex; flex: 0 0 auto; justify-content: flex-end; align-items: center; flex-direction: column; left: 0; height: 54px; width: var(--reward_multi_width); opacity: 0; -webkit-animation: 0.2s fadeIn 0.2s; animation-fill-mode: forwards; } .mission-celebration-reward-component .celebration-text-block .celebration-text { color: #cdbe91; min-height: 18px; max-height: 36px; line-height: 18px; vertical-align: middle; text-align: center; } .mission-celebration-reward-component .celebration-text-block .celebration-footer { color: #c89b3c; flex: 1 1 auto; height: 18px; line-height: 18px; vertical-align: middle; text-align: center; } .mission-celebration-card-component { -webkit-user-select: none; } .mission-celebration-card-component { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-mission-celebration-card { right: 1px; bottom: 1px; border: thin solid #1e282d; overflow: hidden; } .mission-celebration-card-component { margin: 0; width: 1280px; height: 720px; position: absolute; left: 0; right: 1; top: 0; bottom: 1; margin: 0 0; padding: 0 0; } .mission-celebration-card-component .mission-celebration-card-animation .hidden.high { opacity: 1; animation: 0.2s linear forwards fadeOut; } .mission-celebration-card-component .mission-celebration-card-animation .hidden.low { opacity: 0; visibility: hidden; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .mission-celebration-card-component .mission-celebration-card-animation .visible.high { opacity: 0; animation: 0.2s linear forwards fadeIn; } .mission-celebration-card-component .mission-celebration-card-animation .visible.low { opacity: 1; visibility: visible; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper { position: absolute; flex: 1 1 auto; display: flex; text-align: left; align-items: center; justify-content: center; height: 297px; width: 100%; } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper.show-mission-card { -webkit-animation: 0.2s cubic-bezier(0, 0, 0, 1) forwards fromBottom; } @-webkit-keyframes fromBottom { from { top: 266px; } to { top: 194px; } } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-dissipate { position: absolute; left: 0; top: 0; width: 1280px; height: 330px; } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-item-wrapper { flex: 0 0 auto; } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-item-wrapper.hide-mission-card { -webkit-animation: 0.1s linear 0.3s forwards fadeOut; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-item-wrapper .mission-item-component { flex: 0 0 auto; border-bottom: none; border-style: solid; border-width: thin; border-color: #785a28; background-color: rgba(0,0,0,0.55); box-shadow: 0px 0px 2px #000; } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-item-wrapper .mission-item-component:hover { background: rgba(30,35,40,0.86); } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-item-wrapper .mission-item-component .new-vid-top .new-mission-bottom { display: none; } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-item-wrapper .mission-item-component .mission-new-border { visibility: hidden; } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-item-wrapper .mission-item-component .overlay { visibility: hidden; } .level-up-wrapper { flex: 0 0 auto; } .level-up-wrapper .level-up-item-wrapper .summoner-icon-image { width: 140px; height: 140px; position: absolute; top: 96px; left: 570px; border-radius: 50%; opacity: 1; transition: opacity 0.3s; } .level-up-wrapper .level-up-item-wrapper .summoner-icon-image.hide { opacity: 0; } .level-up-wrapper .level-up-item-wrapper .level-up-circle { height: 183px; width: 183px; position: absolute; top: 74px; left: 548px; } .level-up-wrapper .level-up-item-wrapper.hide-level-up { -webkit-animation: 0.1s linear 0.3s forwards fadeOut; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .level-up-wrapper .mission-dissipate { z-index: -1; position: absolute; left: 0; width: 1280px; } .level-up-wrapper .mission-dissipate.mission-small-dissipate { top: 0px; height: 330px; } .level-up-wrapper .mission-dissipate.mission-medium-dissipate { top: -57px; height: 445px; } .mission-celebration-interactive-rewards-component { -webkit-user-select: none; } .mission-celebration-interactive-rewards-component { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-celebration-interactive-rewards-component { width: 100%; height: 100%; } .mission-celebration-interactive-rewards-component .mission-celebration-interactive-rewards-animation .interactive-rewards-wrapper { display: flex; width: 100%; justify-content: center; align-items: flex-start; opacity: 0; transition: opacity 1s; } .mission-celebration-interactive-rewards-component .mission-celebration-interactive-rewards-animation .interactive-rewards-wrapper.show { opacity: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6 { font-family: var(--font-display); } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6 { -webkit-user-select: none; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6 { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6 { text-transform: uppercase; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text:lang(ko-kr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer:lang(ko-kr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(ko-kr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text:lang(ja-jp), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer:lang(ja-jp), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(ja-jp), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text:lang(tr-tr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer:lang(tr-tr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(tr-tr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text:lang(el-gr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer:lang(el-gr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(el-gr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text:lang(th-th), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer:lang(th-th), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(th-th), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text:lang(zh-tw), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer:lang(zh-tw), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(zh-tw) { text-transform: none; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text:lang(ar-ae) { letter-spacing: 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer:lang(ar-ae) { letter-spacing: 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6 { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(ja-jp) { font-size: 13px; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(ar-ae) { letter-spacing: 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6 { color: #a09b8c; } .mission-celebration-interactive-reward-component { position: relative; flex-grow: 1; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper { flex: 0 0 auto; position: relative; display: flex; justify-content: center; align-items: center; opacity: 1; cursor: pointer; padding-right: 1px; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper.champion { cursor: default; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper.selected { cursor: default; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper:hover >.celebration-text-block { opacity: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper:hover >.celebration-text-block .celebration-text { color: #f0e6d2; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper:hover >.celebration-text-block .celebration-footer { color: #c89b3c; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper:hover >.celebration-champion-details-block { opacity: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper:hover >.celebration-reward-image-wrapper >.text-gradient-backer { opacity: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper:hover >.celebration-reward-image-wrapper >.radial-glow { opacity: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper:hover >.celebration-reward-image-wrapper >.idle-filter { opacity: 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper { justify-content: center; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper .idle-filter { background: linear-gradient(rgba(1,1,1,0.5), rgba(1,1,1,0.5)); opacity: 1; transition: opacity 0.15s; height: 100%; width: 100%; position: absolute; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper .idle-filter.selected { opacity: 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper .idle-filter.dimmed:not(.selected) { background: linear-gradient(rgba(1,1,1,0.8), rgba(1,1,1,0.8)); } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper .text-gradient-backer { background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(188,181,160,0)); opacity: 0; transition: opacity 0.15s; height: 120px; width: 100%; position: absolute; bottom: 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper .text-gradient-backer.selected { opacity: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper .radial-glow { height: 120px; width: 100%; bottom: -2px; background-position: bottom center; background-image: url(/fe/lol-navigation/champ_hover_highlight.png); background-size: contain; background-repeat: no-repeat; transition: opacity 0.15s ease-in; position: absolute; opacity: 0; z-index: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper .celebration-reward-image { z-index: -1; position: relative; display: flex; object-fit: cover; height: 446px; width: 100%; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block { position: absolute; top: 365px; left: 0px; width: 100%; transition: opacity 0.15s; opacity: 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block.selected { opacity: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block.selected.champion-text .celebration-text { color: #f0e6d2; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block.selected.champion-text .celebration-footer { color: #c89b3c; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block.champion-text { opacity: 1; top: 336px; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text { color: #cdbe91; transition: color 0.3s; min-height: 18px; max-height: 30px; line-height: 18px; vertical-align: middle; text-align: center; padding-bottom: 7px; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer { color: #785a28; transition: color 0.3s; min-height: 18px; max-height: 36px; line-height: 18px; vertical-align: middle; text-align: center; overflow: hidden; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-champion-details-block { position: absolute; top: 182px; left: 0; width: 100%; transition: opacity 0.15s; opacity: 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-champion-details-wrapper { max-width: 90%; margin: auto; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-champion-details-wrapper >div { margin: 10px 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty { position: absolute; top: 400px; left: 0; width: 100%; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty .difficulty-graph { display: block; width: 120px; height: 16px; margin: auto; transform: none ; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty .difficulty-level-0 { background: url(/fe/lol-navigation/DifficultyGraph_empty.png) no-repeat center/100%; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty .difficulty-level-1 { background: url(/fe/lol-navigation/DifficultyGraph_Difficulty1.png) no-repeat center/100%; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty .difficulty-level-2 { background: url(/fe/lol-navigation/DifficultyGraph_Difficulty2.png) no-repeat center/100%; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty .difficulty-level-3 { background: url(/fe/lol-navigation/DifficultyGraph_Difficulty3.png) no-repeat center/100%; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6 { margin: 0 0 2px 0; text-align: center; } .screen-root[data-screen-name="window-controls"] { right: 10px; top: 6px; } lol-uikit-content-block[type=dialog-small].app-controls-exit-dialog { width: 350px; } .riotclient-app-controls { display: flex; } .riotclient-app-controls .app-controls-button { cursor: pointer; height: 18px; width: 18px; -webkit-mask-size: contain; background-color: #a09b8c; } .riotclient-app-controls .app-controls-button:not(:last-child) { margin-right: 15px; } .riotclient-app-controls .app-controls-button:hover { background-color: #f0e6d2; } .riotclient-app-controls .app-controls-button:active { background-color: #5b5a56; } .riotclient-app-controls .app-controls-hide { -webkit-mask-image: url(/fe/lol-navigation/control-hide.png); } .riotclient-app-controls .app-controls-settings { -webkit-mask-image: url(/fe/lol-navigation/control-settings.png); } .riotclient-app-controls .app-controls-settings-disabled { cursor: auto; -webkit-mask-image: url(/fe/lol-navigation/control-settings-disabled.png); } .riotclient-app-controls .app-controls-settings-disabled:hover { background-color: #a09b8c; } .riotclient-app-controls .app-controls-settings-disabled:active { background-color: #a09b8c; } .riotclient-app-controls .app-controls-support { -webkit-mask-image: url(/fe/lol-navigation/control-help.png); } .riotclient-app-controls .app-controls-close { -webkit-mask-image: url(/fe/lol-navigation/control-close.png); } .rcp-fe-lol-email-verification .email-verification-container { width: 496px; height: 530px; direction: ltr; } .rcp-fe-lol-email-verification .email-verification-container .header-img-container { border-bottom: thin solid $color_palette_gold6; height: 243px; z-index: 1; position: relative; } .rcp-fe-lol-email-verification .email-verification-container .header-img-top { width: 100%; transform: none ; } .rcp-fe-lol-email-verification .email-verification-container lol-uikit-scrollable { height: 298px; position: relative; top: -45px; } .rcp-fe-lol-email-verification .email-verification-container .heading { font-family: var(--font-display); } .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body, .rcp-fe-lol-email-verification .email-verification-container .prompt .error, .rcp-fe-lol-email-verification .email-verification-container .prompt .exit { font-family: var(--font-body); } .rcp-fe-lol-email-verification .email-verification-container .heading, .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body, .rcp-fe-lol-email-verification .email-verification-container .prompt .error, .rcp-fe-lol-email-verification .email-verification-container .prompt .exit { -webkit-user-select: none; } .rcp-fe-lol-email-verification .email-verification-container .heading, .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body, .rcp-fe-lol-email-verification .email-verification-container .prompt .error, .rcp-fe-lol-email-verification .email-verification-container .prompt .exit { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-email-verification .email-verification-container .heading { text-transform: uppercase; } .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ko-kr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ja-jp), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(tr-tr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(el-gr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(th-th), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-email-verification .email-verification-container .heading { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification .email-verification-container .email { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-email-verification .email-verification-container .email:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body, .rcp-fe-lol-email-verification .email-verification-container .prompt .error, .rcp-fe-lol-email-verification .email-verification-container .prompt .exit { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-email-verification .email-verification-container .subheading:lang(ja-jp), .rcp-fe-lol-email-verification .email-verification-container .body:lang(ja-jp), .rcp-fe-lol-email-verification .email-verification-container .prompt .error:lang(ja-jp), .rcp-fe-lol-email-verification .email-verification-container .prompt .exit:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-email-verification .email-verification-container .subheading:lang(ar-ae), .rcp-fe-lol-email-verification .email-verification-container .body:lang(ar-ae), .rcp-fe-lol-email-verification .email-verification-container .prompt .error:lang(ar-ae), .rcp-fe-lol-email-verification .email-verification-container .prompt .exit:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification { direction: ltr; } .rcp-fe-lol-email-verification .email-verification-container .heading { margin: 0 36px 0 36px; width: 415px; font-size: 16px; line-height: 16px; padding-bottom: 9px; border-bottom: #a9852d 1px solid; } .rcp-fe-lol-email-verification .email-verification-container .email { padding: 0 36px; margin-top: 11px; margin-bottom: 0; line-height: 14px; color: #c8ad5c; text-transform: uppercase; max-width: 305px; word-break: break-all; } .rcp-fe-lol-email-verification .email-verification-container .subheading { margin: 8px auto 0; padding: 0 36px; color: #a09b8c; } .rcp-fe-lol-email-verification .email-verification-container a { color: #057d90; cursor: pointer; } .rcp-fe-lol-email-verification .email-verification-container .body { padding: 13px 36px; margin: 0; } .rcp-fe-lol-email-verification .email-verification-container .spaced { margin-top: 37px; } .rcp-fe-lol-email-verification .email-verification-container .prompt .warning { height: 18px; position: relative; top: 3px; margin: 0 5px 0 0 ; } .rcp-fe-lol-email-verification .email-verification-container .prompt .error { color: #ff2345; margin: 0 38px; } .rcp-fe-lol-email-verification .email-verification-container .prompt .exit { margin: 0 36px; color: #057d90; cursor: pointer; } .rcp-fe-lol-email-verification .email-verification-container .prompt .body.isJapan { padding-top: 0; } .rcp-fe-lol-email-verification .email-verification-container .prompt .body.isJapan .en-string { margin-left: 26px; } .rcp-fe-lol-email-verification .email-verification-container .heading, #lol-uikit-layer-manager .change-email-error h4 { font-family: var(--font-display); } .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body, #lol-uikit-layer-manager .change-email-error p, .rcp-fe-lol-email-verification .email-verification-container .change-email .fieldset label, .rcp-fe-lol-email-verification .email-verification-container .change-email .error { font-family: var(--font-body); } .rcp-fe-lol-email-verification .email-verification-container .heading, .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body, #lol-uikit-layer-manager .change-email-error h4, #lol-uikit-layer-manager .change-email-error p, .rcp-fe-lol-email-verification .email-verification-container .change-email .fieldset label, .rcp-fe-lol-email-verification .email-verification-container .change-email .error { -webkit-user-select: none; } .rcp-fe-lol-email-verification .email-verification-container .heading, .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body, #lol-uikit-layer-manager .change-email-error h4, #lol-uikit-layer-manager .change-email-error p, .rcp-fe-lol-email-verification .email-verification-container .change-email .fieldset label, .rcp-fe-lol-email-verification .email-verification-container .change-email .error { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-email-verification .email-verification-container .heading, #lol-uikit-layer-manager .change-email-error h4 { text-transform: uppercase; } .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ko-kr), #lol-uikit-layer-manager .change-email-error h4:lang(ko-kr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ja-jp), #lol-uikit-layer-manager .change-email-error h4:lang(ja-jp), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(tr-tr), #lol-uikit-layer-manager .change-email-error h4:lang(tr-tr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(el-gr), #lol-uikit-layer-manager .change-email-error h4:lang(el-gr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(th-th), #lol-uikit-layer-manager .change-email-error h4:lang(th-th), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(zh-tw), #lol-uikit-layer-manager .change-email-error h4:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-email-verification .email-verification-container .heading, #lol-uikit-layer-manager .change-email-error h4 { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ar-ae), #lol-uikit-layer-manager .change-email-error h4:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .change-email .error { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-email-verification .email-verification-container .email:lang(ar-ae), .rcp-fe-lol-email-verification .email-verification-container .change-email .error:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body, #lol-uikit-layer-manager .change-email-error p, .rcp-fe-lol-email-verification .email-verification-container .change-email .fieldset label { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-email-verification .email-verification-container .subheading:lang(ja-jp), .rcp-fe-lol-email-verification .email-verification-container .body:lang(ja-jp), #lol-uikit-layer-manager .change-email-error p:lang(ja-jp), .rcp-fe-lol-email-verification .email-verification-container .change-email .fieldset label:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-email-verification .email-verification-container .subheading:lang(ar-ae), .rcp-fe-lol-email-verification .email-verification-container .body:lang(ar-ae), #lol-uikit-layer-manager .change-email-error p:lang(ar-ae), .rcp-fe-lol-email-verification .email-verification-container .change-email .fieldset label:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification { direction: ltr; } .rcp-fe-lol-email-verification .email-verification-container .heading { margin: 0 36px 0 36px; width: 415px; font-size: 16px; line-height: 16px; padding-bottom: 9px; border-bottom: #a9852d 1px solid; } .rcp-fe-lol-email-verification .email-verification-container .email { padding: 0 36px; margin-top: 11px; margin-bottom: 0; line-height: 14px; color: #c8ad5c; text-transform: uppercase; max-width: 305px; word-break: break-all; } .rcp-fe-lol-email-verification .email-verification-container .subheading { margin: 8px auto 0; padding: 0 36px; color: #a09b8c; } .rcp-fe-lol-email-verification .email-verification-container a { color: #057d90; cursor: pointer; } .rcp-fe-lol-email-verification .email-verification-container .body { padding: 13px 36px; margin: 0; } .rcp-fe-lol-email-verification .email-verification-container .spaced { margin-top: 37px; } #lol-uikit-layer-manager .change-email-error { width: 173px; text-align: center; padding: 2px; } #lol-uikit-layer-manager .change-email-error h4 { margin: 10px 0; } .rcp-fe-lol-email-verification .email-verification-container .change-email .body { padding: 20px 114px 0 114px; } .rcp-fe-lol-email-verification .email-verification-container .change-email .fieldset { padding-bottom: 15px; } .rcp-fe-lol-email-verification .email-verification-container .change-email .fieldset label { font-weight: bold; color: #c8aa6e; text-transform: uppercase; line-height: 12px; width: 100%; display: block; padding-bottom: 4px; } .rcp-fe-lol-email-verification .email-verification-container .change-email .fieldset.validation-failed input { border-color: #ff2345; } .rcp-fe-lol-email-verification .email-verification-container .change-email .error { color: #ff2345; margin: 0 50px; } .rcp-fe-lol-email-verification .email-verification-container .heading { font-family: var(--font-display); } .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body, .rcp-fe-lol-email-verification .email-verification-container .email-sent .need-help, .rcp-fe-lol-email-verification .email-verification-container .email-sent .error { font-family: var(--font-body); } .rcp-fe-lol-email-verification .email-verification-container .heading, .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body, .rcp-fe-lol-email-verification .email-verification-container .email-sent .need-help, .rcp-fe-lol-email-verification .email-verification-container .email-sent .error { -webkit-user-select: none; } .rcp-fe-lol-email-verification .email-verification-container .heading, .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body, .rcp-fe-lol-email-verification .email-verification-container .email-sent .need-help, .rcp-fe-lol-email-verification .email-verification-container .email-sent .error { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-email-verification .email-verification-container .heading { text-transform: uppercase; } .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ko-kr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ja-jp), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(tr-tr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(el-gr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(th-th), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-email-verification .email-verification-container .heading { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .email-sent .error { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-email-verification .email-verification-container .email:lang(ar-ae), .rcp-fe-lol-email-verification .email-verification-container .email-sent .error:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body, .rcp-fe-lol-email-verification .email-verification-container .email-sent .need-help { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-email-verification .email-verification-container .subheading:lang(ja-jp), .rcp-fe-lol-email-verification .email-verification-container .body:lang(ja-jp), .rcp-fe-lol-email-verification .email-verification-container .email-sent .need-help:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-email-verification .email-verification-container .subheading:lang(ar-ae), .rcp-fe-lol-email-verification .email-verification-container .body:lang(ar-ae), .rcp-fe-lol-email-verification .email-verification-container .email-sent .need-help:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification { direction: ltr; } .rcp-fe-lol-email-verification .email-verification-container .heading { margin: 0 36px 0 36px; width: 415px; font-size: 16px; line-height: 16px; padding-bottom: 9px; border-bottom: #a9852d 1px solid; } .rcp-fe-lol-email-verification .email-verification-container .email { padding: 0 36px; margin-top: 11px; margin-bottom: 0; line-height: 14px; color: #c8ad5c; text-transform: uppercase; max-width: 305px; word-break: break-all; } .rcp-fe-lol-email-verification .email-verification-container .subheading { margin: 8px auto 0; padding: 0 36px; color: #a09b8c; } .rcp-fe-lol-email-verification .email-verification-container a { color: #057d90; cursor: pointer; } .rcp-fe-lol-email-verification .email-verification-container .body { padding: 13px 36px; margin: 0; } .rcp-fe-lol-email-verification .email-verification-container .spaced { margin-top: 37px; } .rcp-fe-lol-email-verification .email-verification-container .email-sent .need-help { padding: 0 50px; } .rcp-fe-lol-email-verification .email-verification-container .email-sent .error { color: #ff2345; margin: 0 50px; } .rcp-fe-lol-email-verification .email-verification-container .heading { font-family: var(--font-display); } .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body { font-family: var(--font-body); } .rcp-fe-lol-email-verification .email-verification-container .heading, .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body { -webkit-user-select: none; } .rcp-fe-lol-email-verification .email-verification-container .heading, .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-email-verification .email-verification-container .heading { text-transform: uppercase; } .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ko-kr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ja-jp), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(tr-tr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(el-gr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(th-th), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-email-verification .email-verification-container .heading { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification .email-verification-container .email { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-email-verification .email-verification-container .email:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-email-verification .email-verification-container .subheading:lang(ja-jp), .rcp-fe-lol-email-verification .email-verification-container .body:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-email-verification .email-verification-container .subheading:lang(ar-ae), .rcp-fe-lol-email-verification .email-verification-container .body:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification { direction: ltr; } .rcp-fe-lol-email-verification .email-verification-container .heading { margin: 0 36px 0 36px; width: 415px; font-size: 16px; line-height: 16px; padding-bottom: 9px; border-bottom: #a9852d 1px solid; } .rcp-fe-lol-email-verification .email-verification-container .email { padding: 0 36px; margin-top: 11px; margin-bottom: 0; line-height: 14px; color: #c8ad5c; text-transform: uppercase; max-width: 305px; word-break: break-all; } .rcp-fe-lol-email-verification .email-verification-container .subheading { margin: 8px auto 0; padding: 0 36px; color: #a09b8c; } .rcp-fe-lol-email-verification .email-verification-container a { color: #057d90; cursor: pointer; } .rcp-fe-lol-email-verification .email-verification-container .body { padding: 13px 36px; margin: 0; } .rcp-fe-lol-email-verification .email-verification-container .spaced { margin-top: 37px; } .rcp-fe-lol-email-verification .email-verification-container .error-component .red { color: #ff2345; } .rcp-fe-lol-email-verification .email-verification-container .heading { font-family: var(--font-display); } .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body { font-family: var(--font-body); } .rcp-fe-lol-email-verification .email-verification-container .heading, .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body { -webkit-user-select: none; } .rcp-fe-lol-email-verification .email-verification-container .heading, .rcp-fe-lol-email-verification .email-verification-container .email, .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-email-verification .email-verification-container .heading { text-transform: uppercase; } .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ko-kr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ja-jp), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(tr-tr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(el-gr), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(th-th), .rcp-fe-lol-email-verification .email-verification-container .heading:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-email-verification .email-verification-container .heading { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .rcp-fe-lol-email-verification .email-verification-container .heading:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification .email-verification-container .email { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-email-verification .email-verification-container .email:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification .email-verification-container .subheading, .rcp-fe-lol-email-verification .email-verification-container .body { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-email-verification .email-verification-container .subheading:lang(ja-jp), .rcp-fe-lol-email-verification .email-verification-container .body:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-email-verification .email-verification-container .subheading:lang(ar-ae), .rcp-fe-lol-email-verification .email-verification-container .body:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-email-verification { direction: ltr; } .rcp-fe-lol-email-verification .email-verification-container .heading { margin: 0 36px 0 36px; width: 415px; font-size: 16px; line-height: 16px; padding-bottom: 9px; border-bottom: #a9852d 1px solid; } .rcp-fe-lol-email-verification .email-verification-container .email { padding: 0 36px; margin-top: 11px; margin-bottom: 0; line-height: 14px; color: #c8ad5c; text-transform: uppercase; max-width: 305px; word-break: break-all; } .rcp-fe-lol-email-verification .email-verification-container .subheading { margin: 8px auto 0; padding: 0 36px; color: #a09b8c; } .rcp-fe-lol-email-verification .email-verification-container a { color: #057d90; cursor: pointer; } .rcp-fe-lol-email-verification .email-verification-container .body { padding: 13px 36px; margin: 0; } .rcp-fe-lol-email-verification .email-verification-container .spaced { margin-top: 37px; } .rcp-fe-lol-email-verification .email-verification-container .success .check-hashes { position: relative; height: 119px; margin-top: 34px; margin-left: 170px; } .rcp-fe-lol-email-verification .email-verification-container .success .checkmark { position: absolute; left: 33px; top: 28px; height: 100px; } .rcp-fe-lol-email-verification .email-verification-container .success .hashes { position: absolute; left: 0; width: 162px; } .mission-button .count-badge { font-family: var(--font-body); } .mission-button { position: relative; outline: none; border: none; background: none; cursor: pointer; padding: 0; background-image: url(/fe/lol-navigation/mission_tracker_button.png); background-size: cover; background-position-y: 0px; height: 32px; width: 38px; } .mission-button:hover { background-position-y: -32px; } .mission-button:active { background-position-y: -64px; } .mission-button:disabled, .mission-button[disabled], .mission-button.disabled { cursor: default; background-position-y: -32px; } .mission-button.toggled { outline: none; border: none; background: none; cursor: pointer; padding: 0; background-image: url(/fe/lol-navigation/mission_tracker_button.png); background-size: cover; background-position-y: -96px; } .mission-button.toggled:hover { background-position-y: -128px; } .mission-button.toggled:active { background-position-y: -160px; } .mission-button.toggled:disabled, .mission-button.toggled[disabled], .mission-button.toggled.disabled { cursor: default; background-position-y: -128px; } .mission-button.unread.use-animation { animation: pulseMissionButton 750ms 2 alternate ease-in-out; } .mission-button.unread:not(.use-animation) { -webkit-filter: brightness(1.5) saturate(1.5); } .mission-button[disabled], .mission-button.disabled { outline: none; border: none; background: none; cursor: pointer; padding: 0; background-image: url(/fe/lol-navigation/mission_tracker_button.png); background-size: cover; background-position-y: -128px; cursor: default; } .mission-button[disabled]:hover, .mission-button.disabled:hover { background-position-y: -160px; } .mission-button[disabled]:active, .mission-button.disabled:active { background-position-y: -192px; } .mission-button[disabled]:disabled, .mission-button.disabled:disabled, .mission-button[disabled][disabled], .mission-button.disabled[disabled], .mission-button[disabled].disabled, .mission-button.disabled.disabled { cursor: default; background-position-y: -160px; } .mission-button .count-badge { font-weight: bold; border-radius: 3px; background-color: #c89b3c; color: #010a13; padding: 0 6px; height: 16px; font-size: 12px; display: flex; align-items: center; } .mission-button .social-count-badge { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); box-shadow: 0 0 2px rgba(1,10,19,0.5); } @-moz-keyframes pulseMissionButton { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.5) saturate(1.5); } } @-webkit-keyframes pulseMissionButton { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.5) saturate(1.5); } } @-o-keyframes pulseMissionButton { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.5) saturate(1.5); } } @keyframes pulseMissionButton { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.5) saturate(1.5); } } .margin-scrollable { margin-bottom: 50px; overflow-x: hidden; word-break: keep-all; } .player-messaging-notification { min-height: 100px; max-height: 360px; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-title { font-family: var(--font-display); } .honor-late-recognition-component p, .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-component .lol-typekit-label, .honor-late-recognition-header { font-family: var(--font-body); } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component p, .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-component .lol-typekit-label, .honor-late-recognition-title, .honor-late-recognition-header { -webkit-user-select: none; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component p, .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-component .lol-typekit-label, .honor-late-recognition-title, .honor-late-recognition-header { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-title { text-transform: uppercase; } .honor-late-recognition-component h1:lang(ko-kr), .honor-late-recognition-component h1.subhead:lang(ko-kr), .honor-late-recognition-component h1.preserve-case:lang(ko-kr), .honor-late-recognition-component h2:lang(ko-kr), .honor-late-recognition-component h2.subhead:lang(ko-kr), .honor-late-recognition-component h2.preserve-case:lang(ko-kr), .honor-late-recognition-component h3:lang(ko-kr), .honor-late-recognition-component h3.subhead:lang(ko-kr), .honor-late-recognition-component h3.preserve-case:lang(ko-kr), .honor-late-recognition-component h4:lang(ko-kr), .honor-late-recognition-component h4.subhead:lang(ko-kr), .honor-late-recognition-component h4.preserve-case:lang(ko-kr), .honor-late-recognition-component h5:lang(ko-kr), .honor-late-recognition-component h5.subhead:lang(ko-kr), .honor-late-recognition-component h5.preserve-case:lang(ko-kr), .honor-late-recognition-component h6:lang(ko-kr), .honor-late-recognition-component h6.subhead:lang(ko-kr), .honor-late-recognition-component h6.preserve-case:lang(ko-kr), .honor-late-recognition-component ul.title-list li:lang(ko-kr), .honor-late-recognition-title:lang(ko-kr), .honor-late-recognition-component h1:lang(ja-jp), .honor-late-recognition-component h1.subhead:lang(ja-jp), .honor-late-recognition-component h1.preserve-case:lang(ja-jp), .honor-late-recognition-component h2:lang(ja-jp), .honor-late-recognition-component h2.subhead:lang(ja-jp), .honor-late-recognition-component h2.preserve-case:lang(ja-jp), .honor-late-recognition-component h3:lang(ja-jp), .honor-late-recognition-component h3.subhead:lang(ja-jp), .honor-late-recognition-component h3.preserve-case:lang(ja-jp), .honor-late-recognition-component h4:lang(ja-jp), .honor-late-recognition-component h4.subhead:lang(ja-jp), .honor-late-recognition-component h4.preserve-case:lang(ja-jp), .honor-late-recognition-component h5:lang(ja-jp), .honor-late-recognition-component h5.subhead:lang(ja-jp), .honor-late-recognition-component h5.preserve-case:lang(ja-jp), .honor-late-recognition-component h6:lang(ja-jp), .honor-late-recognition-component h6.subhead:lang(ja-jp), .honor-late-recognition-component h6.preserve-case:lang(ja-jp), .honor-late-recognition-component ul.title-list li:lang(ja-jp), .honor-late-recognition-title:lang(ja-jp), .honor-late-recognition-component h1:lang(tr-tr), .honor-late-recognition-component h1.subhead:lang(tr-tr), .honor-late-recognition-component h1.preserve-case:lang(tr-tr), .honor-late-recognition-component h2:lang(tr-tr), .honor-late-recognition-component h2.subhead:lang(tr-tr), .honor-late-recognition-component h2.preserve-case:lang(tr-tr), .honor-late-recognition-component h3:lang(tr-tr), .honor-late-recognition-component h3.subhead:lang(tr-tr), .honor-late-recognition-component h3.preserve-case:lang(tr-tr), .honor-late-recognition-component h4:lang(tr-tr), .honor-late-recognition-component h4.subhead:lang(tr-tr), .honor-late-recognition-component h4.preserve-case:lang(tr-tr), .honor-late-recognition-component h5:lang(tr-tr), .honor-late-recognition-component h5.subhead:lang(tr-tr), .honor-late-recognition-component h5.preserve-case:lang(tr-tr), .honor-late-recognition-component h6:lang(tr-tr), .honor-late-recognition-component h6.subhead:lang(tr-tr), .honor-late-recognition-component h6.preserve-case:lang(tr-tr), .honor-late-recognition-component ul.title-list li:lang(tr-tr), .honor-late-recognition-title:lang(tr-tr), .honor-late-recognition-component h1:lang(el-gr), .honor-late-recognition-component h1.subhead:lang(el-gr), .honor-late-recognition-component h1.preserve-case:lang(el-gr), .honor-late-recognition-component h2:lang(el-gr), .honor-late-recognition-component h2.subhead:lang(el-gr), .honor-late-recognition-component h2.preserve-case:lang(el-gr), .honor-late-recognition-component h3:lang(el-gr), .honor-late-recognition-component h3.subhead:lang(el-gr), .honor-late-recognition-component h3.preserve-case:lang(el-gr), .honor-late-recognition-component h4:lang(el-gr), .honor-late-recognition-component h4.subhead:lang(el-gr), .honor-late-recognition-component h4.preserve-case:lang(el-gr), .honor-late-recognition-component h5:lang(el-gr), .honor-late-recognition-component h5.subhead:lang(el-gr), .honor-late-recognition-component h5.preserve-case:lang(el-gr), .honor-late-recognition-component h6:lang(el-gr), .honor-late-recognition-component h6.subhead:lang(el-gr), .honor-late-recognition-component h6.preserve-case:lang(el-gr), .honor-late-recognition-component ul.title-list li:lang(el-gr), .honor-late-recognition-title:lang(el-gr), .honor-late-recognition-component h1:lang(th-th), .honor-late-recognition-component h1.subhead:lang(th-th), .honor-late-recognition-component h1.preserve-case:lang(th-th), .honor-late-recognition-component h2:lang(th-th), .honor-late-recognition-component h2.subhead:lang(th-th), .honor-late-recognition-component h2.preserve-case:lang(th-th), .honor-late-recognition-component h3:lang(th-th), .honor-late-recognition-component h3.subhead:lang(th-th), .honor-late-recognition-component h3.preserve-case:lang(th-th), .honor-late-recognition-component h4:lang(th-th), .honor-late-recognition-component h4.subhead:lang(th-th), .honor-late-recognition-component h4.preserve-case:lang(th-th), .honor-late-recognition-component h5:lang(th-th), .honor-late-recognition-component h5.subhead:lang(th-th), .honor-late-recognition-component h5.preserve-case:lang(th-th), .honor-late-recognition-component h6:lang(th-th), .honor-late-recognition-component h6.subhead:lang(th-th), .honor-late-recognition-component h6.preserve-case:lang(th-th), .honor-late-recognition-component ul.title-list li:lang(th-th), .honor-late-recognition-title:lang(th-th), .honor-late-recognition-component h1:lang(zh-tw), .honor-late-recognition-component h1.subhead:lang(zh-tw), .honor-late-recognition-component h1.preserve-case:lang(zh-tw), .honor-late-recognition-component h2:lang(zh-tw), .honor-late-recognition-component h2.subhead:lang(zh-tw), .honor-late-recognition-component h2.preserve-case:lang(zh-tw), .honor-late-recognition-component h3:lang(zh-tw), .honor-late-recognition-component h3.subhead:lang(zh-tw), .honor-late-recognition-component h3.preserve-case:lang(zh-tw), .honor-late-recognition-component h4:lang(zh-tw), .honor-late-recognition-component h4.subhead:lang(zh-tw), .honor-late-recognition-component h4.preserve-case:lang(zh-tw), .honor-late-recognition-component h5:lang(zh-tw), .honor-late-recognition-component h5.subhead:lang(zh-tw), .honor-late-recognition-component h5.preserve-case:lang(zh-tw), .honor-late-recognition-component h6:lang(zh-tw), .honor-late-recognition-component h6.subhead:lang(zh-tw), .honor-late-recognition-component h6.preserve-case:lang(zh-tw), .honor-late-recognition-component ul.title-list li:lang(zh-tw), .honor-late-recognition-title:lang(zh-tw) { text-transform: none; } .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component ul.title-list li { text-transform: none; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .honor-late-recognition-component h1:lang(ar-ae), .honor-late-recognition-component h1.subhead:lang(ar-ae), .honor-late-recognition-component h1.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h1.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h1.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h1.subhead { color: #a09b8c; } .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .honor-late-recognition-component h2:lang(ar-ae), .honor-late-recognition-component h2.subhead:lang(ar-ae), .honor-late-recognition-component h2.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h2.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h2.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h2.subhead { color: #a09b8c; } .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .honor-late-recognition-component h3:lang(ar-ae), .honor-late-recognition-component h3.subhead:lang(ar-ae), .honor-late-recognition-component h3.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h3.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h3.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h3.subhead { color: #a09b8c; } .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .honor-late-recognition-component h4:lang(ar-ae), .honor-late-recognition-component h4.subhead:lang(ar-ae), .honor-late-recognition-component h4.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h4.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h4.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h4.subhead { color: #a09b8c; } .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component ul.title-list li { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .honor-late-recognition-component h5:lang(ar-ae), .honor-late-recognition-component h5.subhead:lang(ar-ae), .honor-late-recognition-component h5.preserve-case:lang(ar-ae), .honor-late-recognition-component ul.title-list li:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component ul.title-list li { letter-spacing: 0.0375em; } .honor-late-recognition-component h5.preserve-case:lang(ar-ae), .honor-late-recognition-component ul.title-list li:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h5.subhead { color: #a09b8c; } .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-title { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .honor-late-recognition-component h6:lang(ja-jp), .honor-late-recognition-component h6.subhead:lang(ja-jp), .honor-late-recognition-component h6.preserve-case:lang(ja-jp), .honor-late-recognition-title:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component h6:lang(ar-ae), .honor-late-recognition-component h6.subhead:lang(ar-ae), .honor-late-recognition-component h6.preserve-case:lang(ar-ae), .honor-late-recognition-title:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h6.preserve-case { letter-spacing: 0.0375em; } .honor-late-recognition-component h6.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h6.subhead { color: #a09b8c; } .honor-late-recognition-component p { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component p:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component p:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component .lol-typekit-label { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component .lol-typekit-label:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component .lol-typekit-label:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-header { color: #a09b8c; font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component .lol-typekit-value:lang(ja-jp), .honor-late-recognition-header:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component .lol-typekit-value:lang(ar-ae), .honor-late-recognition-header:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component a:link:lang(ja-jp), .honor-late-recognition-component a:visited:lang(ja-jp), .honor-late-recognition-component a:link.display:lang(ja-jp), .honor-late-recognition-component a:visited.display:lang(ja-jp), .honor-late-recognition-component a:link.external:lang(ja-jp), .honor-late-recognition-component a:visited.external:lang(ja-jp), .honor-late-recognition-component a:link.external-display:lang(ja-jp), .honor-late-recognition-component a:visited.external-display:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component a:link:lang(ar-ae), .honor-late-recognition-component a:visited:lang(ar-ae), .honor-late-recognition-component a:link.display:lang(ar-ae), .honor-late-recognition-component a:visited.display:lang(ar-ae), .honor-late-recognition-component a:link.external:lang(ar-ae), .honor-late-recognition-component a:visited.external:lang(ar-ae), .honor-late-recognition-component a:link.external-display:lang(ar-ae), .honor-late-recognition-component a:visited.external-display:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display { color: #cdbe91; } .honor-late-recognition-component a:link:hover, .honor-late-recognition-component a:visited:hover, .honor-late-recognition-component a:link.display:hover, .honor-late-recognition-component a:visited.display:hover, .honor-late-recognition-component a:link.hover, .honor-late-recognition-component a:visited.hover, .honor-late-recognition-component a:link.display.hover, .honor-late-recognition-component a:visited.display.hover { color: #f0e6d2; } .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display { color: #0596aa; text-decoration: none; } .honor-late-recognition-component a:link.external:hover, .honor-late-recognition-component a:visited.external:hover, .honor-late-recognition-component a:link.external-display:hover, .honor-late-recognition-component a:visited.external-display:hover, .honor-late-recognition-component a:link.external.hover, .honor-late-recognition-component a:visited.external.hover, .honor-late-recognition-component a:link.external-display.hover, .honor-late-recognition-component a:visited.external-display.hover { color: #cdfafa; } .honor-late-recognition-component a:link.external:after, .honor-late-recognition-component a:visited.external:after, .honor-late-recognition-component a:link.external-display:after, .honor-late-recognition-component a:visited.external-display:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-navigation/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .honor-late-recognition-component a:link.external:lang(ar-ae):after, .honor-late-recognition-component a:visited.external:lang(ar-ae):after, .honor-late-recognition-component a:link.external-display:lang(ar-ae):after, .honor-late-recognition-component a:visited.external-display:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .honor-late-recognition-component a:link.external:hover:after, .honor-late-recognition-component a:visited.external:hover:after, .honor-late-recognition-component a:link.external-display:hover:after, .honor-late-recognition-component a:visited.external-display:hover:after { background-color: #cdfafa; } .honor-late-recognition-component .lol-typekit-value { color: #f0e6d2; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-title { font-family: var(--font-display); } .honor-late-recognition-component p, .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-component .lol-typekit-label, .honor-late-recognition-header { font-family: var(--font-body); } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component p, .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-component .lol-typekit-label, .honor-late-recognition-title, .honor-late-recognition-header { -webkit-user-select: none; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component p, .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-component .lol-typekit-label, .honor-late-recognition-title, .honor-late-recognition-header { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-title { text-transform: uppercase; } .honor-late-recognition-component h1:lang(ko-kr), .honor-late-recognition-component h1.subhead:lang(ko-kr), .honor-late-recognition-component h1.preserve-case:lang(ko-kr), .honor-late-recognition-component h2:lang(ko-kr), .honor-late-recognition-component h2.subhead:lang(ko-kr), .honor-late-recognition-component h2.preserve-case:lang(ko-kr), .honor-late-recognition-component h3:lang(ko-kr), .honor-late-recognition-component h3.subhead:lang(ko-kr), .honor-late-recognition-component h3.preserve-case:lang(ko-kr), .honor-late-recognition-component h4:lang(ko-kr), .honor-late-recognition-component h4.subhead:lang(ko-kr), .honor-late-recognition-component h4.preserve-case:lang(ko-kr), .honor-late-recognition-component h5:lang(ko-kr), .honor-late-recognition-component h5.subhead:lang(ko-kr), .honor-late-recognition-component h5.preserve-case:lang(ko-kr), .honor-late-recognition-component h6:lang(ko-kr), .honor-late-recognition-component h6.subhead:lang(ko-kr), .honor-late-recognition-component h6.preserve-case:lang(ko-kr), .honor-late-recognition-component ul.title-list li:lang(ko-kr), .honor-late-recognition-title:lang(ko-kr), .honor-late-recognition-component h1:lang(ja-jp), .honor-late-recognition-component h1.subhead:lang(ja-jp), .honor-late-recognition-component h1.preserve-case:lang(ja-jp), .honor-late-recognition-component h2:lang(ja-jp), .honor-late-recognition-component h2.subhead:lang(ja-jp), .honor-late-recognition-component h2.preserve-case:lang(ja-jp), .honor-late-recognition-component h3:lang(ja-jp), .honor-late-recognition-component h3.subhead:lang(ja-jp), .honor-late-recognition-component h3.preserve-case:lang(ja-jp), .honor-late-recognition-component h4:lang(ja-jp), .honor-late-recognition-component h4.subhead:lang(ja-jp), .honor-late-recognition-component h4.preserve-case:lang(ja-jp), .honor-late-recognition-component h5:lang(ja-jp), .honor-late-recognition-component h5.subhead:lang(ja-jp), .honor-late-recognition-component h5.preserve-case:lang(ja-jp), .honor-late-recognition-component h6:lang(ja-jp), .honor-late-recognition-component h6.subhead:lang(ja-jp), .honor-late-recognition-component h6.preserve-case:lang(ja-jp), .honor-late-recognition-component ul.title-list li:lang(ja-jp), .honor-late-recognition-title:lang(ja-jp), .honor-late-recognition-component h1:lang(tr-tr), .honor-late-recognition-component h1.subhead:lang(tr-tr), .honor-late-recognition-component h1.preserve-case:lang(tr-tr), .honor-late-recognition-component h2:lang(tr-tr), .honor-late-recognition-component h2.subhead:lang(tr-tr), .honor-late-recognition-component h2.preserve-case:lang(tr-tr), .honor-late-recognition-component h3:lang(tr-tr), .honor-late-recognition-component h3.subhead:lang(tr-tr), .honor-late-recognition-component h3.preserve-case:lang(tr-tr), .honor-late-recognition-component h4:lang(tr-tr), .honor-late-recognition-component h4.subhead:lang(tr-tr), .honor-late-recognition-component h4.preserve-case:lang(tr-tr), .honor-late-recognition-component h5:lang(tr-tr), .honor-late-recognition-component h5.subhead:lang(tr-tr), .honor-late-recognition-component h5.preserve-case:lang(tr-tr), .honor-late-recognition-component h6:lang(tr-tr), .honor-late-recognition-component h6.subhead:lang(tr-tr), .honor-late-recognition-component h6.preserve-case:lang(tr-tr), .honor-late-recognition-component ul.title-list li:lang(tr-tr), .honor-late-recognition-title:lang(tr-tr), .honor-late-recognition-component h1:lang(el-gr), .honor-late-recognition-component h1.subhead:lang(el-gr), .honor-late-recognition-component h1.preserve-case:lang(el-gr), .honor-late-recognition-component h2:lang(el-gr), .honor-late-recognition-component h2.subhead:lang(el-gr), .honor-late-recognition-component h2.preserve-case:lang(el-gr), .honor-late-recognition-component h3:lang(el-gr), .honor-late-recognition-component h3.subhead:lang(el-gr), .honor-late-recognition-component h3.preserve-case:lang(el-gr), .honor-late-recognition-component h4:lang(el-gr), .honor-late-recognition-component h4.subhead:lang(el-gr), .honor-late-recognition-component h4.preserve-case:lang(el-gr), .honor-late-recognition-component h5:lang(el-gr), .honor-late-recognition-component h5.subhead:lang(el-gr), .honor-late-recognition-component h5.preserve-case:lang(el-gr), .honor-late-recognition-component h6:lang(el-gr), .honor-late-recognition-component h6.subhead:lang(el-gr), .honor-late-recognition-component h6.preserve-case:lang(el-gr), .honor-late-recognition-component ul.title-list li:lang(el-gr), .honor-late-recognition-title:lang(el-gr), .honor-late-recognition-component h1:lang(th-th), .honor-late-recognition-component h1.subhead:lang(th-th), .honor-late-recognition-component h1.preserve-case:lang(th-th), .honor-late-recognition-component h2:lang(th-th), .honor-late-recognition-component h2.subhead:lang(th-th), .honor-late-recognition-component h2.preserve-case:lang(th-th), .honor-late-recognition-component h3:lang(th-th), .honor-late-recognition-component h3.subhead:lang(th-th), .honor-late-recognition-component h3.preserve-case:lang(th-th), .honor-late-recognition-component h4:lang(th-th), .honor-late-recognition-component h4.subhead:lang(th-th), .honor-late-recognition-component h4.preserve-case:lang(th-th), .honor-late-recognition-component h5:lang(th-th), .honor-late-recognition-component h5.subhead:lang(th-th), .honor-late-recognition-component h5.preserve-case:lang(th-th), .honor-late-recognition-component h6:lang(th-th), .honor-late-recognition-component h6.subhead:lang(th-th), .honor-late-recognition-component h6.preserve-case:lang(th-th), .honor-late-recognition-component ul.title-list li:lang(th-th), .honor-late-recognition-title:lang(th-th), .honor-late-recognition-component h1:lang(zh-tw), .honor-late-recognition-component h1.subhead:lang(zh-tw), .honor-late-recognition-component h1.preserve-case:lang(zh-tw), .honor-late-recognition-component h2:lang(zh-tw), .honor-late-recognition-component h2.subhead:lang(zh-tw), .honor-late-recognition-component h2.preserve-case:lang(zh-tw), .honor-late-recognition-component h3:lang(zh-tw), .honor-late-recognition-component h3.subhead:lang(zh-tw), .honor-late-recognition-component h3.preserve-case:lang(zh-tw), .honor-late-recognition-component h4:lang(zh-tw), .honor-late-recognition-component h4.subhead:lang(zh-tw), .honor-late-recognition-component h4.preserve-case:lang(zh-tw), .honor-late-recognition-component h5:lang(zh-tw), .honor-late-recognition-component h5.subhead:lang(zh-tw), .honor-late-recognition-component h5.preserve-case:lang(zh-tw), .honor-late-recognition-component h6:lang(zh-tw), .honor-late-recognition-component h6.subhead:lang(zh-tw), .honor-late-recognition-component h6.preserve-case:lang(zh-tw), .honor-late-recognition-component ul.title-list li:lang(zh-tw), .honor-late-recognition-title:lang(zh-tw) { text-transform: none; } .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component ul.title-list li { text-transform: none; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .honor-late-recognition-component h1:lang(ar-ae), .honor-late-recognition-component h1.subhead:lang(ar-ae), .honor-late-recognition-component h1.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h1.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h1.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h1.subhead { color: #a09b8c; } .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .honor-late-recognition-component h2:lang(ar-ae), .honor-late-recognition-component h2.subhead:lang(ar-ae), .honor-late-recognition-component h2.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h2.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h2.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h2.subhead { color: #a09b8c; } .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .honor-late-recognition-component h3:lang(ar-ae), .honor-late-recognition-component h3.subhead:lang(ar-ae), .honor-late-recognition-component h3.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h3.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h3.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h3.subhead { color: #a09b8c; } .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .honor-late-recognition-component h4:lang(ar-ae), .honor-late-recognition-component h4.subhead:lang(ar-ae), .honor-late-recognition-component h4.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h4.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h4.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h4.subhead { color: #a09b8c; } .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component ul.title-list li { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .honor-late-recognition-component h5:lang(ar-ae), .honor-late-recognition-component h5.subhead:lang(ar-ae), .honor-late-recognition-component h5.preserve-case:lang(ar-ae), .honor-late-recognition-component ul.title-list li:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component ul.title-list li { letter-spacing: 0.0375em; } .honor-late-recognition-component h5.preserve-case:lang(ar-ae), .honor-late-recognition-component ul.title-list li:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h5.subhead { color: #a09b8c; } .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-title { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .honor-late-recognition-component h6:lang(ja-jp), .honor-late-recognition-component h6.subhead:lang(ja-jp), .honor-late-recognition-component h6.preserve-case:lang(ja-jp), .honor-late-recognition-title:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component h6:lang(ar-ae), .honor-late-recognition-component h6.subhead:lang(ar-ae), .honor-late-recognition-component h6.preserve-case:lang(ar-ae), .honor-late-recognition-title:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h6.preserve-case { letter-spacing: 0.0375em; } .honor-late-recognition-component h6.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h6.subhead { color: #a09b8c; } .honor-late-recognition-component p { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component p:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component p:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component .lol-typekit-label { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component .lol-typekit-label:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component .lol-typekit-label:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-header { color: #a09b8c; font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component .lol-typekit-value:lang(ja-jp), .honor-late-recognition-header:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component .lol-typekit-value:lang(ar-ae), .honor-late-recognition-header:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component a:link:lang(ja-jp), .honor-late-recognition-component a:visited:lang(ja-jp), .honor-late-recognition-component a:link.display:lang(ja-jp), .honor-late-recognition-component a:visited.display:lang(ja-jp), .honor-late-recognition-component a:link.external:lang(ja-jp), .honor-late-recognition-component a:visited.external:lang(ja-jp), .honor-late-recognition-component a:link.external-display:lang(ja-jp), .honor-late-recognition-component a:visited.external-display:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component a:link:lang(ar-ae), .honor-late-recognition-component a:visited:lang(ar-ae), .honor-late-recognition-component a:link.display:lang(ar-ae), .honor-late-recognition-component a:visited.display:lang(ar-ae), .honor-late-recognition-component a:link.external:lang(ar-ae), .honor-late-recognition-component a:visited.external:lang(ar-ae), .honor-late-recognition-component a:link.external-display:lang(ar-ae), .honor-late-recognition-component a:visited.external-display:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display { color: #cdbe91; } .honor-late-recognition-component a:link:hover, .honor-late-recognition-component a:visited:hover, .honor-late-recognition-component a:link.display:hover, .honor-late-recognition-component a:visited.display:hover, .honor-late-recognition-component a:link.hover, .honor-late-recognition-component a:visited.hover, .honor-late-recognition-component a:link.display.hover, .honor-late-recognition-component a:visited.display.hover { color: #f0e6d2; } .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display { color: #0596aa; text-decoration: none; } .honor-late-recognition-component a:link.external:hover, .honor-late-recognition-component a:visited.external:hover, .honor-late-recognition-component a:link.external-display:hover, .honor-late-recognition-component a:visited.external-display:hover, .honor-late-recognition-component a:link.external.hover, .honor-late-recognition-component a:visited.external.hover, .honor-late-recognition-component a:link.external-display.hover, .honor-late-recognition-component a:visited.external-display.hover { color: #cdfafa; } .honor-late-recognition-component a:link.external:after, .honor-late-recognition-component a:visited.external:after, .honor-late-recognition-component a:link.external-display:after, .honor-late-recognition-component a:visited.external-display:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-navigation/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .honor-late-recognition-component a:link.external:lang(ar-ae):after, .honor-late-recognition-component a:visited.external:lang(ar-ae):after, .honor-late-recognition-component a:link.external-display:lang(ar-ae):after, .honor-late-recognition-component a:visited.external-display:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .honor-late-recognition-component a:link.external:hover:after, .honor-late-recognition-component a:visited.external:hover:after, .honor-late-recognition-component a:link.external-display:hover:after, .honor-late-recognition-component a:visited.external-display:hover:after { background-color: #cdfafa; } .honor-late-recognition-component .lol-typekit-value { color: #f0e6d2; } .honor-late-recognition-component { box-sizing: border-box; /* * headings */ /* * dividers / separators */ /* * paragraph styling */ /* * For paragraphs that are direct children of the content block, * and which are the first or last element in that block, * we account for the extra line-height spacing of the text. */ /* * default ul title-list styles */ /* * value list table */ /* * For tables which are direct children of the content block, * and which are the first or last element in that block, * we account for the extra line-height spacing within the rows. */ /* * typography clases */ } .honor-late-recognition-component > h1:first-child, .honor-late-recognition-component > h2:first-child, .honor-late-recognition-component > h3:first-child, .honor-late-recognition-component > h4:first-child, .honor-late-recognition-component > h5:first-child, .honor-late-recognition-component > h6:first-child { margin-top: -3px; } .honor-late-recognition-component h1, .honor-late-recognition-component h2, .honor-late-recognition-component h3, .honor-late-recognition-component h4, .honor-late-recognition-component h5, .honor-late-recognition-component h6 { margin: 0; } .honor-late-recognition-component h1 + p, .honor-late-recognition-component h2 + p, .honor-late-recognition-component h3 + p, .honor-late-recognition-component h4 + p, .honor-late-recognition-component h5 + p, .honor-late-recognition-component h6 + p { margin-top: 2px; } .honor-late-recognition-component hr.heading-spacer { border: none; height: 12px; margin: 0px; } .honor-late-recognition-component p { margin: 0; margin-bottom: 8px; } .honor-late-recognition-component p:last-child { margin-bottom: 0; } .honor-late-recognition-component > p:first-child { margin-top: -2px; } .honor-late-recognition-component > p:last-child { margin-bottom: -2px; } .honor-late-recognition-component ul.title-list { list-style-type: none; margin: 0; padding: 0; } .honor-late-recognition-component table.lol-uikit-list-table { box-sizing: border-box; display: table; width: 100%; padding: 0; margin: 0; text-align: left; border-collapse: collapse; } .honor-late-recognition-component table.lol-uikit-list-table > tbody > tr, .honor-late-recognition-component table.lol-uikit-list-table > tr { box-sizing: border-box; display: table-row; margin: 0; border-top: thin solid #1d1e1f; } .honor-late-recognition-component table.lol-uikit-list-table > tbody > tr:first-child, .honor-late-recognition-component table.lol-uikit-list-table > tr:first-child { border-top: none; } .honor-late-recognition-component table.lol-uikit-list-table > tbody > tr > td, .honor-late-recognition-component table.lol-uikit-list-table > tr > td { box-sizing: border-box; display: table-cell; vertical-align: top; padding: 7px 0px 6px 12px; } .honor-late-recognition-component table.lol-uikit-list-table > tbody > tr > td:first-child, .honor-late-recognition-component table.lol-uikit-list-table > tr > td:first-child { padding-left: 0px; } .honor-late-recognition-component table.lol-uikit-list-table > tbody > tr:first-child > td, .honor-late-recognition-component table.lol-uikit-list-table > tr:first-child > td { padding-top: 0; } .honor-late-recognition-component table.lol-uikit-list-table > tbody > tr:last-child > td, .honor-late-recognition-component table.lol-uikit-list-table > tr:last-child > td { padding-bottom: 0; } .honor-late-recognition-component > table.lol-uikit-list-table:first-child { margin-top: -3px; } .honor-late-recognition-component > table.lol-uikit-list-table:last-child { margin-bottom: -3px; } .honor-late-recognition-component { display: block; width: 296px; text-align: left; background-image: url("/fe/lol-honor/assets/Honor_Late_Notification_Backdrop.png"); background-repeat: no-repeat; background-position: top; } .honor-late-recognition-title { padding: 16px 30px 0 18px; text-align: left; display: flex; align-items: center; } .honor-late-recognition-header { padding: 8px 30px 0 18px; text-align: left; display: flex; align-items: center; } .honor-late-recognition-icon-container { margin: 6px 24px 12px 24px; } .honor-late-recognition-icon-text, .honor-late-recognition-icon-count { font-family: var(--font-body); } .honor-late-recognition-icon-text, .honor-late-recognition-icon-count { -webkit-user-select: none; } .honor-late-recognition-icon-text, .honor-late-recognition-icon-count { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .honor-late-recognition-icon-text, .honor-late-recognition-icon-count { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-icon-text:lang(ja-jp), .honor-late-recognition-icon-count:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-icon-text:lang(ar-ae), .honor-late-recognition-icon-count:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-icon-component { display: block; position: relative; height: 24px; } .honor-late-recognition-icon { height: 24px; width: 24px; position: absolute; top: 0; left: 0; } .honor-late-recognition-icon-text { position: absolute; height: 24px; left: 38px; display: flex; vertical-align: middle; align-items: center; } .honor-late-recognition-icon-count { position: absolute; top: 1px; left: 24px; } #honor-levelup-vignette-component .emblem-text .header, #honor-levelup-vignette-component .reward-container .header { font-family: var(--font-display); } #honor-levelup-vignette-component .emblem-text .body, #honor-levelup-vignette-component .reward-container .text { font-family: var(--font-body); } #honor-levelup-vignette-component .emblem-text .header, #honor-levelup-vignette-component .emblem-text .body, #honor-levelup-vignette-component .reward-container .header, #honor-levelup-vignette-component .reward-container .text { -webkit-user-select: none; } #honor-levelup-vignette-component .emblem-text .header, #honor-levelup-vignette-component .emblem-text .body, #honor-levelup-vignette-component .reward-container .header, #honor-levelup-vignette-component .reward-container .text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } #honor-levelup-vignette-component .emblem-text .header, #honor-levelup-vignette-component .reward-container .header { text-transform: uppercase; } #honor-levelup-vignette-component .emblem-text .header:lang(ko-kr), #honor-levelup-vignette-component .reward-container .header:lang(ko-kr), #honor-levelup-vignette-component .emblem-text .header:lang(ja-jp), #honor-levelup-vignette-component .reward-container .header:lang(ja-jp), #honor-levelup-vignette-component .emblem-text .header:lang(tr-tr), #honor-levelup-vignette-component .reward-container .header:lang(tr-tr), #honor-levelup-vignette-component .emblem-text .header:lang(el-gr), #honor-levelup-vignette-component .reward-container .header:lang(el-gr), #honor-levelup-vignette-component .emblem-text .header:lang(th-th), #honor-levelup-vignette-component .reward-container .header:lang(th-th), #honor-levelup-vignette-component .emblem-text .header:lang(zh-tw), #honor-levelup-vignette-component .reward-container .header:lang(zh-tw) { text-transform: none; } #honor-levelup-vignette-component .emblem-text .header, #honor-levelup-vignette-component .reward-container .header { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } #honor-levelup-vignette-component .emblem-text .header:lang(ar-ae), #honor-levelup-vignette-component .reward-container .header:lang(ar-ae) { letter-spacing: 0; } #honor-levelup-vignette-component .emblem-text .body, #honor-levelup-vignette-component .reward-container .text { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } #honor-levelup-vignette-component .emblem-text .body:lang(ar-ae), #honor-levelup-vignette-component .reward-container .text:lang(ar-ae) { letter-spacing: 0; } #honor-levelup-vignette-component { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } #honor-levelup-vignette-component .midground { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #honor-levelup-vignette-component .midground.transition { animation-fill-mode: both; animation-timing-function: ease-in-out; } #honor-levelup-vignette-component .midground.level0 { -webkit-filter: hue-rotate(270deg); } #honor-levelup-vignette-component .midground.level1 { -webkit-filter: hue-rotate(270deg); } #honor-levelup-vignette-component .midground.level2 { -webkit-filter: hue-rotate(270deg); } #honor-levelup-vignette-component .midground.level3 { -webkit-filter: hue-rotate(0deg); } #honor-levelup-vignette-component .midground.level3.transition { animation-name: midground-color-transition-3; animation-delay: 1.32s; animation-duration: 0.78s; } #honor-levelup-vignette-component .midground.level4 { -webkit-filter: hue-rotate(90deg); } #honor-levelup-vignette-component .midground.level4.transition { animation-name: midground-color-transition-4; animation-delay: 1.42s; animation-duration: 1.46s; } #honor-levelup-vignette-component .midground.level5 { -webkit-filter: hue-rotate(200deg) brightness(0.85) saturate(1.75); } #honor-levelup-vignette-component .midground.level5.transition { animation-name: midground-color-transition-5; animation-delay: 2.06s; animation-duration: 2.57s; } #honor-levelup-vignette-component .foreground { animation-delay: 0s; animation-duration: 0.5s; } #honor-levelup-vignette-component .foreground.hidden { opacity: 0; } #honor-levelup-vignette-component .honor-video { position: absolute; pointer-events: none; margin: auto; top: 0; bottom: 0; right: 0; left: 0; } #honor-levelup-vignette-component .honor-video.emblem { width: 448px; height: 418px; top: -54px; } #honor-levelup-vignette-component .honor-video.emblem.level0 { left: 4px; top: 45px; } #honor-levelup-vignette-component .honor-video.emblem.level1 { left: -4px; top: 0; } #honor-levelup-vignette-component .honor-video.emblem.level2 { left: -16px; } #honor-levelup-vignette-component .honor-video.emblem.level3 { left: -15px; } #honor-levelup-vignette-component .honor-video.emblem.level4 { left: -12px; } #honor-levelup-vignette-component .honor-video.emblem.level5 { left: 11px; top: -66px; } #honor-levelup-vignette-component .honor-video.checkpoint { width: 600px; height: 650px; top: 10px; left: 4px; } #honor-levelup-vignette-component .honor-video.outro-smoke { width: 100%; height: 100%; top: -4px; bottom: 4px; } #honor-levelup-vignette-component .honor-video.outro-smoke.level0 { -webkit-filter: hue-rotate(0deg); } #honor-levelup-vignette-component .honor-video.outro-smoke.level1 { -webkit-filter: hue-rotate(0deg); } #honor-levelup-vignette-component .honor-video.outro-smoke.level2 { -webkit-filter: hue-rotate(0deg); } #honor-levelup-vignette-component .honor-video.outro-smoke.level3 { -webkit-filter: hue-rotate(90deg); } #honor-levelup-vignette-component .honor-video.outro-smoke.level4 { -webkit-filter: hue-rotate(160deg); } #honor-levelup-vignette-component .honor-video.outro-smoke.level5 { -webkit-filter: hue-rotate(270deg) brightness(0.75) saturate(3); } #honor-levelup-vignette-component .honor-video.outro-smoke.vignette-small { transform: scaleY(1); } #honor-levelup-vignette-component .honor-video.outro-smoke.vignette-medium { transform: scaleY(1); } #honor-levelup-vignette-component .honor-video.outro-smoke.vignette-large { transform: scaleY(1); } #honor-levelup-vignette-component .frame-container { position: absolute; margin: auto; width: 600px; height: 650px; top: 10px; bottom: 0; right: 0; left: 4px; } #honor-levelup-vignette-component .frame-container .frame { width: 600px; height: 650px; } #honor-levelup-vignette-component .embellishment-container { position: absolute; margin: auto; width: 600px; height: 650px; top: 0; bottom: 0; right: 0; left: 0; } #honor-levelup-vignette-component .embellishment-container.level2 { top: -64px; } #honor-levelup-vignette-component .embellishment-container.level3 { top: -14px; } #honor-levelup-vignette-component .embellishment-container.level4 { top: 29px; } #honor-levelup-vignette-component .embellishment { width: 600px; height: 650px; animation-delay: 2s; animation-duration: 2s; } #honor-levelup-vignette-component .emblem-text { position: absolute; margin: auto; height: 0; width: 100%; top: 0; bottom: 0; right: 0; left: 0; animation-delay: 3.1s; animation-duration: 0.3s; } #honor-levelup-vignette-component .emblem-text .header { position: absolute; bottom: -194px; left: 0; right: 0; text-align: center; } #honor-levelup-vignette-component .emblem-text .body { position: absolute; bottom: -224px; left: 0; right: 0; text-align: center; } #honor-levelup-vignette-component .reward-container { position: absolute; margin: auto; height: 0; width: 100%; top: 0; bottom: 0; right: 0; left: 0; animation-delay: 0.75s; animation-duration: 0.75s; } #honor-levelup-vignette-component .reward-container.low-spec { animation-delay: 0.25s; animation-duration: 0.75s; } #honor-levelup-vignette-component .reward-container .reward { position: absolute; margin: auto; height: 256px; width: 256px; top: -32px; bottom: 0; right: 0; left: 0; } #honor-levelup-vignette-component .reward-container .reward.small { height: 192px; width: 192px; top: -48px; } #honor-levelup-vignette-component .reward-container .reward.large { height: 512px; width: 512px; top: -64px; } #honor-levelup-vignette-component .reward-container .header { position: absolute; top: 82px; left: 0; right: 0; text-align: center; } #honor-levelup-vignette-component .reward-container .header.vignette-medium { top: 107px; } #honor-levelup-vignette-component .reward-container .header.vignette-large { top: 127px; } #honor-levelup-vignette-component .reward-container .text { position: absolute; top: 117px; left: 0; right: 0; margin: auto; width: 450px; text-align: center; } #honor-levelup-vignette-component .reward-container .text.vignette-medium { top: 145px; } #honor-levelup-vignette-component .reward-container .text.vignette-large { top: 165px; } #honor-levelup-vignette-component .low-spec-emblem { position: absolute; margin: auto; height: 300px; width: 300px; top: 0; bottom: 0; right: 0; left: 0; } #honor-levelup-vignette-component .low-spec-emblem.level0 { top: -95px; } #honor-levelup-vignette-component .low-spec-emblem.level1 { top: -95px; } #honor-levelup-vignette-component .low-spec-emblem.level2 { top: -119px; height: 275px; width: 275px; } #honor-levelup-vignette-component .low-spec-emblem.level3 { top: -108px; height: 304px; width: 304px; } #honor-levelup-vignette-component .low-spec-emblem.level4 { top: -103px; height: 345px; width: 345px; } #honor-levelup-vignette-component .low-spec-emblem.level5 { top: -103px; height: 377px; width: 377px; } #honor-levelup-vignette-component .low-spec-checkpoint { position: absolute; margin: auto; height: 500px; width: 500px; top: 0; bottom: 0; right: 0; left: 0; } #honor-levelup-vignette-component .low-spec-checkpoint.level2 { top: 162px; height: 420px; width: 420px; } #honor-levelup-vignette-component .low-spec-checkpoint.level3 { top: 206px; } #honor-levelup-vignette-component .low-spec-checkpoint.level4 { top: 245px; height: 450px; width: 450px; } #honor-levelup-vignette-component .fade-in { animation-name: fade-in; animation-fill-mode: both; animation-timing-function: ease-in; } #honor-levelup-vignette-component .fade-out { animation-name: fade-out; animation-fill-mode: both; animation-timing-function: ease-in; animation-delay: 0.5s; animation-duration: 0.75s; } #honor-levelup-vignette-component .fade-out.low-spec { animation-delay: 0s; } @-moz-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes midground-color-transition-3 { 0% { -webkit-filter: hue-rotate(270deg); } 100% { -webkit-filter: hue-rotate(360deg); } } @-webkit-keyframes midground-color-transition-3 { 0% { -webkit-filter: hue-rotate(270deg); } 100% { -webkit-filter: hue-rotate(360deg); } } @-o-keyframes midground-color-transition-3 { 0% { -webkit-filter: hue-rotate(270deg); } 100% { -webkit-filter: hue-rotate(360deg); } } @keyframes midground-color-transition-3 { 0% { -webkit-filter: hue-rotate(270deg); } 100% { -webkit-filter: hue-rotate(360deg); } } @-moz-keyframes midground-color-transition-4 { 0% { -webkit-filter: hue-rotate(0deg); } 100% { -webkit-filter: hue-rotate(90deg); } } @-webkit-keyframes midground-color-transition-4 { 0% { -webkit-filter: hue-rotate(0deg); } 100% { -webkit-filter: hue-rotate(90deg); } } @-o-keyframes midground-color-transition-4 { 0% { -webkit-filter: hue-rotate(0deg); } 100% { -webkit-filter: hue-rotate(90deg); } } @keyframes midground-color-transition-4 { 0% { -webkit-filter: hue-rotate(0deg); } 100% { -webkit-filter: hue-rotate(90deg); } } @-moz-keyframes midground-color-transition-5 { 0% { -webkit-filter: hue-rotate(90deg); } 100% { -webkit-filter: hue-rotate(200deg) brightness(0.85) saturate(1.75); } } @-webkit-keyframes midground-color-transition-5 { 0% { -webkit-filter: hue-rotate(90deg); } 100% { -webkit-filter: hue-rotate(200deg) brightness(0.85) saturate(1.75); } } @-o-keyframes midground-color-transition-5 { 0% { -webkit-filter: hue-rotate(90deg); } 100% { -webkit-filter: hue-rotate(200deg) brightness(0.85) saturate(1.75); } } @keyframes midground-color-transition-5 { 0% { -webkit-filter: hue-rotate(90deg); } 100% { -webkit-filter: hue-rotate(200deg) brightness(0.85) saturate(1.75); } } .simple-dialog-messages-celebration-title { font-family: var(--font-display); } .simple-dialog-messages-celebration-description { font-family: var(--font-body); } .simple-dialog-messages-celebration-title, .simple-dialog-messages-celebration-description { -webkit-user-select: none; } .simple-dialog-messages-celebration-title, .simple-dialog-messages-celebration-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .simple-dialog-messages-celebration-title { text-transform: uppercase; } .simple-dialog-messages-celebration-title:lang(ko-kr), .simple-dialog-messages-celebration-title:lang(ja-jp), .simple-dialog-messages-celebration-title:lang(tr-tr), .simple-dialog-messages-celebration-title:lang(el-gr), .simple-dialog-messages-celebration-title:lang(th-th), .simple-dialog-messages-celebration-title:lang(zh-tw) { text-transform: none; } .simple-dialog-messages-celebration-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .simple-dialog-messages-celebration-title:lang(ar-ae) { letter-spacing: 0; } .simple-dialog-messages-celebration-description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .simple-dialog-messages-celebration-description:lang(ja-jp) { font-size: 13px; } .simple-dialog-messages-celebration-description:lang(ar-ae) { letter-spacing: 0; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text { font-family: var(--font-display); } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container { font-family: var(--font-body); } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text, .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container { -webkit-user-select: none; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text, .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text { text-transform: uppercase; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text:lang(ko-kr), .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text:lang(ja-jp), .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text:lang(tr-tr), .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text:lang(el-gr), .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text:lang(th-th), .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text:lang(zh-tw) { text-transform: none; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text:lang(ar-ae) { letter-spacing: 0; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container:lang(ja-jp) { font-size: 13px; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container:lang(ar-ae) { letter-spacing: 0; } .lol-loading-screen-container { position: fixed; display: flex; align-items: center; justify-content: center; flex-direction: column; pointer-events: all; top: 0; left: 0; z-index: 1; width: 1280px; height: 720px; direction: ltr; } .lol-loading-screen-container .hidden { display: none; } .lol-loading-screen-container .lol-loading-screen-spinner { position: absolute; content: ''; left: 50%; top: 50%; } .lol-loading-screen-container .lol-loading-screen-lol-icon { width: 140px; height: 150px; background-image: url("/fe/lol-static-assets/images/lol_icon.png"); background-repeat: no-repeat; background-size: contain; margin-top: 100px; margin-bottom: 10px; } .lol-loading-screen-container.lol-loading-screen-default-state { background: url("/fe/lol-static-assets/images/loading-bg.png") #010a13 no-repeat; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-spinner { background-image: url("/fe/lol-static-assets/images/inner-dashes.png"); background-size: contain; background-position: center; background-repeat: no-repeat; width: 504px; height: 504px; animation: loading-spinner 60s linear infinite; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-container { height: 150px; display: flex; flex-direction: column; align-items: center; position: relative; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text { color: #c8aa6e; margin-top: 6px; margin-bottom: 6px; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-progress-bar-container { position: relative; width: 200px; height: 16px; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-progress-bar-frame { position: absolute; width: 100%; height: 11px; border: thin solid #c8aa6e; border-radius: 6px; box-sizing: border-box; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-progress-bar-progress { position: absolute; width: 100%; height: 9px; top: 1px; background-image: linear-gradient(to right, #005a82 10%, #0a96aa 70%, #cdfafa 125%); transform-origin: left; transform: scaleX(0); border-radius: 6px; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container.hidden { display: none; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-item-container { width: inherit; display: flex; justify-content: space-between; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-item-value { color: #c8aa6e; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-cancel-queue-button { margin-top: 32px; min-width: 100px; } .lol-loading-screen-container.lol-loading-screen-gameflow-state { background-repeat: no-repeat; } .lol-loading-screen-container.lol-loading-screen-gameflow-state .lol-loading-screen-spinner { display: none; } @-moz-keyframes loading-spinner { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes loading-spinner { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @-o-keyframes loading-spinner { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes loading-spinner { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .lol-store-gift-celebration-title { font-family: var(--font-display); } .lol-store-gift-celebration-subtitle { font-family: var(--font-body); } .lol-store-gift-celebration-title, .lol-store-gift-celebration-subtitle { -webkit-user-select: none; } .lol-store-gift-celebration-title, .lol-store-gift-celebration-subtitle { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .lol-store-gift-celebration-title { text-transform: uppercase; } .lol-store-gift-celebration-title:lang(ko-kr), .lol-store-gift-celebration-title:lang(ja-jp), .lol-store-gift-celebration-title:lang(tr-tr), .lol-store-gift-celebration-title:lang(el-gr), .lol-store-gift-celebration-title:lang(th-th), .lol-store-gift-celebration-title:lang(zh-tw) { text-transform: none; } .lol-store-gift-celebration-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .lol-store-gift-celebration-title:lang(ar-ae) { letter-spacing: 0; } .lol-store-gift-celebration-subtitle { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .lol-store-gift-celebration-subtitle:lang(ar-ae) { letter-spacing: 0; } .lol-store-gift-toast { direction: ltr; cursor: pointer; display: flex; flex-direction: row; } .lol-store-gift-toast:hover .lol-store-gift-toast-image { border-image: linear-gradient(to top, #c89c3c 0%, #dcc188 50%, #e1c998 71%, #f0e6d8 100%) 1; } .lol-store-gift-toast .lol-store-gift-toast-image { background-image: url(/fe/lol-navigation/toast-gift-notification-icon.jpg); background-size: contain; background-position: center; background-repeat: no-repeat; width: 80px; height: 80px; border: thin solid transparent; border-image: linear-gradient(to top, #785b28 0%, #c89c3c 55%, #c8a355 71%, #c8aa6e 100%) 1; } .lol-store-gift-toast .lol-store-gift-toast-content { width: 200px; text-align: left ; } .lol-store-gift-toast .lol-store-gift-toast-title { margin-bottom: 5px; } .lol-store-gift-celebration-image { margin-top: 30px; } .lol-store-gift-celebration-image.lol-store-gift-celebration-image-generic { width: 198px; } .lol-store-gift-celebration-image.lol-store-gift-celebration-image-item { width: 125px; border-image: linear-gradient(to top, #785b28 0%, #c89c3c 55%, #c8a355 71%, #c8aa6e 100%) 1; border-style: solid; } .lol-store-gift-celebration-image.lol-store-gift-celebration-image-item.lol-store-gift-celebration-image-CHAMPION_SKIN { width: auto; height: 200px; margin-top: 0; } .lol-store-gift-celebration-image.lol-store-gift-celebration-image-item.lol-store-gift-celebration-image-HEXTECH_CRAFTING, .lol-store-gift-celebration-image.lol-store-gift-celebration-image-item.lol-store-gift-celebration-image-BUNDLES { border-image: none; border-style: none; width: 200px; height: 200px; margin-top: 0; margin-bottom: -25px; } .lol-store-gift-celebration-image.lol-store-gift-celebration-image-item.lol-store-gift-celebration-image-EMOTE { border-image: none; border-style: none; width: 140px; height: 140px; margin-top: 0; margin-bottom: 0px; } .lol-store-gift-celebration-title-container-generic { margin-top: -20px; } .lol-store-gift-celebration-item { color: #f0e6d2; font-weight: bold; } .lol-store-gift-toast-content.reward { padding: 0 0 0 18px ; } .lol-store-gift-toast-content.reward .get-rewards-button { display: inline-block; } .dialog-show-message .dialog-frame, .dialog-show-message .dialog-frame ul { font-family: var(--font-body); } .dialog-show-message .dialog-frame, .dialog-show-message .dialog-frame ul { font-family: var(--font-body); } .dialog-show-message .dialog-frame ul { -webkit-user-select: none; } .dialog-show-message .dialog-frame ul { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .dialog-show-message .dialog-frame ul { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .dialog-show-message .dialog-frame ul:lang(ja-jp) { font-size: 13px; } .dialog-show-message .dialog-frame ul:lang(ar-ae) { letter-spacing: 0; } .dialog-show-message .dialog-frame { direction: ltr; text-align: left ; } .dialog-show-message .dialog-frame .dialog-content { box-sizing: border-box; } .dialog-show-message .dialog-frame .dialog-text { display: flex; align-items: center; justify-content: center; } .dialog-show-message .dialog-frame h6 { text-align: left ; margin: 20px 0; } .dialog-show-message .dialog-frame ul { text-align: left ; margin: 20px 0; padding: 0 40px 0 20px ; } .dialog-show-message .dialog-frame .spinner { height: 40px; animation: spin 4s linear 0s infinite; } .dialog-show-message .dialog-frame lol-uikit-flat-button-group { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); } @-moz-keyframes spin { 100% { transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { transform: rotate(360deg); } } @-o-keyframes spin { 100% { transform: rotate(360deg); } } @keyframes spin { 100% { transform: rotate(360deg); } } .game-in-progress-container, .pre-end-of-game-container, .rcp-fe-lol-repair-while-in-game .repair-body .header { font-family: var(--font-display); } .rcp-fe-lol-repair-while-in-game .repair-body .body, .rcp-fe-lol-repair-while-in-game .repair-body .link a { font-family: var(--font-body); } .game-in-progress-container, .pre-end-of-game-container, .rcp-fe-lol-repair-while-in-game .repair-body .header, .rcp-fe-lol-repair-while-in-game .repair-body .body, .rcp-fe-lol-repair-while-in-game .repair-body .link a { -webkit-user-select: none; } .game-in-progress-container, .pre-end-of-game-container, .rcp-fe-lol-repair-while-in-game .repair-body .header, .rcp-fe-lol-repair-while-in-game .repair-body .body, .rcp-fe-lol-repair-while-in-game .repair-body .link a { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .game-in-progress-container, .pre-end-of-game-container, .rcp-fe-lol-repair-while-in-game .repair-body .header { text-transform: uppercase; } .game-in-progress-container:lang(ko-kr), .pre-end-of-game-container:lang(ko-kr), .rcp-fe-lol-repair-while-in-game .repair-body .header:lang(ko-kr), .game-in-progress-container:lang(ja-jp), .pre-end-of-game-container:lang(ja-jp), .rcp-fe-lol-repair-while-in-game .repair-body .header:lang(ja-jp), .game-in-progress-container:lang(tr-tr), .pre-end-of-game-container:lang(tr-tr), .rcp-fe-lol-repair-while-in-game .repair-body .header:lang(tr-tr), .game-in-progress-container:lang(el-gr), .pre-end-of-game-container:lang(el-gr), .rcp-fe-lol-repair-while-in-game .repair-body .header:lang(el-gr), .game-in-progress-container:lang(th-th), .pre-end-of-game-container:lang(th-th), .rcp-fe-lol-repair-while-in-game .repair-body .header:lang(th-th), .game-in-progress-container:lang(zh-tw), .pre-end-of-game-container:lang(zh-tw), .rcp-fe-lol-repair-while-in-game .repair-body .header:lang(zh-tw) { text-transform: none; } .game-in-progress-container, .pre-end-of-game-container { text-transform: none; } .rcp-fe-lol-repair-while-in-game .repair-body .header { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .rcp-fe-lol-repair-while-in-game .repair-body .header:lang(ar-ae) { letter-spacing: 0; } .game-in-progress-container, .pre-end-of-game-container { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .game-in-progress-container:lang(ar-ae), .pre-end-of-game-container:lang(ar-ae) { letter-spacing: 0; } .game-in-progress-container, .pre-end-of-game-container { letter-spacing: 0.025em; } .game-in-progress-container:lang(ar-ae), .pre-end-of-game-container:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-repair-while-in-game .repair-body .body { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-repair-while-in-game .repair-body .body:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-repair-while-in-game .repair-body .body:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-repair-while-in-game .repair-body .link a { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-repair-while-in-game .repair-body .link a:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-repair-while-in-game .repair-body .link a:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-repair-while-in-game .repair-body .link a { color: #0596aa; text-decoration: none; } .rcp-fe-lol-repair-while-in-game .repair-body .link a:hover, .rcp-fe-lol-repair-while-in-game .repair-body .link a.hover { color: #cdfafa; } .rcp-fe-lol-repair-while-in-game .repair-body .link a:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-navigation/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .rcp-fe-lol-repair-while-in-game .repair-body .link a:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .rcp-fe-lol-repair-while-in-game .repair-body .link a:hover:after { background-color: #cdfafa; } .rcp-fe-lol-reconnect, .rcp-fe-lol-game-in-progress, .rcp-fe-lol-pre-end-of-game, .rcp-fe-lol-waiting-for-stats, .rcp-fe-lol-repair-while-in-game > div { display: flex; height: 100%; width: 100%; justify-content: center; align-items: center; background-color: #000; direction: ltr; } .reconnect-container { display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; } .reconnect-container .button-container { display: flex; flex-direction: row; align-self: center; flex-grow: 0; } .reconnect-container .button-container .reconnect-to-game { padding: 0 10px 0 0 ; } .reconnect-container .button-container .quit.hidden { display: none; } .rcp-fe-lol-repair-while-in-game { height: 100%; width: 100%; position: relative; } .rcp-fe-lol-repair-while-in-game .repair-mask { width: 100%; height: 100%; position: absolute; z-index: 0; background-color: #010a13; opacity: 0.5; top: 0; left: 0; } .rcp-fe-lol-repair-while-in-game .repair-icon { width: 76px; height: 76px; position: relative; margin: 0 auto; z-index: 1; } .rcp-fe-lol-repair-while-in-game .repair-icon .wrench { position: absolute; z-index: 1; width: 100%; height: 100%; background-size: contain; background-image: url(/fe/lol-navigation/icon-repair.png); background-repeat: no-repeat; } .rcp-fe-lol-repair-while-in-game .repair-icon .spinner { position: absolute; z-index: 0; width: 100%; height: 100%; background-size: contain; background-image: url(/fe/lol-navigation/spinner-large.png); background-repeat: no-repeat; -webkit-animation: repairSpinnerSpin 5s linear infinite; } @-webkit-keyframes repairSpinnerSpin { 100% { -webkit-transform: rotate(360deg); } } .rcp-fe-lol-repair-while-in-game .repair-body { z-index: 1; text-align: center; width: 270px; } .rcp-fe-lol-repair-while-in-game .repair-body .header { margin: 18px 0; } .rcp-fe-lol-repair-while-in-game .repair-body hr { margin: 0; opacity: 0.5; border-top: thin solid #a09b8c; border-bottom: 0; } .rcp-fe-lol-repair-while-in-game .repair-body .body { margin: 18px 10px; } .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-header:lang(ar-ae) { letter-spacing: 0; } .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-content .first-touch-summoner-name-creation-subheader:lang(ar-ae) { letter-spacing: 0; } .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 .first-touch-summoner-name-creation-input:lang(ar-ae), .summoner-name-create-component .request-error-submit:lang(ar-ae), .summoner-name-create-component .first-touch-summoner-name-creation-error:lang(ar-ae) { letter-spacing: 0; } .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:lang(ar-ae) { letter-spacing: 0; } .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-navigation/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 .char-counter:lang(ar-ae) { letter-spacing: 0; } .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-static-assets/images/npe-ft-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-static-assets/images/npe-ft-summoner-name-create-warning-icon.png"); } .summoner-name-create-component .confirmed-icon { background: url("/fe/lol-static-assets/images/npe-ft-summoner-name-create-confirmed-icon.png"); } .summoner-name-create-component .unavailable-icon { background: url("/fe/lol-static-assets/images/npe-ft-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-image { 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-static-assets/images/npe-ft-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-static-assets/images/npe-ft-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-static-assets/images/npe-ft-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-static-assets/images/npe-ft-pip-hover.png"); } .npe-first-touch-champion-carousel-component .champion-selection-indicator .champion-pip:active:not(.champion-pip-selected) { background-image: url("/fe/lol-static-assets/images/npe-ft-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-name:lang(ar-ae) { letter-spacing: 0; } .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:lang(ar-ae) { letter-spacing: 0; } .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:lang(ar-ae) { letter-spacing: 0; } .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-navigation/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-static-assets/images/npe-ft-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: thin 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-static-assets/images/npe-ft-role-icon-assassin.png"); } .npe-first-touch-champion-information-component .champion-heading .champion-role-icon.fighter { background-image: url("/fe/lol-static-assets/images/npe-ft-role-icon-fighter.png"); } .npe-first-touch-champion-information-component .champion-heading .champion-role-icon.mage { background-image: url("/fe/lol-static-assets/images/npe-ft-role-icon-mage.png"); } .npe-first-touch-champion-information-component .champion-heading .champion-role-icon.marksman { background-image: url("/fe/lol-static-assets/images/npe-ft-role-icon-marksman.png"); } .npe-first-touch-champion-information-component .champion-heading .champion-role-icon.support { background-image: url("/fe/lol-static-assets/images/npe-ft-role-icon-support.png"); } .npe-first-touch-champion-information-component .champion-heading .champion-role-icon.tank { background-image: url("/fe/lol-static-assets/images/npe-ft-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 .first-touch-game-mode-select-header-title:lang(ar-ae) { letter-spacing: 0; } .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-title:lang(ar-ae) { letter-spacing: 0; } .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 .game-mode-select-tip:lang(ar-ae), .npe-first-touch-game-mode-select-component .game-mode-select-subtitle:lang(ar-ae) { letter-spacing: 0; } .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 .first-touch-game-mode-select-subheader:lang(ar-ae) { letter-spacing: 0; } .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 .game-mode-select-info:lang(ar-ae) { letter-spacing: 0; } .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-static-assets/images/npe-ft-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-static-assets/images/npe-ft-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-static-assets/images/npe-ft-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: thin 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-static-assets/images/npe-ft-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-static-assets/images/npe-ft-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-static-assets/images/npe-ft-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-static-assets/images/npe-ft-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 ; }