.emote-root-component { display: flex; position: relative; } .emote-root-component .emote-item-image { width: 100%; object-fit: contain; pointer-events: none; } .emote-root-component .emote-item-image:not([src]), .emote-root-component .emote-item-image[src=""] { display: none; } .emote-wheel-buttons { height: 35px; min-width: 112px; position: absolute; right: 35px ; left: auto ; top: 18px; } .emote-wheel-buttons .emotes-button-clear, .emote-wheel-buttons .emotes-button-save, .emote-wheel-buttons .emotes-button-loading-spinner { position: absolute; } .emote-wheel-buttons .emotes-button-save { right: 0 ; left: auto ; width: 112px; } .emote-wheel-buttons .emotes-button-loading-spinner { right: -26px ; left: auto ; top: 6px; } .emote-wheel-buttons .emotes-button-clear { right: 130px ; left: auto ; top: 2px; } .emote-wheel-buttons .emotes-button-clear .emotes-clear { align-items: center; background: linear-gradient(to top, #463714 4%, #785a28 23%, #c89b3c 90%, #c8aa6e 100%); border-radius: 50%; cursor: pointer; display: flex; height: 28px; justify-content: center; width: 28px; } .emote-wheel-buttons .emotes-button-clear .emotes-clear:hover { background: linear-gradient(to top, #c89b3c 0%, #f0e6d2 100%); } .emote-wheel-buttons .emotes-button-clear .emotes-clear .contents { background-color: #1e282d; border-radius: 50%; height: 24px; transition: box-shadow 150ms ease-out, color 150ms ease-out; width: 24px; } .emote-wheel-buttons .emotes-button-clear .emotes-clear .contents .x-icon { background-color: #cdbe91; width: 17px; height: 16px; transform: translate(5px, 4px) ; -webkit-mask: url("/fe/lol-emote-panel/buttons/cancel.png") no-repeat center; -webkit-mask-size: 17px 16px; } .emote-wheel-buttons .emotes-button-clear[disabled] .emotes-clear, .emote-wheel-buttons .emotes-button-clear[disabled]:hover .emotes-clear { cursor: default; background: none; background-color: #5b5a56; } .emote-wheel-buttons .emotes-button-clear[disabled] .emotes-clear .x-icon, .emote-wheel-buttons .emotes-button-clear[disabled]:hover .emotes-clear .x-icon { background-color: #5b5a56; } .loading-spinner { height: 40px; left: calc(50% - 20px) ; right: auto ; position: absolute; top: calc(50% - 20px); width: 40px; } .emotes-root { display: flex; transition: all 0.5s ease-in; width: 100%; direction: ltr; } .emotes-root.loading { opacity: 0; } .emotes-root.loaded { opacity: 1; } .emote-inventory .display-category-section-title .title-text, .emote-inventory .display-category-section-title .title-numbers, lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip h6 { font-family: var(--font-display); } .emote-inventory .display-category-section-title .title-text, .emote-inventory .display-category-section-title .title-numbers, lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip h6 { -webkit-user-select: none; } .emote-inventory .display-category-section-title .title-text, .emote-inventory .display-category-section-title .title-numbers, lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip h6 { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .emote-inventory .display-category-section-title .title-text, lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip h6 { text-transform: uppercase; } .emote-inventory .display-category-section-title .title-text:lang(ko-kr), lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip h6:lang(ko-kr), .emote-inventory .display-category-section-title .title-text:lang(ja-jp), lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip h6:lang(ja-jp), .emote-inventory .display-category-section-title .title-text:lang(tr-tr), lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip h6:lang(tr-tr), .emote-inventory .display-category-section-title .title-text:lang(el-gr), lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip h6:lang(el-gr), .emote-inventory .display-category-section-title .title-text:lang(th-th), lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip h6:lang(th-th), .emote-inventory .display-category-section-title .title-text:lang(zh-tw), lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip h6:lang(zh-tw) { text-transform: none; } .emote-inventory .display-category-section-title .title-text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .emote-inventory .display-category-section-title .title-text:lang(ar-ae) { letter-spacing: 0; } lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip h6 { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip h6:lang(ar-ae) { letter-spacing: 0; } .emote-inventory .display-category-section-title .title-numbers { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .emote-inventory .display-category-section-title .title-numbers { font-size: 16px; font-weight: 700; font-style: italic; letter-spacing: 0.075em; -webkit-font-smoothing: subpixel-antialiased; } .emote-inventory .display-category-section-title .title-numbers:lang(ar-ae) { letter-spacing: 0; } .emote-inventory .display-category-section { position: relative; width: 330px; } .emote-inventory .display-category-section-title { display: flex; margin-bottom: 10px; } .emote-inventory .display-category-section-title .title-text { margin: 0 10px 0 0 ; } .emote-inventory .display-category-section-options { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: thin solid #2d343b; } .emote-inventory .display-category-section-options .display-category-section-sort-types-dropdown { width: 180px; } .emote-inventory .emote-inventory-grid-wrapper { width: 352px; position: relative; overflow-y: auto; overflow-x: hidden; height: 502px; will-change: auto; } .emote-inventory .emote-inventory-grid-wrapper .emote-inventory-virtual-list { float: none ; } .emote-inventory .emote-inventory-grid-wrapper .emote-inventory-grid-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .emote-inventory .emote-row { display: flex; position: absolute; } .emote-inventory .emote-item { background-color: #010a13; background: url("/fe/lol-emote-panel/emote-placeholder.png") center/contain no-repeat; position: relative; width: 75px; height: 75px; margin: 10px 10px 0 0 ; } .emote-inventory .emote-item .emote-item-icon { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.8; border: thin solid #3c3c41; } .emote-inventory .emote-item .emote-item-icon.interactive:hover { opacity: 1; -webkit-filter: brightness(1.3); cursor: pointer; } .emote-inventory .emote-item .emote-item-icon .emote-item-image { width: 100%; height: 100%; } .emote-inventory .emote-item .emote-item-icon.is-new::after { content: ''; background: url("/fe/lol-emote-panel/border_images/new_state.png") center/contain no-repeat; position: absolute; top: -12px; left: -12px; width: 96px; height: 96px; } .emote-inventory .emote-item .emote-item-icon.unowned:hover { cursor: pointer; border-image: linear-gradient(#f0e6d2, #c89b3c) 1; } .emote-inventory .emote-item .emote-item-icon.unowned::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 34px; background-position: center; background-repeat: no-repeat; background-color: rgba(1,0,13,0.6); pointer-events: none; } .emote-inventory .emote-item .emote-item-icon.unowned:hover::after { background-image: url("/fe/lol-emote-panel/border_images/icon-lock-large-hover.png"); } .emote-inventory .emote-item .emote-item-icon.unowned:active::after { background-image: url("/fe/lol-emote-panel/border_images/icon-lock-large-click.png"); } .emote-inventory .emote-item .on-sale-ribbon { display: none; position: absolute; top: -1px; left: -1px; width: 18px; height: 24px; pointer-events: none; background-image: url("/fe/lol-emote-panel/border_images/sales-banner-compact.png"); background-position: center; background-size: contain; background-repeat: no-repeat; } .emote-inventory .emote-item .on-sale-ribbon.display-on-sale { display: block; } lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip { text-align: left; padding: 16px; min-width: auto; white-space: nowrap; } lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip .price-currency-type-RP, lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip .price-currency-type-IP { margin-top: 8px; display: flex; align-items: center; } lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip .price-currency-type-RP::before, lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip .price-currency-type-IP::before { content: ''; display: inline-block; position: relative; top: -1px; width: 14px; height: 14px; margin: 0 8px 0 0 ; background-position: center; background-size: contain; background-repeat: no-repeat; } lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip .price-currency-type-RP::before { background-image: url("/fe/lol-static-assets/images/icon-rp-32.png"); } lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip .price-currency-type-IP::before { background-image: url("/fe/lol-emote-panel/be-icon.png"); } lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip .price-currency-sale { margin-left: 8px; color: #be1e37; } lol-uikit-content-block[type=tooltip-small].rcp-fe-lol-emote-inventory-tooltip .price-currency-old { text-decoration: line-through; } .emote-wheel-wrapper h4, .emote-wheel-wrapper .emote-label { font-family: var(--font-display); } .emote-wheel-wrapper h4, .emote-wheel-wrapper .emote-label { -webkit-user-select: none; } .emote-wheel-wrapper h4, .emote-wheel-wrapper .emote-label { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .emote-wheel-wrapper h4, .emote-wheel-wrapper .emote-label { text-transform: uppercase; } .emote-wheel-wrapper h4:lang(ko-kr), .emote-wheel-wrapper .emote-label:lang(ko-kr), .emote-wheel-wrapper h4:lang(ja-jp), .emote-wheel-wrapper .emote-label:lang(ja-jp), .emote-wheel-wrapper h4:lang(tr-tr), .emote-wheel-wrapper .emote-label:lang(tr-tr), .emote-wheel-wrapper h4:lang(el-gr), .emote-wheel-wrapper .emote-label:lang(el-gr), .emote-wheel-wrapper h4:lang(th-th), .emote-wheel-wrapper .emote-label:lang(th-th), .emote-wheel-wrapper h4:lang(zh-tw), .emote-wheel-wrapper .emote-label:lang(zh-tw) { text-transform: none; } .emote-wheel-wrapper h4 { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .emote-wheel-wrapper h4:lang(ar-ae) { letter-spacing: 0; } .emote-wheel-wrapper .emote-label { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .emote-wheel-wrapper .emote-label:lang(ar-ae) { letter-spacing: 0; } .emote-wheel-wrapper { position: relative; width: 668px; height: 509px; padding-top: 50px; } .emote-wheel-wrapper h4 { margin: 0; padding: 0; } .emote-wheel-wrapper .emote-main-wheel-external-frame { background: url("/fe/lol-emote-panel/emote_wheel_images/main-wheel-outer-ornamentation.png") center/contain no-repeat; position: absolute; width: 385px; height: 385px; top: 27px; left: 141px; } .emote-wheel-wrapper .emote-main-wheel-frame { transform: rotate(-45deg); height: 376px; width: 376px; overflow: hidden; position: absolute; left: 151px; } .emote-wheel-wrapper .emote-main-wheel-frame::after { content: ''; background: url("/fe/lol-emote-panel/emote_wheel_images/main-wheel-metal-framework-merged.png") center/contain no-repeat; display: block; transform: rotate(45deg); position: absolute; pointer-events: none; width: 88%; height: 88%; top: 9px; left: 27px; } .emote-wheel-wrapper .emote-auto-trigger-frame { height: 235px; position: absolute; bottom: 0; width: 100%; pointer-events: none; } .emote-wheel-wrapper .emote-auto-trigger-wrapper { position: absolute; text-align: center; pointer-events: all; } .emote-wheel-wrapper .emote-auto-trigger-wrapper__start { top: -24; left: 35px; } .emote-wheel-wrapper .emote-auto-trigger-wrapper__firstBlood { bottom: 0; left: 187px; } .emote-wheel-wrapper .emote-auto-trigger-wrapper__ace { bottom: 0; left: 358px; } .emote-wheel-wrapper .emote-auto-trigger-wrapper__victory { top: -24px; right: 38px; } .emote-wheel-wrapper .emote-label { padding-bottom: 6px; color: #a09b8c; direction: ltr; } .emote-wheel-wrapper .emote-tray { position: absolute; width: 41%; height: 41%; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; } .emote-wheel-wrapper .emote-tray:hover { cursor: pointer; } .emote-wheel-wrapper .emote-tray__top, .emote-wheel-wrapper .emote-tray__right, .emote-wheel-wrapper .emote-tray__bottom, .emote-wheel-wrapper .emote-tray__left, .emote-wheel-wrapper .emote-tray__center { background-position: center; background-size: contain; background-repeat: no-repeat; } .emote-wheel-wrapper .emote-tray__top { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-top-idle.png"); right: 30px; top: 21px; border-radius: 0 200px 0 0; } .emote-wheel-wrapper .emote-tray__top.active { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-top-active.png"); } .emote-wheel-wrapper .emote-tray__top.dragstart { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-top-hover.png"); } .emote-wheel-wrapper .emote-tray__top.dropped { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-top-idle.png"); transition: all 0.4s ease-out; } .emote-wheel-wrapper .emote-tray__top.dropped.drop-fade { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-top-hover.png"); } .emote-wheel-wrapper .emote-tray__right { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-right-idle.png"); bottom: 46px; right: 30px; border-radius: 0 0 200px 0; } .emote-wheel-wrapper .emote-tray__right.active { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-right-active.png"); } .emote-wheel-wrapper .emote-tray__right.dragstart { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-right-hover.png"); } .emote-wheel-wrapper .emote-tray__right.dropped { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-right-idle.png"); transition: all 0.4s ease-out; } .emote-wheel-wrapper .emote-tray__right.dropped.drop-fade { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-right-hover.png"); } .emote-wheel-wrapper .emote-tray__bottom { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-bottom-idle.png"); bottom: 47px; left: 38px; border-radius: 0 0 0 200px; } .emote-wheel-wrapper .emote-tray__bottom.active { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-bottom-active.png"); } .emote-wheel-wrapper .emote-tray__bottom.dragstart { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-bottom-hover.png"); } .emote-wheel-wrapper .emote-tray__bottom.dropped { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-bottom-idle.png"); transition: all 0.4s ease-out; } .emote-wheel-wrapper .emote-tray__bottom.dropped.drop-fade { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-bottom-hover.png"); } .emote-wheel-wrapper .emote-tray__left { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-left-idle.png"); left: 38px; top: 21px; border-radius: 200px 0 0 0; } .emote-wheel-wrapper .emote-tray__left.active { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-left-active.png"); } .emote-wheel-wrapper .emote-tray__left.dragstart { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-left-hover.png"); } .emote-wheel-wrapper .emote-tray__left.dropped { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-left-idle.png"); transition: all 0.4s ease-out; } .emote-wheel-wrapper .emote-tray__left.dropped.drop-fade { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-left-hover.png"); } .emote-wheel-wrapper .emote-tray__center { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-center-idle.png"); border-radius: 50%; height: 27%; width: 27%; left: 141px; top: 124px; position: absolute; } .emote-wheel-wrapper .emote-tray__center.active { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-center-active.png"); } .emote-wheel-wrapper .emote-tray__center.dragstart { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-center-hover.png"); } .emote-wheel-wrapper .emote-tray__center.dropped { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-center-idle.png"); transition: all 0.4s ease-out; } .emote-wheel-wrapper .emote-tray__center.dropped.drop-fade { background-image: url("/fe/lol-emote-panel/emote_wheel_images/wheel-center-hover.png"); } .emote-wheel-wrapper .emote-tray__start, .emote-wheel-wrapper .emote-tray__victory, .emote-wheel-wrapper .emote-tray__firstBlood, .emote-wheel-wrapper .emote-tray__ace { background: url("/fe/lol-emote-panel/emote_wheel_images/start-finish-inactive.png") center/contain no-repeat; border-radius: 50%; height: 120px; position: static; width: 120px; } .emote-wheel-wrapper .emote-tray__start.active, .emote-wheel-wrapper .emote-tray__victory.active, .emote-wheel-wrapper .emote-tray__firstBlood.active, .emote-wheel-wrapper .emote-tray__ace.active { background-image: url("/fe/lol-emote-panel/emote_wheel_images/start-finish-active.png"); } .emote-wheel-wrapper .emote-tray__start.dragstart, .emote-wheel-wrapper .emote-tray__victory.dragstart, .emote-wheel-wrapper .emote-tray__firstBlood.dragstart, .emote-wheel-wrapper .emote-tray__ace.dragstart { background-image: url("/fe/lol-emote-panel/emote_wheel_images/start-finish-hover.png"); } .emote-wheel-wrapper .emote-tray__start.dropped, .emote-wheel-wrapper .emote-tray__victory.dropped, .emote-wheel-wrapper .emote-tray__firstBlood.dropped, .emote-wheel-wrapper .emote-tray__ace.dropped { background-image: url("/fe/lol-emote-panel/emote_wheel_images/start-finish-inactive.png"); transition: all 0.4s ease-out; } .emote-wheel-wrapper .emote-tray__start.dropped.drop-fade, .emote-wheel-wrapper .emote-tray__victory.dropped.drop-fade, .emote-wheel-wrapper .emote-tray__firstBlood.dropped.drop-fade, .emote-wheel-wrapper .emote-tray__ace.dropped.drop-fade { background-image: url("/fe/lol-emote-panel/emote_wheel_images/start-finish-hover.png"); } .emote-wheel-wrapper .emote-tray.dragsource .emote { -webkit-filter: grayscale(1) opacity(0.5); filter: grayscale(1) opacity(0.5); } .emote-wheel-wrapper .emote { background: url("/fe/lol-emote-panel/emote_images/blank.png") center/cover; cursor: pointer; position: relative; transform: rotate(45deg); width: 75.2px; height: 75.2px; } .emote-wheel-wrapper .emote__top { top: 4%; left: -4%; } .emote-wheel-wrapper .emote__right { top: -4%; left: -4%; } .emote-wheel-wrapper .emote__bottom { top: -4%; left: 4%; } .emote-wheel-wrapper .emote__left { top: 4%; left: 4%; } .emote-wheel-wrapper .emote__start, .emote-wheel-wrapper .emote__victory, .emote-wheel-wrapper .emote__ace, .emote-wheel-wrapper .emote__firstBlood { transform: rotate(0deg); }