.garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-text, .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-title { font-family: var(--font-display); } .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-subtext, .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-description { font-family: var(--font-body); } .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-text, .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-subtext, .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-title, .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-description { -webkit-user-select: none; } .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-text, .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-subtext, .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-title, .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-text, .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-title { text-transform: uppercase; } .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-text:lang(ko-kr), .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-title:lang(ko-kr), .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-text:lang(ja-jp), .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-title:lang(ja-jp), .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-text:lang(tr-tr), .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-title:lang(tr-tr), .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-text:lang(el-gr), .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-title:lang(el-gr), .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-text:lang(th-th), .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-title:lang(th-th), .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-text:lang(zh-tw), .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-title:lang(zh-tw) { text-transform: none; } .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-text { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-text:lang(ar-ae) { letter-spacing: 0; } .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-title:lang(ar-ae) { letter-spacing: 0; } .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-subtext { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-subtext:lang(ar-ae) { letter-spacing: 0; } .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-description:lang(ja-jp) { font-size: 13px; } .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container .garena-oe-tutorial-modal-section-description:lang(ar-ae) { letter-spacing: 0; } .garena-oe-tutorial-modal { width: 1050px; height: 538px; position: relative; } .garena-oe-tutorial-modal-header { height: 60px; width: 100%; margin-top: 20px; text-align: center; } .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-text { margin-top: 14px; } .garena-oe-tutorial-modal-header .garena-oe-tutorial-modal-header-subtext { margin-top: 4px; } .garena-oe-tutorial-modal-main-content { height: 391px; margin-top: 15px; display: flex; flex-direction: row; justify-content: center; } .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section { height: 140px; width: 280px; position: relative; margin-left: 16px; height: 100%; display: block; } .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-image { position: absolute; width: 100%; } .garena-oe-tutorial-modal-main-content .garena-oe-tutorial-modal-section .garena-oe-tutorial-modal-section-text-container { text-align: center; position: absolute; width: 100%; bottom: 0; height: 90px; } .lol-tooltip-component { display: none; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm { text-transform: uppercase; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(ko-kr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(ja-jp), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(tr-tr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(el-gr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(th-th), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(zh-tw) { text-transform: none; } .decorated-footer { width: 100%; display: flex; flex-direction: row; justify-content: center; padding: 0 0 1px; height: 50px; box-sizing: border-box; } .decorated-footer .confirm-button-container { position: relative; display: flex; flex-direction: row; justify-content: center; padding-bottom: 15px; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm { display: flex; min-width: 160px; pointer-events: auto; } .decorated-footer .button-img { width: 30px; height: 30px; background-size: contain; background-color: transparent; border: 0px; outline: 0px; } .decorated-footer .button-img.close { background-image: url(/fe/lol-loot/button_close.png); } .decorated-footer .button-img.close:hover { background-image: url(/fe/lol-loot/button_close_hover.png); } .decorated-footer .button-img.close:active { background-image: url(/fe/lol-loot/button_close_click.png); } .decorated-footer .button-img.close:disabled { background-image: url(/fe/lol-loot/button_close_inactive.png); } .decorated-footer .decorated-footer-decoration { display: flex; position: relative; flex: 1 1 auto; height: 34px; margin-top: 15px; } .decorated-footer .decorated-footer-decoration.decorated-footer-left .button { position: absolute; top: -13px; right: 2px; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button, .basic-footer .confirm-button-container lol-uikit-flat-button { text-transform: uppercase; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(ko-kr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(ko-kr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(ja-jp), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(ja-jp), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(tr-tr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(tr-tr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(el-gr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(el-gr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(th-th), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(th-th), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(zh-tw), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(zh-tw) { text-transform: none; } .basic-footer { padding-left: 34px; padding-right: 35px; } .basic-footer { width: 100%; display: flex; flex-direction: row; justify-content: center; height: 48px; box-sizing: border-box; } .basic-footer .confirm-button-container { position: relative; display: flex; flex-direction: row; justify-content: center; flex-grow: 1; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button, .basic-footer .confirm-button-container lol-uikit-flat-button { display: flex; min-width: 160px; pointer-events: auto; margin-left: 10px; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button:last-child, .basic-footer .confirm-button-container lol-uikit-flat-button:last-child { margin-right: 10px; } .basic-footer .confirm-button-container::after, .basic-footer .confirm-button-container::before { display: flex; border-top: thin solid #785a28; margin-top: 16px; height: 1px; flex-grow: 1; content: " "; } .media-fader { position: absolute; top: 0; } .media-fader .media-fader-asset { -webkit-user-drag: none; } .media-swapper { position: relative; } .rcp-fe-lol-loot .loot-app-root { color: #fff; position: absolute; height: 718px; width: 1055px; cursor: default; } .loot-content-wrapper { position: absolute; height: 718px; width: 1055px; backface-visibility: hidden; } .loot-loading-screen { position: absolute; width: 1055px; height: 718px; background: #000; } .loot-backdrop { position: absolute; width: 1055px; height: 718px; overflow: hidden; } .loot-backdrop.background-static { background-image: url(/fe/lol-loot/background.jpg); background-repeat: no-repeat; } .loot-wrapper-component .loot-content-wrapper { opacity: 0; transition: opacity 0.5s ease; } .loot-wrapper-component.loaded .loot-content-wrapper { opacity: 1; } .loot-contents { position: absolute; top: 79px; width: 1051px; bottom: 0; overflow: hidden; display: flex; } .loot-contents .input-blocker { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: auto; } .loot-contents #inventory-input-blocker { width: calc(100% - 18px); } .loot-crafter-container { position: relative; margin-left: 16px; height: 561px; width: 619px; order: 1; } .loot-inventory-container { position: relative; margin-top: 20px; height: 540px; width: 402px; order: 0; } @-webkit-keyframes loot-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes loot-fade-out { from { opacity: 1; } to { opacity: 0; } } .loot-item .quantity-text-container, .loot-item .series-number { font-family: var(--font-display); } .loot-item .quantity-text-container, .loot-item .series-number { -webkit-user-select: none; } .loot-item .quantity-text-container, .loot-item .series-number { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .loot-item .quantity-text-container, .loot-item .series-number { text-transform: uppercase; } .loot-item .quantity-text-container:lang(ko-kr), .loot-item .series-number:lang(ko-kr), .loot-item .quantity-text-container:lang(ja-jp), .loot-item .series-number:lang(ja-jp), .loot-item .quantity-text-container:lang(tr-tr), .loot-item .series-number:lang(tr-tr), .loot-item .quantity-text-container:lang(el-gr), .loot-item .series-number:lang(el-gr), .loot-item .quantity-text-container:lang(th-th), .loot-item .series-number:lang(th-th), .loot-item .quantity-text-container:lang(zh-tw), .loot-item .series-number:lang(zh-tw) { text-transform: none; } .loot-item .quantity-text-container, .loot-item .series-number { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .loot-item .quantity-text-container:lang(ja-jp), .loot-item .series-number:lang(ja-jp) { font-size: 13px; } .loot-item .quantity-text-container:lang(ar-ae), .loot-item .series-number:lang(ar-ae) { letter-spacing: 0; } .loot-item { position: relative; display: inline-block; float: left ; width: 69px; height: 69px; margin-right: 12px; margin-left: 2px; margin-bottom: 16px; cursor: pointer; } .loot-item.hidden { display: none; } .loot-item .new-state { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; transform: translate(-50%, -50%); pointer-events: none; } .loot-item .tag-icon { position: absolute; bottom: -3px; left: -3px; height: 20px; width: 20px; pointer-events: none; } .loot-item .tag-icon.COMPANION { visibility: hidden; } .loot-item .rarity-icon { position: absolute; width: 67px; height: 32px; bottom: -30px; pointer-events: none; transform: translate(-50%, -50%); left: 50%; } .loot-item .quantity-background { position: absolute; height: 100%; width: 100%; background-image: url("/fe/lol-loot/assets/border_images/quantity_background.png"); background-size: contain; pointer-events: none; } .loot-item .quantity-text-container, .loot-item .series-number { text-align: right; position: absolute; bottom: 3px; right: 4px; color: #cdbe91; font-size: 13px; font-weight: 500; text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px; -webkit-font-smoothing: antialiased; -webkit-user-select: none; pointer-events: none; } .loot-item .quantity-text-container.champion_token_6, .loot-item .series-number.champion_token_6 { width: 100%; text-align: center; right: 0; bottom: -2px; } .loot-item .quantity-text-container.champion_token_7, .loot-item .series-number.champion_token_7 { width: 100%; text-align: center; right: 0; bottom: -2px; } .loot-item .series-number { right: 0; left: 0; text-align: center; } .loot-item .quantity-text-used { color: #ff2345; } .loot-item .loot-item-visual-container { width: 100%; } .loot-item .visual-state { position: absolute; top: 0px; bottom: 0px; left: 0; right: 0; pointer-events: none; overflow: hidden; } .loot-item .visual-state.slotted.CHAMPION_TOKEN_6 video { -webkit-mask-image: url("/fe/lol-loot/assets/border_images/select_mask_champion_token_6.png"); -webkit-mask-repeat: no-repeat; } .loot-item .visual-state.slotted.CHAMPION_TOKEN_7 video { -webkit-mask-image: url("/fe/lol-loot/assets/border_images/select_mask_champion_token_7.png"); -webkit-mask-repeat: no-repeat; } .loot-item .visual-state.invalid { background-color: rgba(0,0,0,0.5); } .loot-item .visual-state .context-menu-video-loop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .loot-item-visual { width: 100%; height: 100%; pointer-events: none; } .loot-item-visual .icon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; pointer-events: none; /** * Chrome < v51, don't use the combo: * webkit-filter + image/background-image */ opacity: 0.9; } .loot-item-visual .icon.visual-state- {  opacity: 1; } .loot-item-visual .icon.visual-state-context-menu { opacity: 1; } .loot-item-visual .icon .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #000; opacity: 0.25; visibility: hidden; pointer-events: none; } .loot-item-visual .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .loot-item-visual .border { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; pointer-events: none; } .loot-item-visual .shard-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 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%); pointer-events: none; } .loot-item-visual .border-normal { visibility: visible; } .loot-item-visual .border-hover { visibility: hidden; } .loot-item-visual.interactive .icon { pointer-events: auto; cursor: pointer; } .loot-item-visual.interactive:hover:not(.visual-state-context-menu) .icon .overlay { visibility: visible; } .loot-item-visual.interactive:hover:not(.visual-state-context-menu) .border-normal { visibility: hidden; } .loot-item-visual.interactive:hover:not(.visual-state-context-menu) .border-hover { visibility: visible; } .loot-item-visual.interactive.visual-state-context-menu .border-hover { visibility: visible; } .loot-item-tooltip .text-only .title, .loot-item-tooltip .loot-item-tooltip-header { font-family: var(--font-display); } .loot-item-tooltip, .loot-item-tooltip .loot-item-tooltip-value-container { font-family: var(--font-body); } .loot-item-tooltip, .loot-item-tooltip .text-only .title, .loot-item-tooltip .loot-item-tooltip-header, .loot-item-tooltip .loot-item-tooltip-value-container { -webkit-user-select: none; } .loot-item-tooltip, .loot-item-tooltip .text-only .title, .loot-item-tooltip .loot-item-tooltip-header, .loot-item-tooltip .loot-item-tooltip-value-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .loot-item-tooltip .text-only .title, .loot-item-tooltip .loot-item-tooltip-header { text-transform: uppercase; } .loot-item-tooltip .text-only .title:lang(ko-kr), .loot-item-tooltip .loot-item-tooltip-header:lang(ko-kr), .loot-item-tooltip .text-only .title:lang(ja-jp), .loot-item-tooltip .loot-item-tooltip-header:lang(ja-jp), .loot-item-tooltip .text-only .title:lang(tr-tr), .loot-item-tooltip .loot-item-tooltip-header:lang(tr-tr), .loot-item-tooltip .text-only .title:lang(el-gr), .loot-item-tooltip .loot-item-tooltip-header:lang(el-gr), .loot-item-tooltip .text-only .title:lang(th-th), .loot-item-tooltip .loot-item-tooltip-header:lang(th-th), .loot-item-tooltip .text-only .title:lang(zh-tw), .loot-item-tooltip .loot-item-tooltip-header:lang(zh-tw) { text-transform: none; } .loot-item-tooltip .text-only .title, .loot-item-tooltip .loot-item-tooltip-header { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .loot-item-tooltip .text-only .title:lang(ar-ae), .loot-item-tooltip .loot-item-tooltip-header:lang(ar-ae) { letter-spacing: 0; } .loot-item-tooltip, .loot-item-tooltip .loot-item-tooltip-value-container { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .loot-item-tooltip:lang(ja-jp), .loot-item-tooltip .loot-item-tooltip-value-container:lang(ja-jp) { font-size: 13px; } .loot-item-tooltip:lang(ar-ae), .loot-item-tooltip .loot-item-tooltip-value-container:lang(ar-ae) { letter-spacing: 0; } .loot-item-tooltip { width: 300px; background: #010a13; direction: ltr; } .loot-item-tooltip .text-only { min-width: 230px; padding: 18px; } .loot-item-tooltip .text-only .title { margin-bottom: 8px; } .loot-item-tooltip .loot-item-tooltip-hero { display: flex; flex-direction: column; justify-content: flex-end; position: relative; height: 200px; width: 100%; background-size: contain; background-position: top; background-repeat: no-repeat; } .loot-item-tooltip .loot-item-tooltip-hero.summonericon, .loot-item-tooltip .loot-item-tooltip-hero.wardskin, .loot-item-tooltip .loot-item-tooltip-hero.wardskin_rental, .loot-item-tooltip .loot-item-tooltip-hero.emote, .loot-item-tooltip .loot-item-tooltip-hero.emote_rental, .loot-item-tooltip .loot-item-tooltip-hero.tournamentlogo { height: 300px; transform: none; } .loot-item-tooltip .loot-item-tooltip-hero.summonericon .loot-item-tooltip-icon-vignette, .loot-item-tooltip .loot-item-tooltip-hero.wardskin .loot-item-tooltip-icon-vignette, .loot-item-tooltip .loot-item-tooltip-hero.wardskin_rental .loot-item-tooltip-icon-vignette, .loot-item-tooltip .loot-item-tooltip-hero.emote .loot-item-tooltip-icon-vignette, .loot-item-tooltip .loot-item-tooltip-hero.emote_rental .loot-item-tooltip-icon-vignette, .loot-item-tooltip .loot-item-tooltip-hero.tournamentlogo .loot-item-tooltip-icon-vignette { background: linear-gradient(to top, #010a13 0%, rgba(1,10,19,0) 55%); } .loot-item-tooltip .loot-item-tooltip-icon-vignette { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, #010a13 15%, rgba(1,10,19,0) 55%); } .loot-item-tooltip .loot-item-tooltip-hero-copy { position: absolute; left: 16px; right: 16px; bottom: 0; direction: ltr; } .loot-item-tooltip .loot-item-tooltip-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 14px ; } .loot-item-tooltip .loot-item-tooltip-value-container { display: flex; align-items: center; justify-content: space-between; width: 50px; color: #5b5a56; } .loot-item-tooltip .loot-item-tooltip-subheader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #5b5a56; } .loot-item-tooltip .loot-item-tooltip-type-container { display: flex; align-items: center; } .loot-item-tooltip .loot-item-tooltip-rarity-icon { height: 12px; object-fit: contain; margin-right: 3px; } .loot-item-tooltip .loot-item-tooltip-tag-container { display: flex; align-items: center; } .loot-item-tooltip .loot-item-tooltip-tag-icon { height: 12px; object-fit: contain; margin: 0 3px 0 0 ; } .loot-item-tooltip .loot-item-tooltip-rp-icon { background: url("/fe/lol-static-assets/images/icon-rp-24.png") no-repeat center center; background-size: contain; height: 12px; width: 12px; margin-left: -2px; } .loot-item-tooltip .loot-item-tooltip-body { display: flex; flex-direction: column; padding: 10px 16px; border-top: thin solid #1e2328; color: #5b5a56; } .loot-item-tooltip .loot-item-tooltip-essence-value-container { display: flex; justify-content: space-between; align-items: center; } .loot-item-tooltip .loot-item-tooltip-value-name { line-height: 20px; } .loot-item-tooltip .loot-item-tooltip-essence { display: flex; align-items: center; justify-content: space-between; width: 50px; } .loot-item-tooltip .loot-item-tooltip-essence-icon { height: 11px; object-fit: contain; } .loot-item-tooltip .loot-item-tooltip-status-container { display: flex; align-items: center; justify-content: center; position: absolute; top: -10px; left: 0; right: 0; } .loot-item-tooltip .loot-item-tooltip-status { display: flex; align-items: center; justify-content: center; height: 24px; border-width: 1px; border-style: solid; border-image: url("/fe/lol-loot/assets/tooltips/action-banner.png"); border-image-slice: 49%; border-image-width: 50% 24px; border-image-outset: 0 20px; box-sizing: border-box; } .loot-item-tooltip .loot-item-tooltip-status.ALREADY_OWNED, .loot-item-tooltip .loot-item-tooltip-status.ALREADY_RENTED, .loot-item-tooltip .loot-item-tooltip-status.CHAMPION_NOT_OWNED, .loot-item-tooltip .loot-item-tooltip-status.NOT_REDEEMABLE, .loot-item-tooltip .loot-item-tooltip-status.NOT_REDEEMABLE_RENTAL, .loot-item-tooltip .loot-item-tooltip-status.NOT_UPGRADE { color: #be1e37; } .loot-inventory .display-category-section-title .title-text { font-family: var(--font-display); } .loot-inventory .display-category-section-title .title-text { -webkit-user-select: none; } .loot-inventory .display-category-section-title .title-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .loot-inventory .display-category-section-title .title-text { text-transform: uppercase; } .loot-inventory .display-category-section-title .title-text:lang(ko-kr), .loot-inventory .display-category-section-title .title-text:lang(ja-jp), .loot-inventory .display-category-section-title .title-text:lang(tr-tr), .loot-inventory .display-category-section-title .title-text:lang(el-gr), .loot-inventory .display-category-section-title .title-text:lang(th-th), .loot-inventory .display-category-section-title .title-text:lang(zh-tw) { text-transform: none; } .loot-inventory .display-category-section-title .title-text { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .loot-inventory .display-category-section-title .title-text:lang(ja-jp) { font-size: 13px; } .loot-inventory .display-category-section-title .title-text:lang(ar-ae) { letter-spacing: 0; } .loot-inventory .display-category-section-title .title-text { color: #a09b8c; } .loot-inventory { display: flex; } .loot-inventory hr { width: 322px; margin: 2px 0 14px 0; height: 0; border: none; border-bottom: thin solid #785a28; } .loot-inventory .loot-display-category-tabs-container { position: relative; height: 100%; width: 70px; } .loot-inventory .loot-display-category-tabs-container hr { background: #785a28; } .loot-inventory .display-category-section { position: relative; height: auto; width: 332px; overflow: auto; } .loot-inventory .loot-inventory-content-container { width: 100%; } .loot-inventory .display-category-section-title .title-text { padding-top: 5px; padding-bottom: 2px; direction: ltr; padding-right: 0 ; } .loot-inventory .loot-filter-container { position: static; width: 100%; direction: ltr; } .loot-inventory .loot-inventory-grid { position: absolute; width: 100%; padding-bottom: 20px; } .loot-inventory .loot-inventory-grid.hidden { opacity: 0; pointer-events: none; } .loot-inventory .loot-inventory-grid-wrapper { position: relative; overflow-y: auto; overflow-x: hidden; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; will-change: auto; height: 470px; margin-top: 20px; transform: initial; } .loot-inventory .loot-inventory-grid-wrapper .loot-inventory-grid-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loot-inventory .loot-recipe-help-container { position: relative; height: 100%; width: 40px; margin-top: 10px; } .loot-inventory .loot-recipe-help-container::before { content: ''; position: relative; display: block; left: 18px; top: 0; height: 1px; width: 18px; background: #785a28; } .loot-inventory .loot-recipe-help-container .recipe-help-button { height: 23px; width: 23px; margin-top: 16px; margin-left: 16px; background: url("/fe/lol-loot/assets/flexible_crafter/button-crafter-tooltip.png") no-repeat; background-size: contain; cursor: pointer; } .loot-inventory .loot-recipe-help-container .recipe-help-button:hover { background: url("/fe/lol-loot/assets/flexible_crafter/button-crafter-tooltip-hover.png") no-repeat; background-size: contain; } .loot-crafter-state-machine { position: relative; height: 100%; width: 100%; } .recipe-menu-container .menu-title-container .menu-title { font-family: var(--font-display); } .recipe-menu-container .menu-title-container .menu-subtitle-container .menu-subtitle, .recipe-menu-container .menu-title-container .menu-subtitle-container .learn-more a.learn-more-link { font-family: var(--font-body); } .recipe-menu-container .menu-title-container .menu-title, .recipe-menu-container .menu-title-container .menu-subtitle-container .menu-subtitle, .recipe-menu-container .menu-title-container .menu-subtitle-container .learn-more a.learn-more-link { -webkit-user-select: none; } .recipe-menu-container .menu-title-container .menu-title, .recipe-menu-container .menu-title-container .menu-subtitle-container .menu-subtitle, .recipe-menu-container .menu-title-container .menu-subtitle-container .learn-more a.learn-more-link { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .recipe-menu-container .menu-title-container .menu-title { text-transform: uppercase; } .recipe-menu-container .menu-title-container .menu-title:lang(ko-kr), .recipe-menu-container .menu-title-container .menu-title:lang(ja-jp), .recipe-menu-container .menu-title-container .menu-title:lang(tr-tr), .recipe-menu-container .menu-title-container .menu-title:lang(el-gr), .recipe-menu-container .menu-title-container .menu-title:lang(th-th), .recipe-menu-container .menu-title-container .menu-title:lang(zh-tw) { text-transform: none; } .recipe-menu-container .menu-title-container .menu-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .recipe-menu-container .menu-title-container .menu-title:lang(ar-ae) { letter-spacing: 0; } .recipe-menu-container .menu-title-container .menu-subtitle-container .menu-subtitle { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .recipe-menu-container .menu-title-container .menu-subtitle-container .menu-subtitle:lang(ja-jp) { font-size: 13px; } .recipe-menu-container .menu-title-container .menu-subtitle-container .menu-subtitle:lang(ar-ae) { letter-spacing: 0; } .recipe-menu-container .menu-title-container .menu-subtitle-container .learn-more a.learn-more-link { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .recipe-menu-container .menu-title-container .menu-subtitle-container .learn-more a.learn-more-link:lang(ja-jp) { font-size: 13px; } .recipe-menu-container .menu-title-container .menu-subtitle-container .learn-more a.learn-more-link:lang(ar-ae) { letter-spacing: 0; } .recipe-menu-container .menu-title-container .menu-subtitle-container .learn-more a.learn-more-link { color: #0596aa; text-decoration: none; } .recipe-menu-container .menu-title-container .menu-subtitle-container .learn-more a.learn-more-link:hover, .recipe-menu-container .menu-title-container .menu-subtitle-container .learn-more a.learn-more-link.hover { color: #cdfafa; } .recipe-menu-container .menu-title-container .menu-subtitle-container .learn-more a.learn-more-link:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-loot/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .recipe-menu-container .menu-title-container .menu-subtitle-container .learn-more a.learn-more-link:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .recipe-menu-container .menu-title-container .menu-subtitle-container .learn-more a.learn-more-link:hover:after { background-color: #cdfafa; } .recipe-menu-container { position: absolute; height: 100%; width: 100%; direction: ltr; } .recipe-menu-container .menu-title-container { text-align: center; } .recipe-menu-container .menu-title-container .menu-title { margin-bottom: 0; margin-top: 23px; direction: ltr; } .recipe-menu-container .menu-title-container .menu-subtitle-container { margin-bottom: 16px; } .recipe-menu-container .menu-title-container .menu-subtitle-container .menu-subtitle { direction: ltr; } .recipe-menu-container .recipe-menu-content-wrapper { padding-bottom: 17px; } .recipe-menu-container .recipe-container { height: 550px; width: 636px; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .owned-text, .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .recipe-name, .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .recipe-price { font-family: var(--font-body); } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .owned-text, .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .recipe-name, .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .recipe-price { -webkit-user-select: none; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .owned-text, .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .recipe-name, .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .recipe-price { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .recipe-name { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .recipe-name:lang(ar-ae) { letter-spacing: 0; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .owned-text, .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .recipe-price { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .owned-text:lang(ja-jp), .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .recipe-price:lang(ja-jp) { font-size: 13px; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .owned-text:lang(ar-ae), .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .recipe-price:lang(ar-ae) { letter-spacing: 0; } .loot-crafter-recipe-menu-item { display: inline-block; margin-right: 3px; margin-bottom: 8px; direction: ltr; } .loot-crafter-recipe-menu-item .recipe-menu-item-container { max-height: 246px; max-width: 201px; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe { position: relative; height: 246px; width: 201px; text-align: center; overflow: hidden; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe.disabled { pointer-events: none; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe:hover { cursor: pointer; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe:hover .recipe-overlay { display: block; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-image { position: absolute; top: 0; left: 0; width: 201px; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .champ-image { position: absolute; top: 0; left: 0; transform: translate(-25%); height: 246px; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .small-item-image { position: absolute; top: 35px; transform: translate(-50%); width: 120px; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-vignette { background: linear-gradient(to bottom, rgba(0,0,0,0), 75%, rgba(0,0,0,0.7)); border: thin solid #2f3137; position: absolute; top: 0; left: 0; height: 244px; width: 199px; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-overlay { display: none; position: absolute; border-width: 1px; border-style: solid; border-image: linear-gradient(to bottom, #c8aa6e, #c89b3c) 1; background-color: rgba(1,10,19,0.6); top: 0; left: 0; height: 244px; width: 199px; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-overlay .craft-action-image { display: block; height: 55px; width: 55px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container { position: absolute; bottom: 11px; width: inherit; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .owned-text { color: #c8aa6e; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .recipe-name { color: #f0e6d2; display: block; padding: 0 12px 0 12px; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .recipe-price { margin-top: 4px; color: #c8aa6e; } .loot-crafter-recipe-menu-item .recipe-menu-item-container .recipe .recipe-details-container .recipe-price .currency-icon { height: 13px; width: 13px; margin: 0 4px 0 0 ; vertical-align: middle; } .loottable-tooltip .guaranteed-loottable-section .title, .loottable-tooltip .bonus-loottable-section .title { font-family: var(--font-display); } .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-name, .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-type, .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-name, .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-type, .single-item .text .recipe-tooltip-description, .single-item .text .recipe-name, .single-item .text .recipe-price .number { font-family: var(--font-body); } .loottable-tooltip .guaranteed-loottable-section .title, .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-name, .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-type, .loottable-tooltip .bonus-loottable-section .title, .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-name, .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-type, .single-item .text .recipe-tooltip-description, .single-item .text .recipe-name, .single-item .text .recipe-price .number { -webkit-user-select: none; } .loottable-tooltip .guaranteed-loottable-section .title, .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-name, .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-type, .loottable-tooltip .bonus-loottable-section .title, .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-name, .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-type, .single-item .text .recipe-tooltip-description, .single-item .text .recipe-name, .single-item .text .recipe-price .number { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .loottable-tooltip .guaranteed-loottable-section .title, .loottable-tooltip .bonus-loottable-section .title { text-transform: uppercase; } .loottable-tooltip .guaranteed-loottable-section .title:lang(ko-kr), .loottable-tooltip .bonus-loottable-section .title:lang(ko-kr), .loottable-tooltip .guaranteed-loottable-section .title:lang(ja-jp), .loottable-tooltip .bonus-loottable-section .title:lang(ja-jp), .loottable-tooltip .guaranteed-loottable-section .title:lang(tr-tr), .loottable-tooltip .bonus-loottable-section .title:lang(tr-tr), .loottable-tooltip .guaranteed-loottable-section .title:lang(el-gr), .loottable-tooltip .bonus-loottable-section .title:lang(el-gr), .loottable-tooltip .guaranteed-loottable-section .title:lang(th-th), .loottable-tooltip .bonus-loottable-section .title:lang(th-th), .loottable-tooltip .guaranteed-loottable-section .title:lang(zh-tw), .loottable-tooltip .bonus-loottable-section .title:lang(zh-tw) { text-transform: none; } .loottable-tooltip .guaranteed-loottable-section .title, .loottable-tooltip .bonus-loottable-section .title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .loottable-tooltip .guaranteed-loottable-section .title:lang(ar-ae), .loottable-tooltip .bonus-loottable-section .title:lang(ar-ae) { letter-spacing: 0; } .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-name, .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-type, .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-name, .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-type, .single-item .text .recipe-tooltip-description, .single-item .text .recipe-name, .single-item .text .recipe-price .number { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-name:lang(ja-jp), .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-type:lang(ja-jp), .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-name:lang(ja-jp), .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-type:lang(ja-jp), .single-item .text .recipe-tooltip-description:lang(ja-jp), .single-item .text .recipe-name:lang(ja-jp), .single-item .text .recipe-price .number:lang(ja-jp) { font-size: 13px; } .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-name:lang(ar-ae), .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-type:lang(ar-ae), .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-name:lang(ar-ae), .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-type:lang(ar-ae), .single-item .text .recipe-tooltip-description:lang(ar-ae), .single-item .text .recipe-name:lang(ar-ae), .single-item .text .recipe-price .number:lang(ar-ae) { letter-spacing: 0; } .loottable-tooltip .guaranteed-loottable-section .loottable-list, .loottable-tooltip .bonus-loottable-section .loottable-list { display: flex; margin: 0; padding: 0; list-style: none; } .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable, .loottable-tooltip .bonus-loottable-section .loottable-list .loottable { margin: 0px 10px 0px 0px; float: left; } .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-icon, .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-icon { border: thin solid #3c3c41; } .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-name, .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-name { font-size: 10pt; display: block; } .loottable-tooltip .guaranteed-loottable-section .loottable-list .loottable .loottable-type, .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .loottable-type { color: #5b5a56; display: block; padding-top: 3px; font-size: 10pt; font-weight: 400; } .menu-item-tooltip { display: flex; flex-direction: column; justify-content: center; } .loottable-tooltip { padding: 20px; display: block; direction: ltr; } .loottable-tooltip .guaranteed-loottable-section .title { padding: 0 0 20px 0; } .loottable-tooltip .guaranteed-loottable-section .loottable { width: 125px; } .loottable-tooltip .guaranteed-loottable-section .loottable .loottable-icon { height: 125px; width: 125px; } .loottable-tooltip .bonus-loottable-section .title { padding: 20px 0 20px 0; } .loottable-tooltip .bonus-loottable-section .loottable-list .loottable { width: 100px; } .loottable-tooltip .bonus-loottable-section .loottable-list .loottable .image .loottable-icon { height: 100px; width: 100px; } .single-item .image .recipe-icon { object-fit: cover; height: 233px; width: 233px; border-bottom: #463714 2px solid; } .single-item .text { padding: 10px 20px 10px 20px; height: 40px; position: relative; } .single-item .text .recipe-tooltip-description { display: block; font-size: 10pt; width: 193px; color: #f0e6d2; position: absolute; direction: ltr; right: auto ; } .single-item .text .recipe-name { float: left; display: block; font-size: 10pt; width: 130px; color: #f0e6d2; position: absolute; top: 50%; transform: translateY(-50%); direction: ltr; right: auto ; } .single-item .text .recipe-price { width: 63px; margin: 0px 0px 0px 130px ; float: left; position: absolute; top: 50%; transform: translateY(-50%); direction: ltr; } .single-item .text .recipe-price .number { float: right ; display: block; margin-top: 6px; font-size: 10pt; color: #cdbe91; } .single-item .text .recipe-price .price-icon { float: right ; height: 30px; width: 30px; padding: 0px 3px 0px 0px ; } .loot-crafter-reveal .content .text .title, .loot-crafter-reveal .reveal-counter-container .reveal-count { font-family: var(--font-display); } .loot-crafter-reveal .content .text .sub-title { font-family: var(--font-body); } .loot-crafter-reveal .content .text .title, .loot-crafter-reveal .content .text .sub-title, .loot-crafter-reveal .reveal-counter-container .reveal-count { -webkit-user-select: none; } .loot-crafter-reveal .content .text .title, .loot-crafter-reveal .content .text .sub-title, .loot-crafter-reveal .reveal-counter-container .reveal-count { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .loot-crafter-reveal .content .text .title, .loot-crafter-reveal .reveal-counter-container .reveal-count { text-transform: uppercase; } .loot-crafter-reveal .content .text .title:lang(ko-kr), .loot-crafter-reveal .reveal-counter-container .reveal-count:lang(ko-kr), .loot-crafter-reveal .content .text .title:lang(ja-jp), .loot-crafter-reveal .reveal-counter-container .reveal-count:lang(ja-jp), .loot-crafter-reveal .content .text .title:lang(tr-tr), .loot-crafter-reveal .reveal-counter-container .reveal-count:lang(tr-tr), .loot-crafter-reveal .content .text .title:lang(el-gr), .loot-crafter-reveal .reveal-counter-container .reveal-count:lang(el-gr), .loot-crafter-reveal .content .text .title:lang(th-th), .loot-crafter-reveal .reveal-counter-container .reveal-count:lang(th-th), .loot-crafter-reveal .content .text .title:lang(zh-tw), .loot-crafter-reveal .reveal-counter-container .reveal-count:lang(zh-tw) { text-transform: none; } .loot-crafter-reveal .content .text .title { text-transform: none; } .loot-crafter-reveal .content .text .title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .loot-crafter-reveal .content .text .title:lang(ar-ae) { letter-spacing: 0; } .loot-crafter-reveal .content .text .title { letter-spacing: 0.025em; } .loot-crafter-reveal .content .text .title:lang(ar-ae) { letter-spacing: 0; } .loot-crafter-reveal .reveal-counter-container .reveal-count { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .loot-crafter-reveal .reveal-counter-container .reveal-count:lang(ar-ae) { letter-spacing: 0; } .loot-crafter-reveal .content .text .sub-title { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .loot-crafter-reveal .content .text .sub-title:lang(ja-jp) { font-size: 13px; } .loot-crafter-reveal .content .text .sub-title:lang(ar-ae) { letter-spacing: 0; } .loot-crafter-reveal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .loot-crafter-reveal .content { width: 100%; height: 100%; } .loot-crafter-reveal .content #splash-animated { width: 100%; height: 100%; margin: 0; padding: 0; transform: scale(0.9, 0.9); } .loot-crafter-reveal .content #splash-animated .wardskin-backdrop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; width: 990px; overflow: hidden; background: url("/fe/lol-loot/assets/reveal_redeem/wardskin_backdrop.png") no-repeat; -webkit-mask-image: radial-gradient(circle farthest-side at 48% 48%, #fff 0%, transparent 65%); } .loot-crafter-reveal .content #splash-animated .wardskin-backdrop .wardskin-shadow { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); height: 280px; } .loot-crafter-reveal .content #splash-animated .splash { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; max-width: 1080px; overflow: hidden; } .loot-crafter-reveal .content #splash-animated .splash img { height: 100%; } .loot-crafter-reveal .content #splash-animated .splash img.shard { -webkit-mask-image: radial-gradient(circle farthest-side at 48% 48%, #fff 0%, transparent 50%); -webkit-filter: saturate(50%); } .loot-crafter-reveal .content #splash-animated .splash img.permanent { -webkit-mask-image: radial-gradient(circle farthest-side at 48% 48%, #fff 0%, transparent 65%); } .loot-crafter-reveal .content #splash-animated .splash img.wardskin { height: 50%; margin-top: 105px; } .loot-crafter-reveal .content #splash-animated .splash img.summonericon { position: absolute; transform: translate(-50%, -50%); top: 45%; left: 50%; height: 226px; } .loot-crafter-reveal .content #splash-animated .splash img.companion { -webkit-mask-image: radial-gradient(circle farthest-side at 50% 48%, #fff 60%, transparent 92%); } .loot-crafter-reveal .content #splash-animated .splash img.nondefaultsplash { -webkit-mask-image: radial-gradient(circle farthest-side at 48% 48%, #fff 80%, transparent 100%); height: 50%; margin-top: 105px; } .loot-crafter-reveal .content #splash-animated .splash .shard-overlay { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: #1b9eb0; opacity: 0.4; mix-blend-mode: hue; -webkit-mask-image: radial-gradient(circle farthest-side at 50% 48%, #aaa 0%, #fff 30%, transparent 50%); } .loot-crafter-reveal .content #splash-animated .splash .summonericon-overlay { position: relative; height: 414px; width: 414px; background: url("/fe/lol-loot/assets/reveal_redeem/summonericon_frame.png") no-repeat; margin-top: 44px; } .loot-crafter-reveal .content .rarity-icon { position: absolute; width: 100%; top: 396px; text-align: center; } .loot-crafter-reveal .content .rarity-icon #rarity-icon-image { display: none; } .loot-crafter-reveal .content .text { direction: ltr; position: absolute; bottom: 54px; width: 100%; text-align: center; white-space: nowrap; } .loot-crafter-reveal .content .text .title { margin-bottom: 4px; } .loot-crafter-reveal .content .text .sub-title { margin-top: 0; margin-bottom: 0; } .loot-crafter-reveal .content .tag-icon-container { position: absolute; bottom: 18px; width: 100%; text-align: center; } .loot-crafter-reveal .content .tag-icon-container .tag-icon { display: inline-block; pointer-events: auto; margin: 0 3px; } .loot-crafter-reveal .content .emblems-container { display: flex; position: absolute; justify-content: center; align-items: flex-start; width: 100%; bottom: 140px; } .loot-crafter-reveal .content .emblems-container img { width: 200px; } .loot-crafter-reveal .reveal-counter-container { position: absolute; width: 100%; bottom: -5px; text-align: center; } .loot-crafter-reveal .reveal-counter-container .pip { display: inline-block; width: 12px; height: 12px; margin: 0 3px; background: url(/fe/lol-loot/reveal_counter.png); } .loot-crafter-reveal .reveal-counter-container .pip.selected { background: url(/fe/lol-loot/reveal_counter_selected.png); } .loot-crafter-reveal .reveal-counter-container .pip.visited { opacity: 0.5; } .loot-crafter-reveal .reveal-counter-container .reveal-count { color: #a09b8c; } .loot-crafter-reveal .accept-button { position: absolute; left: 50%; transform: translateX(-50%); height: 34px; bottom: -50px; pointer-events: auto; } .loot-crafter-reveal .cancel-button { position: absolute; top: 50px; right: 40px; height: 30px; width: 30px; pointer-events: auto; cursor: pointer; background: url("/fe/lol-loot/assets/flexible_crafter/button-close.png") no-repeat; background-size: contain; } .loot-crafter-reveal .cancel-button:hover { background: url("/fe/lol-loot/assets/flexible_crafter/button-close-hover.png") no-repeat; } .loot-crafter-reveal-animations video, .loot-crafter-reveal-animations img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .loot-crafter-reveal-animations .reveal-rarity-low-spec-image { position: absolute; top: 419px; } #animated-loot-item-video-state-machine video { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); } .loot-crafter-slots-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; pointer-events: none; } .loot-crafter-slots-container #backdrop { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .loot-crafter-slots-container #slot-visuals { position: absolute; width: 100%; bottom: -35px; overflow: hidden; text-align: center; padding-top: 100px; } .loot-crafter-slots-container #slot-visuals .slot-wrapper { position: relative; display: inline-block; width: 69px; padding: 1px 7px 0 7px; font-size: 14px; } .loot-crafter-slots-container #slot-visuals .slot-wrapper .slot { position: relative; height: 69px; width: 100%; } .loot-crafter-slots-container #slot-visuals .tooltip { position: relative; display: inline-block; width: 30px; vertical-align: top; } .loot-crafter-slots-container #slot-visuals .tooltip .icon { width: 30px; height: 30px; pointer-events: auto; background: url("/fe/lol-loot/assets/flexible_crafter/button-crafter-tooltip.png") no-repeat; background-size: contain; } .loot-crafter-slots-container #slot-visuals .tooltip .icon:hover { background: url("/fe/lol-loot/assets/flexible_crafter/button-crafter-tooltip-hover.png") no-repeat; } .loot-crafter-slots-container #slot-visuals .no-tooltip { position: relative; display: inline-block; width: 30px; } .loot-crafter-slots-container #slot-visuals .close-button { position: relative; display: inline-block; width: 30px; vertical-align: top; } .loot-crafter-slots-container #slot-visuals .close-button .icon { height: 30px; width: 30px; cursor: pointer; pointer-events: auto; background: url("/fe/lol-loot/assets/flexible_crafter/button-close.png") no-repeat; background-size: contain; } .loot-crafter-slots-container #slot-visuals .close-button .icon:hover { background: url("/fe/lol-loot/assets/flexible_crafter/button-close-hover.png") no-repeat; } .loot-crafter-slots-animations { position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; overflow: hidden; } .loot-crafter-slots-animations video { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .recipe-hint-tooltip { font-family: var(--font-body); } .recipe-hint-tooltip { width: 250px; background: #010a13; font-size: 13px; color: #afaa9a; text-align: center; } .recipe-hint-tooltip .content { margin: 10px; } .series-number, .loot-crafter-slot-quantity-container { font-family: var(--font-display); } .series-number, .loot-crafter-slot-quantity-container { -webkit-user-select: none; } .series-number, .loot-crafter-slot-quantity-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .series-number, .loot-crafter-slot-quantity-container { text-transform: uppercase; } .series-number:lang(ko-kr), .loot-crafter-slot-quantity-container:lang(ko-kr), .series-number:lang(ja-jp), .loot-crafter-slot-quantity-container:lang(ja-jp), .series-number:lang(tr-tr), .loot-crafter-slot-quantity-container:lang(tr-tr), .series-number:lang(el-gr), .loot-crafter-slot-quantity-container:lang(el-gr), .series-number:lang(th-th), .loot-crafter-slot-quantity-container:lang(th-th), .series-number:lang(zh-tw), .loot-crafter-slot-quantity-container:lang(zh-tw) { text-transform: none; } .loot-crafter-slot-quantity-container { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .loot-crafter-slot-quantity-container:lang(ar-ae) { letter-spacing: 0; } .series-number { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .series-number:lang(ja-jp) { font-size: 13px; } .series-number:lang(ar-ae) { letter-spacing: 0; } .loot-crafter-item-slot-component { height: 100%; } .loot-crafter-slot { position: relative; width: 100%; height: 100%; } .loot-crafter-slot.empty { background: url("/fe/lol-loot/assets/flexible_crafter/socket_champ_Shard.png") no-repeat; background-size: cover; opacity: 0.75; } .loot-crafter-slot .loot-crafter-slot-glow { position: absolute; height: 100%; width: 100%; background: url("/fe/lol-loot/assets/flexible_crafter/slot_glow.png") no-repeat; background-size: cover; } .loot-crafter-slot .slot-animation { position: absolute; height: 100%; width: 100%; pointer-events: none; } .loot-crafter-slot .slot-animation #slot-intro video { top: 50%; left: 50%; transform: translate(-50%, -50%); } .loot-crafter-slot .slot-animation #slot-outro video { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 86px; } .series-number { position: absolute; right: 0; left: 0; bottom: 3px; text-align: center; color: #cdbe91; font-size: 13px; font-weight: 500; text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px; -webkit-font-smoothing: antialiased; -webkit-user-select: none; pointer-events: none; } .loot-crafter-slot-quantity-container { position: relative; width: 100%; margin-top: 10%; bottom: 0; text-align: center; white-space: nowrap; } .loot-crafter-slot-quantity-container .quantity-current { display: inline-block; color: #f00; } .loot-crafter-slot-quantity-container .quantity-current.full { color: #fff; } .loot-crafter-slot-item-removable-hitbox { position: absolute; height: 100%; width: 100%; pointer-events: auto; -webkit-animation: loot-fade-in 0.1s ease-in forwards; } .loot-recipe-milestone { color: #ff0; } .loot-recipe-milestone.is-claimed { color: #0ff; } .loot-milestones-final-counter { font-family: var(--font-display); } .loot-milestones-header-current-progress, .loot-milestones-progress-counter-of, .loot-milestones-header-time-remaining { font-family: var(--font-body); } .loot-milestones-header-current-progress, .loot-milestones-progress-counter-of, .loot-milestones-header-time-remaining, .loot-milestones-final-counter { -webkit-user-select: none; } .loot-milestones-header-current-progress, .loot-milestones-progress-counter-of, .loot-milestones-header-time-remaining, .loot-milestones-final-counter { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .loot-milestones-final-counter { text-transform: uppercase; } .loot-milestones-final-counter:lang(ko-kr), .loot-milestones-final-counter:lang(ja-jp), .loot-milestones-final-counter:lang(tr-tr), .loot-milestones-final-counter:lang(el-gr), .loot-milestones-final-counter:lang(th-th), .loot-milestones-final-counter:lang(zh-tw) { text-transform: none; } .loot-milestones-final-counter { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .loot-milestones-final-counter:lang(ar-ae) { letter-spacing: 0; } .loot-milestones-header-current-progress, .loot-milestones-progress-counter-of, .loot-milestones-header-time-remaining { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .loot-milestones-header-current-progress:lang(ar-ae), .loot-milestones-progress-counter-of:lang(ar-ae), .loot-milestones-header-time-remaining:lang(ar-ae) { letter-spacing: 0; } .loot-milestones-tracker { margin-bottom: 18px; } .loot-milestones-tracker.hide-on-craft { -webkit-animation: loot-fade-out 1s forwards; } .loot-milestones-tracker.hovering-craft-button .loot-milestones-final-counter { color: #fabe0a; text-shadow: 0 0 3px rgba(250,190,10,0.8); } .loot-milestones-tracker:not(.tracker-is-finished) .tracker-complete-message { display: none; } .loot-milestones-tracker-loaded-wrapper { -webkit-animation: loot-fade-in 1s forwards; } .loot-milestones-tracker-header { height: 26px; padding: 0 10px; } .loot-milestones-header-current-progress { float: left; color: #c8aa6e; } .loot-milestones-progress-counter { float: left; height: 26px; margin-right: 12px; } .loot-milestones-progress-counter-of { font-family: var(--font-display); color: #c89b3c; letter-spacing: 0.07em; } .tracker-complete-congrats { font-weight: 700; } .loot-milestones-header-time-remaining { position: relative; float: right; color: #c8aa6e; } .loot-milestones-header-time-remaining::before { content: ''; display: block; position: absolute; top: 3px; left: -18px; width: 12px; height: 12px; background: url("/fe/lol-static-assets/images/clock-icon.svg") no-repeat center center; } .loot-milestones-tracker-line-separator { position: relative; height: 1px; margin: 0 7px; background: #463714; } .loot-milestones-tracker-line-separator::before, .loot-milestones-tracker-line-separator::after { content: ''; display: block; position: absolute; top: -2px; width: 3px; height: 3px; border: 1px solid #463714; transform: rotate(45deg); } .loot-milestones-tracker-line-separator::before { left: -7px; } .loot-milestones-tracker-line-separator::after { right: -7px; } .loot-milestones-milestone-wrapper { height: 86px; padding: 20px 0; } .loot-milestones-radial-progress { position: relative; top: -17px; width: 51px; height: 51px; z-index: 1; } .loot-milestones-radial-progress .bottom, .loot-milestones-radial-progress .middle { width: 100%; height: 100%; border-radius: 50%; } .loot-milestones-radial-progress .bottom { border: 4px solid #0a323c; background: #010a13; box-sizing: border-box; } .loot-milestones-radial-progress .filled-progress { background: #0a96aa; } .loot-milestones-radial-progress .future-progress { background: #fabe0a; opacity: 0.8; } .loot-milestones-radial-progress .outer-ring { width: 59px; height: 59px; position: absolute; top: -4px; left: -4px; background-image: url("/fe/lol-loot/assets/loot_milestones/progress-bar-border.png"); } .loot-milestones-radial-progress .inner-circle { width: 37px; height: 37px; position: absolute; top: 7px; left: 7px; border-radius: 50%; background: #010a13; } .loot-milestones-final-counter { color: #cdbe91; font-weight: 400; line-height: 37px; text-align: center; transition: all 0.3s ease; } .milestones-ends-on-tooltip { font-family: var(--font-body); } .milestones-ends-on-tooltip { width: 250px; background: #010a13; font-size: 13px; color: #c8aa6e; text-align: center; } .milestones-ends-on-tooltip .content { padding: 10px; } .loot-recipe-ui-metered { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; } .loot-recipe-ui-metered .loot-meter-state-machine { height: 100%; width: 100%; } .loot-recipe-ui-metered .loot-meter-frame-intro-container, .loot-recipe-ui-metered .loot-meter-full-container, .loot-recipe-ui-metered .loot-meter-craft-outro-container, .loot-recipe-ui-metered .loot-meter-close-outro-container, .loot-recipe-ui-metered .loot-meter-output-image-container, .loot-recipe-ui-metered .loot-meter-idle-container { position: absolute; left: 0; bottom: 0; top: 0; right: 0; display: flex; align-items: center; justify-content: center; } .loot-recipe-ui-metered .loot-meter-idle-container { top: 1px; } .loot-recipe-ui-metered .loot-meter-output-image-container { bottom: 66px; } .loot-recipe-ui-metered .loot-meter-output-image { -webkit-mask-image: url("/fe/lol-loot/assets/flexible_crafter/Output_Image_Mask.png"); -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; height: 384px; animation: loot-fade-in 1s forwards; } .loot-recipe-ui-metered .loot-meter-frame-intro { margin-top: 6px; } .loot-recipe-ui-metered .meter-container { position: absolute; transform: translate(-50%, -50%); left: 50%; top: 45%; } .loot-recipe-ui-metered .meter-container.flip { transform: translate(-50%, -50%) scaleX(-1); } .loot-recipe-ui-metered .meter-container .meter-mask { position: relative; -webkit-mask-image: url("/fe/lol-loot/assets/flexible_crafter/loot_flexible_meter_reveal.png"); } .loot-recipe-ui-metered .meter-container .meter-mask .fill { -webkit-animation: loot-meter-rotate 1100ms forwards; -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1); } .loot-recipe-ui-metered .loot-meter-golden-frame { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } .loot-recipe-ui-metered .loot-meter-crest-container { position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: center; } .loot-recipe-ui-metered .loot-meter-button-container { position: absolute; display: flex; align-items: center; justify-content: center; top: 408px; width: 100%; } .loot-recipe-ui-meter-button { font-family: var(--font-display); } .loot-recipe-ui-meter-button { -webkit-user-select: none; } .loot-recipe-ui-meter-button { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .loot-recipe-ui-meter-button { text-transform: uppercase; } .loot-recipe-ui-meter-button:lang(ko-kr), .loot-recipe-ui-meter-button:lang(ja-jp), .loot-recipe-ui-meter-button:lang(tr-tr), .loot-recipe-ui-meter-button:lang(el-gr), .loot-recipe-ui-meter-button:lang(th-th), .loot-recipe-ui-meter-button:lang(zh-tw) { text-transform: none; } .loot-recipe-ui-meter-button { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .loot-recipe-ui-meter-button:lang(ar-ae) { letter-spacing: 0; } .loot-recipe-ui-meter-button .loot-meter-button-background, .loot-recipe-ui-meter-button .loot-meter-button-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .loot-recipe-ui-meter-button { display: flex; align-items: center; justify-content: center; position: relative; height: 44px; width: 142px; cursor: pointer; color: #cdbe91; animation: loot-fade-in 0.5s forwards; background: none; outline: none; border: none; } .loot-recipe-ui-meter-button:disabled { pointer-events: none; color: #3c3732; } .loot-recipe-ui-meter-button:disabled .loot-meter-button-background { background-image: url("/fe/lol-loot/assets/flexible_crafter/craftButton-disabled.png"); } .loot-recipe-ui-meter-button:hover { color: #f0e6d2; } .loot-recipe-ui-meter-button:hover .loot-meter-button-background { background-image: url("/fe/lol-loot/assets/flexible_crafter/craftButton-hover.png"); } .loot-recipe-ui-meter-button:active { color: #785a28; } .loot-recipe-ui-meter-button:active .loot-meter-button-background { background-image: url("/fe/lol-loot/assets/flexible_crafter/craftButton-down.png"); } .loot-recipe-ui-meter-button .loot-meter-button-background { position: absolute; height: 90px; width: 173px; background-image: url("/fe/lol-loot/assets/flexible_crafter/craftButton-up.png"); } .loot-crafter-open .translatedName { font-family: var(--font-display); } .loot-crafter-open .translatedName { -webkit-user-select: none; } .loot-crafter-open .translatedName { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .loot-crafter-open .translatedName { text-transform: uppercase; } .loot-crafter-open .translatedName:lang(ko-kr), .loot-crafter-open .translatedName:lang(ja-jp), .loot-crafter-open .translatedName:lang(tr-tr), .loot-crafter-open .translatedName:lang(el-gr), .loot-crafter-open .translatedName:lang(th-th), .loot-crafter-open .translatedName:lang(zh-tw) { text-transform: none; } .loot-crafter-open .translatedName { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .loot-crafter-open .translatedName:lang(ar-ae) { letter-spacing: 0; } .loot-crafter-open { height: 100%; width: 100%; } .loot-crafter-open.chest-should-hover .chest-animation { -webkit-animation: MoveUpDown 5s linear infinite; } .loot-crafter-open.has-milestone-tracker .chest-animation { height: calc(100% - 120px); } .loot-crafter-open.has-milestone-tracker .craft-button-wrapper { margin-bottom: 15px; } .loot-crafter-open .translatedName { position: absolute; top: 32px; width: 100%; z-index: 1; -webkit-animation: loot-fade-in 1s forwards; text-transform: uppercase; text-align: center; text-shadow: 2px 2px #000; } .loot-crafter-open .hextech-egg-lottie-frame { -webkit-animation: none; } .loot-crafter-open .hextech-egg-lottie-frame #egg-loop-video { position: absolute; left: -18px; } .loot-crafter-open .hextech-egg-lottie-frame .hextech-egg-lottie-container { position: absolute; left: 50%; top: 50%; } .loot-crafter-open .hextech-egg-lottie-frame .hextech-egg-lottie-container #hextech-egg-lottie { position: absolute; top: 0px; left: 0px; } .loot-crafter-open .hextech-egg-lottie-frame .hextech-egg-lottie-container #hexegg-emblem { top: -255px; left: -257px; position: absolute; } .loot-crafter-open .hextech-egg-lottie-frame .hextech-egg-lottie-container #hexegg-emblem.hide { opacity: 0; transition: opacity 1s linear; } .loot-crafter-open .hextech-egg-lottie-frame .hextech-egg-lottie-container #egg-vfx { position: absolute; top: -328px; left: -319px; } .loot-crafter-open .chest-animation { position: absolute; height: 100%; width: 100%; pointer-events: none; } .loot-crafter-open .chest-animation .static-chest-image, .loot-crafter-open .chest-animation #chest-video-state-machine video { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .crafter-bottom-content { position: absolute; bottom: -78px; left: 0; width: 100%; } .craft-button-wrapper { display: flex; min-height: 32px; justify-content: center; align-items: flex-start; margin-bottom: 30px; } .button-container { position: relative; height: 100%; margin: 0 10px; cursor: pointer; -webkit-animation: loot-fade-in 1s forwards; } @-moz-keyframes MoveUpDown { 0% { transform: translate3d(0px, 0px, 0px); animation-timing-function: ease-in-out; } 50% { transform: translate3d(0px, -10px, 0px); animation-timing-function: ease-in-out; } 100% { transform: translate3d(0px, 0px, 0px); animation-timing-function: ease-in-out; } } @-webkit-keyframes MoveUpDown { 0% { transform: translate3d(0px, 0px, 0px); animation-timing-function: ease-in-out; } 50% { transform: translate3d(0px, -10px, 0px); animation-timing-function: ease-in-out; } 100% { transform: translate3d(0px, 0px, 0px); animation-timing-function: ease-in-out; } } @-o-keyframes MoveUpDown { 0% { transform: translate3d(0px, 0px, 0px); animation-timing-function: ease-in-out; } 50% { transform: translate3d(0px, -10px, 0px); animation-timing-function: ease-in-out; } 100% { transform: translate3d(0px, 0px, 0px); animation-timing-function: ease-in-out; } } @keyframes MoveUpDown { 0% { transform: translate3d(0px, 0px, 0px); animation-timing-function: ease-in-out; } 50% { transform: translate3d(0px, -10px, 0px); animation-timing-function: ease-in-out; } 100% { transform: translate3d(0px, 0px, 0px); animation-timing-function: ease-in-out; } } .loot-recipe-ui-reroll { height: 100%; width: 100%; } .loot-recipe-ui-reroll .loot-reroll-state-machine { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; } .loot-recipe-ui-reroll .loot-reroll-state-machine uikit-video { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; display: flex; pointer-events: none; } .loot-recipe-ui-reroll .loot-reroll-inner-plate-container { position: absolute; top: calc(50% - 30px); left: 50%; -webkit-animation: inner-plate-spin 12000ms infinite linear; } @-moz-keyframes inner-plate-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes inner-plate-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes inner-plate-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes inner-plate-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loot-recipe-ui-reroll-button { height: 120px; width: 120px; margin-bottom: 58px; border-radius: 50%; cursor: pointer; } .loot-recipe-ui-reroll-button.reroll-button-disabled { cursor: default; } .loot-recipe-ui-reroll-button .loot-reroll-button-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .help-modal-title, .help-modal-container .title-container, .help-modal-container .image-container { font-family: var(--font-display); } .help-modal-container .body-text-container, .help-modal-container .image-container { font-family: var(--font-body); } .help-modal-title, .help-modal-container .title-container, .help-modal-container .image-container { -webkit-user-select: none; } .help-modal-title, .help-modal-container .title-container, .help-modal-container .image-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .help-modal-title, .help-modal-container .title-container, .help-modal-container .image-container { text-transform: uppercase; } .help-modal-title:lang(ko-kr), .help-modal-container .title-container:lang(ko-kr), .help-modal-container .image-container:lang(ko-kr), .help-modal-title:lang(ja-jp), .help-modal-container .title-container:lang(ja-jp), .help-modal-container .image-container:lang(ja-jp), .help-modal-title:lang(tr-tr), .help-modal-container .title-container:lang(tr-tr), .help-modal-container .image-container:lang(tr-tr), .help-modal-title:lang(el-gr), .help-modal-container .title-container:lang(el-gr), .help-modal-container .image-container:lang(el-gr), .help-modal-title:lang(th-th), .help-modal-container .title-container:lang(th-th), .help-modal-container .image-container:lang(th-th), .help-modal-title:lang(zh-tw), .help-modal-container .title-container:lang(zh-tw), .help-modal-container .image-container:lang(zh-tw) { text-transform: none; } .help-modal-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .help-modal-title:lang(ar-ae) { letter-spacing: 0; } .help-modal-container .title-container { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .help-modal-container .title-container:lang(ar-ae) { letter-spacing: 0; } .help-modal-container .image-container { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .help-modal-container .image-container:lang(ja-jp) { font-size: 13px; } .help-modal-container .image-container:lang(ar-ae) { letter-spacing: 0; } .loot-tray { margin: 20px 0 0 50px; } .loot-tray::before { content: ''; height: 1px; width: 330px; display: block; background-image: url("/fe/lol-loot/assets/tray_icons/footer-bar-decoration.png"); background-repeat: no-repeat; } .loot-tray-content { display: flex; justify-content: space-between; align-items: center; width: 320px; margin-top: 15px; direction: ltr; } .loot-to-store-button { display: inline-block; height: 38px; width: 72px; margin-right: 10px; background-repeat: no-repeat; background-size: contain; background-image: url("/fe/lol-loot/assets/purchase_buttons/chest_generic.png"); cursor: pointer; } .loot-to-store-button:hover { background-image: url("/fe/lol-loot/assets/purchase_buttons/chest_generic_hover.png"); } .loot-to-store-button:active { background-image: url("/fe/lol-loot/assets/purchase_buttons/chest_generic_pressed.png"); } .loot-to-store-button.portal { background-image: url("/fe/lol-loot/assets/purchase_buttons/portal_chest_generic.png"); } .loot-to-store-button.portal:hover { background-image: url("/fe/lol-loot/assets/purchase_buttons/portal_chest_generic_hover.png"); } .loot-to-store-button.portal:active { background-image: url("/fe/lol-loot/assets/purchase_buttons/portal_chest_generic_pressed.png"); } .loot-to-store-button.disabled { background-image: url("/fe/lol-loot/assets/purchase_buttons/chest_generic_disabled.png"); cursor: default; } .loot-to-store-button.disabled:hover { background-image: url("/fe/lol-loot/assets/purchase_buttons/chest_generic_disabled.png"); } .loot-to-store-button.disabled:active { background-image: url("/fe/lol-loot/assets/purchase_buttons/chest_generic_disabled.png"); } .loot-to-store-button.portal-disabled { background-image: url("/fe/lol-loot/assets/purchase_buttons/portal_chest_generic_disabled.png"); cursor: default; } .loot-to-store-button.portal-disabled:hover { background-image: url("/fe/lol-loot/assets/purchase_buttons/portal_chest_generic_disabled.png"); } .loot-to-store-button.portal-disabled:active { background-image: url("/fe/lol-loot/assets/purchase_buttons/portal_chest_generic_disabled.png"); } .loot-currency-container { position: relative; display: inline-block; height: 100%; width: 40px; } .help-modal-title { margin: 0 30px 0 0 ; } .help-modal-container { display: flex; flex-direction: column; height: 550px; margin: 0 20px 0 0 ; } .help-modal-container .title-container { margin-top: 40px; text-align: center; } .help-modal-container .body-text-container { margin-top: 10px; text-align: left ; font-size: 14px; line-height: 21px; color: #a09b8c; } .help-modal-container .body-text-container.centered { text-align: center; } .help-modal-container .image-container { margin-top: 20px; height: 100px; width: 100%; font-size: 12px; color: #a09b8c; } .help-modal-container .image-container .image-description { margin-top: 5px; } .help-modal-container .image-container .images { margin: 0 10px; } .help-modal-container .image-container .images .essence-help-image { width: 125px; height: 100%; display: inline-block; } .help-modal-container .image-container .images .rarity-help-image { width: 100px; height: 100%; display: inline-block; } #loot-help-modal-content-block { padding: 18px 0 48px 28px ; width: 516px; text-align: center; } .loot-currency-text-container { font-family: var(--font-display); } .loot-currency-text-container { -webkit-user-select: none; } .loot-currency-text-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .loot-currency-text-container { text-transform: uppercase; } .loot-currency-text-container:lang(ko-kr), .loot-currency-text-container:lang(ja-jp), .loot-currency-text-container:lang(tr-tr), .loot-currency-text-container:lang(el-gr), .loot-currency-text-container:lang(th-th), .loot-currency-text-container:lang(zh-tw) { text-transform: none; } .loot-currency-text-container { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .loot-currency-text-container:lang(ja-jp) { font-size: 13px; } .loot-currency-text-container:lang(ar-ae) { letter-spacing: 0; } .loot-currency-text-container { color: #a09b8c; } .loot-currency-icon-container { position: relative; height: 26px; width: 26px; margin: auto; } .loot-currency-icon-container video { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .loot-currency-text-container { position: relative; margin-top: 5px; text-align: center; } .loot-display-category-tab .new-count { font-family: var(--font-body); } .loot-display-category-tab .new-count { -webkit-user-select: none; } .loot-display-category-tab .new-count { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .loot-display-category-tab .new-count { color: #a09b8c; font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .loot-display-category-tab .new-count:lang(ja-jp) { font-size: 13px; } .loot-display-category-tab .new-count:lang(ar-ae) { letter-spacing: 0; } .loot-display-category-tab { position: relative; display: inline-block; height: 32px; width: 32px; margin-bottom: 10px; cursor: pointer; } .loot-display-category-tab img { margin: 6px 6px 6px 18px; width: 20px; height: 20px; cursor: pointer; opacity: 0.7; } .loot-display-category-tab img:hover { opacity: 1; } .loot-display-category-tab .new-count { position: absolute; border-radius: 4px; background: #c89b3c; transform: translate(-50%, -50%); top: 7px; right: -22px; margin: 0; color: #000; font-size: 10px; vertical-align: middle; text-align: center; line-height: 10px; padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; pointer-events: none; } .loot-display-category-tab .loot-category-tab { opacity: 0.5; } .loot-display-category-tab .loot-category-tab.selected { opacity: 1; } .loot-display-category-tab .loot-category-tab.selected::after { content: ''; position: absolute; display: block; left: 0; bottom: 0; height: 100%; width: 4px; background: #c89b3c; } .disenchant-modal-container .title-text-container { font-family: var(--font-display); } .disenchant-modal-container .description-text-container { font-family: var(--font-body); } .disenchant-modal-container .title-text-container, .disenchant-modal-container .description-text-container { -webkit-user-select: none; } .disenchant-modal-container .title-text-container, .disenchant-modal-container .description-text-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .disenchant-modal-container .title-text-container { text-transform: uppercase; } .disenchant-modal-container .title-text-container:lang(ko-kr), .disenchant-modal-container .title-text-container:lang(ja-jp), .disenchant-modal-container .title-text-container:lang(tr-tr), .disenchant-modal-container .title-text-container:lang(el-gr), .disenchant-modal-container .title-text-container:lang(th-th), .disenchant-modal-container .title-text-container:lang(zh-tw) { text-transform: none; } .disenchant-modal-container .title-text-container { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .disenchant-modal-container .title-text-container:lang(ar-ae) { letter-spacing: 0; } .disenchant-modal-container .description-text-container { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .disenchant-modal-container .description-text-container:lang(ja-jp) { font-size: 13px; } .disenchant-modal-container .description-text-container:lang(ar-ae) { letter-spacing: 0; } .loot-disenchant-takeover { position: absolute; height: 100%; width: 100%; } .disenchant-modal-container { direction: ltr; position: absolute; height: 408px; width: 398px; background-image: url("/fe/lol-loot/assets/disenchant_modal/background_border.png"); background-size: cover; margin: auto; top: 0; right: 0; left: 0; bottom: 0; } .disenchant-modal-container .backdrop { position: absolute; height: 100%; width: 100%; background-image: url("/fe/lol-loot/assets/disenchant_modal/backdrop.png"); background-size: cover; } .disenchant-modal-container .close-button { position: absolute; height: 34px; width: 34px; right: 10px; top: 10px; background-image: url("/fe/lol-loot/assets/disenchant_modal/close_button.png"); background-size: cover; cursor: pointer; } .disenchant-modal-container .close-button:hover { background-image: url("/fe/lol-loot/assets/disenchant_modal/close_button_over.png"); background-size: cover; } .disenchant-modal-container .close-button:active { background-image: url("/fe/lol-loot/assets/disenchant_modal/close_button_down.png"); background-size: cover; } .disenchant-modal-container .icon-container { position: relative; height: 180px; width: 180px; margin: 60px auto 0; background-size: contain; background-position: center; background-repeat: no-repeat; } .disenchant-modal-container .icon-container .border { position: absolute; width: 100%; height: 100%; background-size: cover; left: 0; top: 0; } .disenchant-modal-container .icon-container .border.permanent { background-image: url("/fe/lol-loot/assets/disenchant_modal/border_permanent.png"); } .disenchant-modal-container .icon-container .border.shard { background-image: url("/fe/lol-loot/assets/disenchant_modal/border_shard.png"); } .disenchant-modal-container .title-text-container { width: 300px; position: relative; margin: 20px auto 0 auto; text-align: center; } .disenchant-modal-container .description-text-container { position: relative; margin-top: 8px; text-align: center; } .disenchant-modal-container .description-text-container .essence-icon-container { display: inline-block; height: 12px; width: 10px; margin-bottom: -2px; } .disenchant-modal-container .craft-button { position: absolute; height: 20px; width: 125px; bottom: 39px; left: 137px; } .disenchant-currency_champion video { position: absolute; transform: translate(-50%, -50%) scale(1.2, 1); left: 55.5%; top: 47%; } .disenchant-currency_cosmetic video { position: absolute; top: 52%; left: 44.8%; transform: translate(-50%, -50%); } .loot-filter .searchbox-container .searchbox-text { font-family: var(--font-body); } .loot-filter .searchbox-container .searchbox-text { -webkit-user-select: none; } .loot-filter .searchbox-container .searchbox-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .loot-filter .searchbox-container .searchbox-text { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .loot-filter .searchbox-container .searchbox-text:lang(ja-jp) { font-size: 13px; } .loot-filter .searchbox-container .searchbox-text:lang(ar-ae) { letter-spacing: 0; } .loot-filter .searchbox-container { width: 200px; display: inline-block; } .loot-filter .searchbox-container .searchbox-text { width: 100%; padding: 0 0 0 27px ; height: 32px; line-height: 32px; } .loot-filter .dropdown-container { width: 118px; display: inline-block; } .loot-redeem-confirm .context .title, .loot-redeem-confirm .context .body { font-family: var(--font-body); } .loot-redeem-confirm .context .title, .loot-redeem-confirm .context .body { -webkit-user-select: none; } .loot-redeem-confirm .context .title, .loot-redeem-confirm .context .body { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .loot-redeem-confirm .context .title { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .loot-redeem-confirm .context .title:lang(ar-ae) { letter-spacing: 0; } .loot-redeem-confirm .context .body { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .loot-redeem-confirm .context .body:lang(ja-jp) { font-size: 13px; } .loot-redeem-confirm .context .body:lang(ar-ae) { letter-spacing: 0; } .loot-redeem-confirm { top: 0; left: 0; width: 292px; min-height: 67px; padding: 12px 12px 8px 12px; pointer-events: none; } .loot-redeem-confirm .icon-container { display: inline-block; position: relative; width: 67px; height: 67px; left: 0; background-size: cover; } .loot-redeem-confirm .icon-container .border { position: absolute; width: 100%; height: 100%; background-size: cover; left: 0; top: 0; cursor: pointer; } .loot-redeem-confirm .icon-container .border.permanent { background-image: url("$plugin-namespace/assets/border_images/permanent.png"); } .loot-redeem-confirm .icon-container .border.shard { background-image: url("$plugin-namespace/assets/border_images/shard.png"); } .loot-redeem-confirm .context { display: inline-block; position: relative; margin: 6px 0 0 12px ; width: 201px; vertical-align: top; } .loot-redeem-confirm .context .title { color: #c3c1b1; width: 100%; text-align: left ; } .loot-redeem-confirm .context .body { text-align: left ; margin-top: 12px; color: #6f6e65; font-size: 11px; }