.collections-application .champions-route .collection-details .total-label, .collections-application .champions-route .collection-details .total-owned, .collections-application .champions-route .no-matching-champions .message, .collections-application .champions-route .item-grid .group-name, .collections-application .champions-route .item-grid .group-breakdown, .collections-application .chromas-route .no-matching-chromas .message, .collections-application .chromas-route .item-grid .group-name-major, .collections-application .chromas-route .item-grid .group-name-minor, .collections-application .chromas-route .item-grid .group-breakdown, .collections-application .skins-route .no-matching-skins .message, .collections-application .skins-route .item-grid .group-name-major, .collections-application .skins-route .item-grid .group-name-minor, .collections-application .skins-route .item-grid .group-breakdown, .collections-application .summoner-icons-route .no-matching-summoner-icons .message, .collections-application .summoner-icons-route .item-grid .group-name-major, .collections-application .summoner-icons-route .item-grid .group-name-minor, .collections-application .summoner-icons-route .item-grid .group-breakdown, .collections-application .wards-route .no-matching-wards .message, .collections-application .wards-route .item-grid .group-name-major, .collections-application .wards-route .item-grid .group-name-minor, .collections-application .wards-route .item-grid .group-breakdown, .rcp-fe-lol-collections-collection-details .total-owned, .rcp-fe-lol-collections-collection-details .owned-total-header, .quest-skin-info.badge, .summoner-spells-root-component .collection-spell-name, .summoner-spells-root-component .collection-spell-level, .collections-error-message { font-family: var(--font-display); } .collections-application .champions-route .collection-search-panel .collection-search-text, .collections-application .skins-route .item-grid .group-description-major, .rcp-fe-lol-collections-champion-item .champion-mastery-description, .rcp-fe-lol-collections-champion-item .eternals-description-container, .rcp-fe-lol-collections-champion-item .champion-name, .champion-item-tooltip-container .info-container, .rcp-fe-lol-collections-collection-controls .collection-search-input, .rcp-fe-lol-collections-collection-details .count, .rcp-fe-lol-collections-collection-details .legacy-count, .quest-skin-info, .inventory-item-tooltip-container .info-container, .summoner-spells-root-component .collection-spell-icon-label, .summoner-spells-root-component .collection-spell-gametypes, .summoner-spells-root-component .collection-spell-desc { font-family: var(--font-body); } .collections-application .champions-route .collection-details .total-label, .collections-application .champions-route .collection-details .total-owned, .collections-application .champions-route .collection-search-panel .collection-search-text, .collections-application .champions-route .no-matching-champions .message, .collections-application .champions-route .item-grid .group-name, .collections-application .champions-route .item-grid .group-breakdown, .collections-application .chromas-route .no-matching-chromas .message, .collections-application .chromas-route .item-grid .group-name-major, .collections-application .chromas-route .item-grid .group-name-minor, .collections-application .chromas-route .item-grid .group-breakdown, .collections-application .skins-route .no-matching-skins .message, .collections-application .skins-route .item-grid .group-name-major, .collections-application .skins-route .item-grid .group-description-major, .collections-application .skins-route .item-grid .group-name-minor, .collections-application .skins-route .item-grid .group-breakdown, .collections-application .summoner-icons-route .no-matching-summoner-icons .message, .collections-application .summoner-icons-route .item-grid .group-name-major, .collections-application .summoner-icons-route .item-grid .group-name-minor, .collections-application .summoner-icons-route .item-grid .group-breakdown, .collections-application .wards-route .no-matching-wards .message, .collections-application .wards-route .item-grid .group-name-major, .collections-application .wards-route .item-grid .group-name-minor, .collections-application .wards-route .item-grid .group-breakdown, .rcp-fe-lol-collections-champion-item .champion-mastery-description, .rcp-fe-lol-collections-champion-item .eternals-description-container, .rcp-fe-lol-collections-champion-item .champion-name, .champion-item-tooltip-container .info-container, .rcp-fe-lol-collections-collection-controls .collection-search-input, .rcp-fe-lol-collections-collection-details .total-owned, .rcp-fe-lol-collections-collection-details .owned-total-header, .rcp-fe-lol-collections-collection-details .count, .rcp-fe-lol-collections-collection-details .legacy-count, .quest-skin-info, .quest-skin-info.badge, .inventory-item-tooltip-container .info-container, .summoner-spells-root-component .collection-spell-icon-label, .summoner-spells-root-component .collection-spell-name, .summoner-spells-root-component .collection-spell-level, .summoner-spells-root-component .collection-spell-gametypes, .summoner-spells-root-component .collection-spell-desc, .collections-error-message { -webkit-user-select: none; } .collections-application .champions-route .collection-details .total-label, .collections-application .champions-route .collection-details .total-owned, .collections-application .champions-route .collection-search-panel .collection-search-text, .collections-application .champions-route .no-matching-champions .message, .collections-application .champions-route .item-grid .group-name, .collections-application .champions-route .item-grid .group-breakdown, .collections-application .chromas-route .no-matching-chromas .message, .collections-application .chromas-route .item-grid .group-name-major, .collections-application .chromas-route .item-grid .group-name-minor, .collections-application .chromas-route .item-grid .group-breakdown, .collections-application .skins-route .no-matching-skins .message, .collections-application .skins-route .item-grid .group-name-major, .collections-application .skins-route .item-grid .group-description-major, .collections-application .skins-route .item-grid .group-name-minor, .collections-application .skins-route .item-grid .group-breakdown, .collections-application .summoner-icons-route .no-matching-summoner-icons .message, .collections-application .summoner-icons-route .item-grid .group-name-major, .collections-application .summoner-icons-route .item-grid .group-name-minor, .collections-application .summoner-icons-route .item-grid .group-breakdown, .collections-application .wards-route .no-matching-wards .message, .collections-application .wards-route .item-grid .group-name-major, .collections-application .wards-route .item-grid .group-name-minor, .collections-application .wards-route .item-grid .group-breakdown, .rcp-fe-lol-collections-champion-item .champion-mastery-description, .rcp-fe-lol-collections-champion-item .eternals-description-container, .rcp-fe-lol-collections-champion-item .champion-name, .champion-item-tooltip-container .info-container, .rcp-fe-lol-collections-collection-controls .collection-search-input, .rcp-fe-lol-collections-collection-details .total-owned, .rcp-fe-lol-collections-collection-details .owned-total-header, .rcp-fe-lol-collections-collection-details .count, .rcp-fe-lol-collections-collection-details .legacy-count, .quest-skin-info, .quest-skin-info.badge, .inventory-item-tooltip-container .info-container, .summoner-spells-root-component .collection-spell-icon-label, .summoner-spells-root-component .collection-spell-name, .summoner-spells-root-component .collection-spell-level, .summoner-spells-root-component .collection-spell-gametypes, .summoner-spells-root-component .collection-spell-desc, .collections-error-message { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .collections-application .champions-route .collection-details .total-label, .collections-application .champions-route .collection-details .total-owned, .collections-application .champions-route .no-matching-champions .message, .collections-application .champions-route .item-grid .group-name, .collections-application .chromas-route .no-matching-chromas .message, .collections-application .chromas-route .item-grid .group-name-major, .collections-application .chromas-route .item-grid .group-name-minor, .collections-application .skins-route .no-matching-skins .message, .collections-application .skins-route .item-grid .group-name-major, .collections-application .skins-route .item-grid .group-name-minor, .collections-application .summoner-icons-route .no-matching-summoner-icons .message, .collections-application .summoner-icons-route .item-grid .group-name-major, .collections-application .summoner-icons-route .item-grid .group-name-minor, .collections-application .wards-route .no-matching-wards .message, .collections-application .wards-route .item-grid .group-name-major, .collections-application .wards-route .item-grid .group-name-minor, .rcp-fe-lol-collections-collection-details .total-owned, .rcp-fe-lol-collections-collection-details .owned-total-header, .quest-skin-info.badge, .summoner-spells-root-component .collection-spell-name, .summoner-spells-root-component .collection-spell-level, .collections-error-message { text-transform: uppercase; } .collections-application .champions-route .collection-details .total-label:lang(ko-kr), .collections-application .champions-route .collection-details .total-owned:lang(ko-kr), .collections-application .champions-route .no-matching-champions .message:lang(ko-kr), .collections-application .champions-route .item-grid .group-name:lang(ko-kr), .collections-application .chromas-route .no-matching-chromas .message:lang(ko-kr), .collections-application .chromas-route .item-grid .group-name-major:lang(ko-kr), .collections-application .chromas-route .item-grid .group-name-minor:lang(ko-kr), .collections-application .skins-route .no-matching-skins .message:lang(ko-kr), .collections-application .skins-route .item-grid .group-name-major:lang(ko-kr), .collections-application .skins-route .item-grid .group-name-minor:lang(ko-kr), .collections-application .summoner-icons-route .no-matching-summoner-icons .message:lang(ko-kr), .collections-application .summoner-icons-route .item-grid .group-name-major:lang(ko-kr), .collections-application .summoner-icons-route .item-grid .group-name-minor:lang(ko-kr), .collections-application .wards-route .no-matching-wards .message:lang(ko-kr), .collections-application .wards-route .item-grid .group-name-major:lang(ko-kr), .collections-application .wards-route .item-grid .group-name-minor:lang(ko-kr), .rcp-fe-lol-collections-collection-details .total-owned:lang(ko-kr), .rcp-fe-lol-collections-collection-details .owned-total-header:lang(ko-kr), .quest-skin-info.badge:lang(ko-kr), .summoner-spells-root-component .collection-spell-name:lang(ko-kr), .summoner-spells-root-component .collection-spell-level:lang(ko-kr), .collections-error-message:lang(ko-kr), .collections-application .champions-route .collection-details .total-label:lang(ja-jp), .collections-application .champions-route .collection-details .total-owned:lang(ja-jp), .collections-application .champions-route .no-matching-champions .message:lang(ja-jp), .collections-application .champions-route .item-grid .group-name:lang(ja-jp), .collections-application .chromas-route .no-matching-chromas .message:lang(ja-jp), .collections-application .chromas-route .item-grid .group-name-major:lang(ja-jp), .collections-application .chromas-route .item-grid .group-name-minor:lang(ja-jp), .collections-application .skins-route .no-matching-skins .message:lang(ja-jp), .collections-application .skins-route .item-grid .group-name-major:lang(ja-jp), .collections-application .skins-route .item-grid .group-name-minor:lang(ja-jp), .collections-application .summoner-icons-route .no-matching-summoner-icons .message:lang(ja-jp), .collections-application .summoner-icons-route .item-grid .group-name-major:lang(ja-jp), .collections-application .summoner-icons-route .item-grid .group-name-minor:lang(ja-jp), .collections-application .wards-route .no-matching-wards .message:lang(ja-jp), .collections-application .wards-route .item-grid .group-name-major:lang(ja-jp), .collections-application .wards-route .item-grid .group-name-minor:lang(ja-jp), .rcp-fe-lol-collections-collection-details .total-owned:lang(ja-jp), .rcp-fe-lol-collections-collection-details .owned-total-header:lang(ja-jp), .quest-skin-info.badge:lang(ja-jp), .summoner-spells-root-component .collection-spell-name:lang(ja-jp), .summoner-spells-root-component .collection-spell-level:lang(ja-jp), .collections-error-message:lang(ja-jp), .collections-application .champions-route .collection-details .total-label:lang(tr-tr), .collections-application .champions-route .collection-details .total-owned:lang(tr-tr), .collections-application .champions-route .no-matching-champions .message:lang(tr-tr), .collections-application .champions-route .item-grid .group-name:lang(tr-tr), .collections-application .chromas-route .no-matching-chromas .message:lang(tr-tr), .collections-application .chromas-route .item-grid .group-name-major:lang(tr-tr), .collections-application .chromas-route .item-grid .group-name-minor:lang(tr-tr), .collections-application .skins-route .no-matching-skins .message:lang(tr-tr), .collections-application .skins-route .item-grid .group-name-major:lang(tr-tr), .collections-application .skins-route .item-grid .group-name-minor:lang(tr-tr), .collections-application .summoner-icons-route .no-matching-summoner-icons .message:lang(tr-tr), .collections-application .summoner-icons-route .item-grid .group-name-major:lang(tr-tr), .collections-application .summoner-icons-route .item-grid .group-name-minor:lang(tr-tr), .collections-application .wards-route .no-matching-wards .message:lang(tr-tr), .collections-application .wards-route .item-grid .group-name-major:lang(tr-tr), .collections-application .wards-route .item-grid .group-name-minor:lang(tr-tr), .rcp-fe-lol-collections-collection-details .total-owned:lang(tr-tr), .rcp-fe-lol-collections-collection-details .owned-total-header:lang(tr-tr), .quest-skin-info.badge:lang(tr-tr), .summoner-spells-root-component .collection-spell-name:lang(tr-tr), .summoner-spells-root-component .collection-spell-level:lang(tr-tr), .collections-error-message:lang(tr-tr), .collections-application .champions-route .collection-details .total-label:lang(el-gr), .collections-application .champions-route .collection-details .total-owned:lang(el-gr), .collections-application .champions-route .no-matching-champions .message:lang(el-gr), .collections-application .champions-route .item-grid .group-name:lang(el-gr), .collections-application .chromas-route .no-matching-chromas .message:lang(el-gr), .collections-application .chromas-route .item-grid .group-name-major:lang(el-gr), .collections-application .chromas-route .item-grid .group-name-minor:lang(el-gr), .collections-application .skins-route .no-matching-skins .message:lang(el-gr), .collections-application .skins-route .item-grid .group-name-major:lang(el-gr), .collections-application .skins-route .item-grid .group-name-minor:lang(el-gr), .collections-application .summoner-icons-route .no-matching-summoner-icons .message:lang(el-gr), .collections-application .summoner-icons-route .item-grid .group-name-major:lang(el-gr), .collections-application .summoner-icons-route .item-grid .group-name-minor:lang(el-gr), .collections-application .wards-route .no-matching-wards .message:lang(el-gr), .collections-application .wards-route .item-grid .group-name-major:lang(el-gr), .collections-application .wards-route .item-grid .group-name-minor:lang(el-gr), .rcp-fe-lol-collections-collection-details .total-owned:lang(el-gr), .rcp-fe-lol-collections-collection-details .owned-total-header:lang(el-gr), .quest-skin-info.badge:lang(el-gr), .summoner-spells-root-component .collection-spell-name:lang(el-gr), .summoner-spells-root-component .collection-spell-level:lang(el-gr), .collections-error-message:lang(el-gr), .collections-application .champions-route .collection-details .total-label:lang(th-th), .collections-application .champions-route .collection-details .total-owned:lang(th-th), .collections-application .champions-route .no-matching-champions .message:lang(th-th), .collections-application .champions-route .item-grid .group-name:lang(th-th), .collections-application .chromas-route .no-matching-chromas .message:lang(th-th), .collections-application .chromas-route .item-grid .group-name-major:lang(th-th), .collections-application .chromas-route .item-grid .group-name-minor:lang(th-th), .collections-application .skins-route .no-matching-skins .message:lang(th-th), .collections-application .skins-route .item-grid .group-name-major:lang(th-th), .collections-application .skins-route .item-grid .group-name-minor:lang(th-th), .collections-application .summoner-icons-route .no-matching-summoner-icons .message:lang(th-th), .collections-application .summoner-icons-route .item-grid .group-name-major:lang(th-th), .collections-application .summoner-icons-route .item-grid .group-name-minor:lang(th-th), .collections-application .wards-route .no-matching-wards .message:lang(th-th), .collections-application .wards-route .item-grid .group-name-major:lang(th-th), .collections-application .wards-route .item-grid .group-name-minor:lang(th-th), .rcp-fe-lol-collections-collection-details .total-owned:lang(th-th), .rcp-fe-lol-collections-collection-details .owned-total-header:lang(th-th), .quest-skin-info.badge:lang(th-th), .summoner-spells-root-component .collection-spell-name:lang(th-th), .summoner-spells-root-component .collection-spell-level:lang(th-th), .collections-error-message:lang(th-th), .collections-application .champions-route .collection-details .total-label:lang(zh-tw), .collections-application .champions-route .collection-details .total-owned:lang(zh-tw), .collections-application .champions-route .no-matching-champions .message:lang(zh-tw), .collections-application .champions-route .item-grid .group-name:lang(zh-tw), .collections-application .chromas-route .no-matching-chromas .message:lang(zh-tw), .collections-application .chromas-route .item-grid .group-name-major:lang(zh-tw), .collections-application .chromas-route .item-grid .group-name-minor:lang(zh-tw), .collections-application .skins-route .no-matching-skins .message:lang(zh-tw), .collections-application .skins-route .item-grid .group-name-major:lang(zh-tw), .collections-application .skins-route .item-grid .group-name-minor:lang(zh-tw), .collections-application .summoner-icons-route .no-matching-summoner-icons .message:lang(zh-tw), .collections-application .summoner-icons-route .item-grid .group-name-major:lang(zh-tw), .collections-application .summoner-icons-route .item-grid .group-name-minor:lang(zh-tw), .collections-application .wards-route .no-matching-wards .message:lang(zh-tw), .collections-application .wards-route .item-grid .group-name-major:lang(zh-tw), .collections-application .wards-route .item-grid .group-name-minor:lang(zh-tw), .rcp-fe-lol-collections-collection-details .total-owned:lang(zh-tw), .rcp-fe-lol-collections-collection-details .owned-total-header:lang(zh-tw), .quest-skin-info.badge:lang(zh-tw), .summoner-spells-root-component .collection-spell-name:lang(zh-tw), .summoner-spells-root-component .collection-spell-level:lang(zh-tw), .collections-error-message:lang(zh-tw) { text-transform: none; } .collections-application .champions-route .no-matching-champions .message, .collections-application .chromas-route .no-matching-chromas .message, .collections-application .skins-route .no-matching-skins .message, .collections-application .summoner-icons-route .no-matching-summoner-icons .message, .collections-application .wards-route .no-matching-wards .message { text-transform: none; } .collections-application .champions-route .collection-details .total-owned, .rcp-fe-lol-collections-collection-details .total-owned { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .collections-application .champions-route .collection-details .total-owned:lang(ar-ae), .rcp-fe-lol-collections-collection-details .total-owned:lang(ar-ae) { letter-spacing: 0; } .summoner-spells-root-component .collection-spell-name, .collections-error-message { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .summoner-spells-root-component .collection-spell-name:lang(ar-ae), .collections-error-message:lang(ar-ae) { letter-spacing: 0; } .collections-application .champions-route .no-matching-champions .message, .collections-application .champions-route .item-grid .group-name, .collections-application .chromas-route .no-matching-chromas .message, .collections-application .chromas-route .item-grid .group-name-major, .collections-application .skins-route .no-matching-skins .message, .collections-application .skins-route .item-grid .group-name-major, .collections-application .summoner-icons-route .no-matching-summoner-icons .message, .collections-application .summoner-icons-route .item-grid .group-name-major, .collections-application .wards-route .no-matching-wards .message, .collections-application .wards-route .item-grid .group-name-major { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .collections-application .champions-route .no-matching-champions .message:lang(ar-ae), .collections-application .champions-route .item-grid .group-name:lang(ar-ae), .collections-application .chromas-route .no-matching-chromas .message:lang(ar-ae), .collections-application .chromas-route .item-grid .group-name-major:lang(ar-ae), .collections-application .skins-route .no-matching-skins .message:lang(ar-ae), .collections-application .skins-route .item-grid .group-name-major:lang(ar-ae), .collections-application .summoner-icons-route .no-matching-summoner-icons .message:lang(ar-ae), .collections-application .summoner-icons-route .item-grid .group-name-major:lang(ar-ae), .collections-application .wards-route .no-matching-wards .message:lang(ar-ae), .collections-application .wards-route .item-grid .group-name-major:lang(ar-ae) { letter-spacing: 0; } .collections-application .champions-route .no-matching-champions .message, .collections-application .chromas-route .no-matching-chromas .message, .collections-application .skins-route .no-matching-skins .message, .collections-application .summoner-icons-route .no-matching-summoner-icons .message, .collections-application .wards-route .no-matching-wards .message { letter-spacing: 0.025em; } .collections-application .champions-route .no-matching-champions .message:lang(ar-ae), .collections-application .chromas-route .no-matching-chromas .message:lang(ar-ae), .collections-application .skins-route .no-matching-skins .message:lang(ar-ae), .collections-application .summoner-icons-route .no-matching-summoner-icons .message:lang(ar-ae), .collections-application .wards-route .no-matching-wards .message:lang(ar-ae) { letter-spacing: 0; } .collections-application .chromas-route .item-grid .group-name-minor, .collections-application .skins-route .item-grid .group-name-minor, .collections-application .summoner-icons-route .item-grid .group-name-minor, .collections-application .wards-route .item-grid .group-name-minor, .summoner-spells-root-component .collection-spell-level { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .collections-application .chromas-route .item-grid .group-name-minor:lang(ar-ae), .collections-application .skins-route .item-grid .group-name-minor:lang(ar-ae), .collections-application .summoner-icons-route .item-grid .group-name-minor:lang(ar-ae), .collections-application .wards-route .item-grid .group-name-minor:lang(ar-ae), .summoner-spells-root-component .collection-spell-level:lang(ar-ae) { letter-spacing: 0; } .collections-application .champions-route .collection-details .total-label, .rcp-fe-lol-collections-collection-details .owned-total-header, .quest-skin-info.badge { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .collections-application .champions-route .collection-details .total-label:lang(ja-jp), .rcp-fe-lol-collections-collection-details .owned-total-header:lang(ja-jp), .quest-skin-info.badge:lang(ja-jp) { font-size: 13px; } .collections-application .champions-route .collection-details .total-label:lang(ar-ae), .rcp-fe-lol-collections-collection-details .owned-total-header:lang(ar-ae), .quest-skin-info.badge:lang(ar-ae) { letter-spacing: 0; } .collections-application .champions-route .collection-details .total-label, .rcp-fe-lol-collections-collection-details .owned-total-header { color: #a09b8c; } .collections-application .skins-route .item-grid .group-description-major { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .collections-application .skins-route .item-grid .group-description-major:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-collections-champion-item .champion-mastery-description, .rcp-fe-lol-collections-champion-item .eternals-description-container, .rcp-fe-lol-collections-champion-item .champion-name, .champion-item-tooltip-container .info-container, .quest-skin-info, .inventory-item-tooltip-container .info-container, .summoner-spells-root-component .collection-spell-gametypes, .summoner-spells-root-component .collection-spell-desc { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-collections-champion-item .champion-mastery-description:lang(ja-jp), .rcp-fe-lol-collections-champion-item .eternals-description-container:lang(ja-jp), .rcp-fe-lol-collections-champion-item .champion-name:lang(ja-jp), .champion-item-tooltip-container .info-container:lang(ja-jp), .quest-skin-info:lang(ja-jp), .inventory-item-tooltip-container .info-container:lang(ja-jp), .summoner-spells-root-component .collection-spell-gametypes:lang(ja-jp), .summoner-spells-root-component .collection-spell-desc:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-collections-champion-item .champion-mastery-description:lang(ar-ae), .rcp-fe-lol-collections-champion-item .eternals-description-container:lang(ar-ae), .rcp-fe-lol-collections-champion-item .champion-name:lang(ar-ae), .champion-item-tooltip-container .info-container:lang(ar-ae), .quest-skin-info:lang(ar-ae), .inventory-item-tooltip-container .info-container:lang(ar-ae), .summoner-spells-root-component .collection-spell-gametypes:lang(ar-ae), .summoner-spells-root-component .collection-spell-desc:lang(ar-ae) { letter-spacing: 0; } .collections-application .champions-route .collection-search-panel .collection-search-text, .rcp-fe-lol-collections-collection-controls .collection-search-input, .rcp-fe-lol-collections-collection-details .count, .rcp-fe-lol-collections-collection-details .legacy-count, .summoner-spells-root-component .collection-spell-icon-label { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .collections-application .champions-route .collection-search-panel .collection-search-text:lang(ja-jp), .rcp-fe-lol-collections-collection-controls .collection-search-input:lang(ja-jp), .rcp-fe-lol-collections-collection-details .count:lang(ja-jp), .rcp-fe-lol-collections-collection-details .legacy-count:lang(ja-jp), .summoner-spells-root-component .collection-spell-icon-label:lang(ja-jp) { font-size: 13px; } .collections-application .champions-route .collection-search-panel .collection-search-text:lang(ar-ae), .rcp-fe-lol-collections-collection-controls .collection-search-input:lang(ar-ae), .rcp-fe-lol-collections-collection-details .count:lang(ar-ae), .rcp-fe-lol-collections-collection-details .legacy-count:lang(ar-ae), .summoner-spells-root-component .collection-spell-icon-label:lang(ar-ae) { letter-spacing: 0; } .collections-application .champions-route .collection-details .total-owned, .collections-application .champions-route .item-grid .group-breakdown, .collections-application .chromas-route .item-grid .group-breakdown, .collections-application .skins-route .item-grid .group-breakdown, .collections-application .summoner-icons-route .item-grid .group-breakdown, .collections-application .wards-route .item-grid .group-breakdown, .rcp-fe-lol-collections-collection-details .total-owned { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .collections-application .champions-route .item-grid .group-breakdown, .collections-application .chromas-route .item-grid .group-breakdown, .collections-application .skins-route .item-grid .group-breakdown, .collections-application .summoner-icons-route .item-grid .group-breakdown, .collections-application .wards-route .item-grid .group-breakdown { font-size: 16px; font-weight: 700; font-style: italic; letter-spacing: 0.075em; -webkit-font-smoothing: subpixel-antialiased; } .collections-application .champions-route .item-grid .group-breakdown:lang(ar-ae), .collections-application .chromas-route .item-grid .group-breakdown:lang(ar-ae), .collections-application .skins-route .item-grid .group-breakdown:lang(ar-ae), .collections-application .summoner-icons-route .item-grid .group-breakdown:lang(ar-ae), .collections-application .wards-route .item-grid .group-breakdown:lang(ar-ae) { letter-spacing: 0; } .collections-application .champions-route .item-grid .item-grid-scrollable::-webkit-scrollbar, .collections-application .chromas-route .item-grid .item-grid-scrollable::-webkit-scrollbar, .collections-application .skins-route .item-grid .item-grid-scrollable::-webkit-scrollbar, .collections-application .summoner-icons-route .item-grid .item-grid-scrollable::-webkit-scrollbar, .collections-application .wards-route .item-grid .item-grid-scrollable::-webkit-scrollbar, .collections-application .champions-route .item-grid .item-grid-scrollable ::-webkit-scrollbar, .collections-application .chromas-route .item-grid .item-grid-scrollable ::-webkit-scrollbar, .collections-application .skins-route .item-grid .item-grid-scrollable ::-webkit-scrollbar, .collections-application .summoner-icons-route .item-grid .item-grid-scrollable ::-webkit-scrollbar, .collections-application .wards-route .item-grid .item-grid-scrollable ::-webkit-scrollbar { width: 11px; height: 11px; background-color: transparent; } .collections-application .champions-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb, .collections-application .chromas-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb, .collections-application .skins-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb, .collections-application .summoner-icons-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb, .collections-application .wards-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb, .collections-application .champions-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb, .collections-application .chromas-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb, .collections-application .skins-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb, .collections-application .summoner-icons-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb, .collections-application .wards-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 6px; background-clip: padding-box; min-height: 32px; background-color: #785a28; } .collections-application .champions-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:hover, .collections-application .chromas-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:hover, .collections-application .skins-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:hover, .collections-application .summoner-icons-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:hover, .collections-application .wards-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:hover, .collections-application .champions-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:hover, .collections-application .chromas-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:hover, .collections-application .skins-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:hover, .collections-application .summoner-icons-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:hover, .collections-application .wards-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:hover { background-color: #c8aa6e; } .collections-application .champions-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:active, .collections-application .chromas-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:active, .collections-application .skins-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:active, .collections-application .summoner-icons-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:active, .collections-application .wards-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:active, .collections-application .champions-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:active, .collections-application .chromas-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:active, .collections-application .skins-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:active, .collections-application .summoner-icons-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:active, .collections-application .wards-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:active { background-color: #463714; } .collections-application .champions-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:disabled, .collections-application .chromas-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:disabled, .collections-application .skins-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:disabled, .collections-application .summoner-icons-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:disabled, .collections-application .wards-route .item-grid .item-grid-scrollable::-webkit-scrollbar-thumb:disabled, .collections-application .champions-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:disabled, .collections-application .chromas-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:disabled, .collections-application .skins-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:disabled, .collections-application .summoner-icons-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:disabled, .collections-application .wards-route .item-grid .item-grid-scrollable ::-webkit-scrollbar-thumb:disabled { background-color: #a09b8c; } .collections-application .champions-route { animation-name: fadeIn; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; } .collections-application .champions-route .control-panel { position: absolute; width: 194px; height: 320px; top: 136px; left: 32px; } .collections-application .champions-route .collection-details { cursor: default; } .collections-application .champions-route .collection-details .top-frame { background-image: url("/fe/lol-collections/images/control-panel/square-hextech-frame-top.png"); background-repeat: no-repeat; background-size: contain; background-position-y: 1px; height: 18px; } .collections-application .champions-route .collection-details .collection-totals { padding: 0px 10px; text-align: center; background-image: url("/fe/lol-collections/images/control-panel/square-hextech-frame-mid.png"); background-size: contain; } .collections-application .champions-route .collection-details .total-owned.eternals-count { margin-top: 15px; } .collections-application .champions-route .collection-details .bottom-frame { background-repeat: no-repeat; background-size: contain; height: 18px; background-image: url("/fe/lol-collections/images/control-panel/square-hextech-frame-bot.png"); } .collections-application .champions-route .collection-search-panel { margin-top: 18px; } .collections-application .champions-route .collection-search-panel .collection-search-text { width: 100%; padding: 0 0 0 27px ; height: 30px; line-height: 30px; } .collections-application .champions-route .collection-search-panel .collection-ownership-filter { margin-top: 12px; } .collections-application .champions-route .collection-search-panel .collection-grouping-options { margin-top: 12px; } .collections-application .champions-route .collection-search-panel .collection-sort-options { margin-top: 12px; } .collections-application .champions-route .collection-search-panel lol-uikit-framed-dropdown { --framed-dropdown-scrollable-max-height: 200px; } .collections-application .champions-route .champion-grid { position: absolute; top: 136px; left: 260px; width: 794px; height: 582px; } .collections-application .champions-route .no-matching-champions { align-items: center; justify-content: center; height: 100%; display: flex; } .collections-application .champions-route .item-grid { height: 100%; position: relative; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 1%, #000 99%, transparent 100%); } .collections-application .champions-route .item-grid .item-grid-scrollable { direction: ltr ; } .collections-application .champions-route .item-grid .group-separator { width: 750px; border: solid #1b292a; border-width: 1px 0 0 0; margin: 0 0 16px 0; } .collections-application .champions-route .item-grid .group-wrapper { margin: 8px; } .collections-application .champions-route .item-grid .group-name { display: inline; } .collections-application .champions-route .item-grid .group-breakdown { display: inline; } .collections-application .champions-route .item-grid .group-owned-count { margin: 0 0 0 32px; } .collections-application .champions-route .item-grid .group-total-count { margin: 0 0 0 8px; } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .collections-application .chromas-route { animation-name: fadeIn; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; } .collections-application .chromas-route .collection-side-panel { position: absolute; width: 194px; top: 136px; left: 32px; } .collections-application .chromas-route .chroma-grid { position: absolute; top: 136px; left: 264px; width: 790px; height: 582px; } .collections-application .chromas-route .no-matching-chromas { align-items: center; justify-content: center; height: 100%; display: flex; } .collections-application .chromas-route .item-grid { height: 100%; position: relative; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 1%, #000 99%, transparent 100%); } .collections-application .chromas-route .item-grid .group-separator { width: 750px; border: solid #1b292a; border-width: 1px 0 0 0; margin: 0 0 16px 0; } .collections-application .chromas-route .item-grid .group-wrapper { margin: 8px; height: 22px; } .collections-application .chromas-route .item-grid .group-name-major { display: inline; } .collections-application .chromas-route .item-grid .group-name-minor { display: inline; } .collections-application .chromas-route .item-grid .group-breakdown { display: inline; } .collections-application .chromas-route .item-grid .group-breakdown.minor-breakdown { font-size: 14px; } .collections-application .chromas-route .item-grid .group-owned-count { margin: 0 0 0 32px; } .collections-application .chromas-route .item-grid .group-total-count { margin: 0 0 0 8px; } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .collections-application .loading-section { width: 1055px; height: 718px; display: flex; justify-content: center; align-items: center; } .runes-route { padding: 139px 0 0 35px; animation-name: fadeIn; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; } .collections-application .skins-route { animation-name: fadeIn; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; } .collections-application .skins-route .collection-side-panel { position: absolute; width: 194px; top: 136px; left: 32px; } .collections-application .skins-route .skins-grid { position: absolute; top: 136px; left: 264px; width: 790px; height: 582px; } .collections-application .skins-route .no-matching-skins { align-items: center; justify-content: center; height: 100%; display: flex; } .collections-application .skins-route .item-grid { height: 100%; position: relative; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 1%, #000 99%, transparent 100%); } .collections-application .skins-route .item-grid .group-separator { width: 750px; border: solid #1b292a; border-width: 1px 0 0 0; margin: 0 0 16px 0; } .collections-application .skins-route .item-grid .group-wrapper { margin: 8px; height: 22px; } .collections-application .skins-route .item-grid .group-name-major { display: inline; } .collections-application .skins-route .item-grid .group-description-major { text-align: center; } .collections-application .skins-route .item-grid .group-name-minor { display: inline; } .collections-application .skins-route .item-grid .group-breakdown { display: inline; } .collections-application .skins-route .item-grid .group-breakdown.minor-breakdown { font-size: 14px; } .collections-application .skins-route .item-grid .group-owned-count { margin: 0 0 0 32px; } .collections-application .skins-route .item-grid .group-total-count { margin: 0 0 0 8px; } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .collections-application .spells-route { padding: 139px 0 0 35px; -webkit-user-select: none; } .collections-application .summoner-icons-route { animation-name: fadeIn; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; } .collections-application .summoner-icons-route .collection-side-panel { position: absolute; width: 194px; top: 136px; left: 32px; } .collections-application .summoner-icons-route .sumoner-icon-grid { position: absolute; top: 136px; left: 264px; width: 790px; height: 582px; } .collections-application .summoner-icons-route .no-matching-summoner-icons { align-items: center; justify-content: center; height: 100%; display: flex; } .collections-application .summoner-icons-route .item-grid { height: 100%; position: relative; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 1%, #000 99%, transparent 100%); } .collections-application .summoner-icons-route .item-grid .group-separator { width: 750px; border: solid #1b292a; border-width: thin 0 0 0; margin: 0 0 16px 0; } .collections-application .summoner-icons-route .item-grid .group-wrapper { margin: 8px; height: 22px; } .collections-application .summoner-icons-route .item-grid .group-name-major { display: inline; } .collections-application .summoner-icons-route .item-grid .group-name-minor { display: inline; } .collections-application .summoner-icons-route .item-grid .group-breakdown { display: inline; } .collections-application .summoner-icons-route .item-grid .group-breakdown.minor-breakdown { font-size: 14px; } .collections-application .summoner-icons-route .item-grid .group-owned-count { margin: 0 0 0 32px; } .collections-application .summoner-icons-route .item-grid .group-total-count { margin: 0 0 0 8px; } .collections-application .summoner-icons-route .save-summoner-icon-button { position: absolute; right: 25px ; left: auto ; top: 0; } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .collections-application .wards-route { animation-name: fadeIn; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; } .collections-application .wards-route .collection-side-panel { position: absolute; width: 194px; top: 136px; left: 32px; } .collections-application .wards-route .wards-grid { position: absolute; top: 136px; left: 264px; width: 790px; height: 582px; } .collections-application .wards-route .no-matching-wards { align-items: center; justify-content: center; height: 100%; display: flex; } .collections-application .wards-route .item-grid { height: 100%; position: relative; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 1%, #000 99%, transparent 100%); } .collections-application .wards-route .item-grid .group-separator { width: 750px; border: solid #1b292a; border-width: thin 0 0 0; margin: 0 0 16px 0; } .collections-application .wards-route .item-grid .group-wrapper { margin: 8px; height: 22px; } .collections-application .wards-route .item-grid .group-name-major { display: inline; } .collections-application .wards-route .item-grid .group-name-minor { display: inline; } .collections-application .wards-route .item-grid .group-breakdown { display: inline; } .collections-application .wards-route .item-grid .group-breakdown.minor-breakdown { font-size: 14px; } .collections-application .wards-route .item-grid .group-owned-count { margin: 0 0 0 32px; } .collections-application .wards-route .item-grid .group-total-count { margin: 0 0 0 8px; } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .rcp-fe-lol-collections-champion-item { margin: 8px 8px; display: block; } .rcp-fe-lol-collections-champion-item .champion-thumbnail { position: relative; width: 134px; height: 200px; border: #1e2328 1px solid; cursor: pointer; } .rcp-fe-lol-collections-champion-item .champion-thumbnail:hover { border-image-source: linear-gradient(-45deg, #c89b3c, #fafafa); border-image-slice: 1; } .rcp-fe-lol-collections-champion-item .champion-thumbnail:hover .champion-image-container { opacity: 1; } .rcp-fe-lol-collections-champion-item .champion-thumbnail:hover .eternals-description-container.unowned .eternals-icon { background-image: url("/fe/lol-collections/images/item-element/Eternal-Icon-Dark-Grey.png"); } .rcp-fe-lol-collections-champion-item .champion-thumbnail:hover .eternals-description-container.unowned .eternals-description { color: #3c3c41; } .rcp-fe-lol-collections-champion-item .champion-thumbnail:hover .eternals-description-container.owned .eternals-icon { background-image: url("/fe/lol-collections/images/item-element/Eternal-Icon-Gold.png"); } .rcp-fe-lol-collections-champion-item .champion-thumbnail:hover .eternals-description-container.owned .eternals-description { color: #cdbe91; } .rcp-fe-lol-collections-champion-item.locked .champion-image-container { opacity: 0.6; } .rcp-fe-lol-collections-champion-item .champion-image-container { width: 100%; height: 100%; overflow: hidden; opacity: 0.8; } .rcp-fe-lol-collections-champion-item .champion-image { max-width: 100%; height: auto; } .rcp-fe-lol-collections-champion-item .champion-mastery-info { position: absolute; top: 164px; display: flex; width: 100%; height: 35px; background: linear-gradient(0deg, #010a13 0%, rgba(1,10,19,0.65) 100%); border-top: #1e2328 1px solid; pointer-events: none; } .rcp-fe-lol-collections-champion-item .champion-mastery-badge-container { height: 100%; width: 58px; } .rcp-fe-lol-collections-champion-item .champion-mastery-badge-container.is-flag { width: 48px; } .rcp-fe-lol-collections-champion-item .champion-mastery-badge { max-width: 100%; height: auto; } .rcp-fe-lol-collections-champion-item .champion-mastery-badge.is-flag { position: relative; top: -2px; left: -2px; } .rcp-fe-lol-collections-champion-item .champion-mastery-description-container { flex-grow: 2; height: 35px; } .rcp-fe-lol-collections-champion-item .champion-mastery-description { text-transform: capitalize; font-size: 12px; text-align: center; line-height: 35px; margin: 0; } .rcp-fe-lol-collections-champion-item .eternals-description-container { display: flex; justify-content: center; align-items: center; flex-grow: 2; } .rcp-fe-lol-collections-champion-item .eternals-description-container.unowned .eternals-icon { background-image: url("/fe/lol-collections/images/item-element/Eternal-Icon-Dark-Grey.png"); } .rcp-fe-lol-collections-champion-item .eternals-description-container.unowned .eternals-description { color: #3c3c41; } .rcp-fe-lol-collections-champion-item .eternals-description-container.owned .eternals-icon { background-image: url("/fe/lol-collections/images/item-element/Eternal-Icon-Grey.png"); } .rcp-fe-lol-collections-champion-item .eternals-icon { width: 11px; height: 15px; margin: 0 9px 0 0 ; background-size: contain; background-repeat: no-repeat; } .rcp-fe-lol-collections-champion-item .eternals-description { display: flex; height: 15px; position: relative; top: 1px; } .rcp-fe-lol-collections-champion-item .info-badge-wrapper { position: absolute; top: -10px; right: -10px ; left: auto ; } .rcp-fe-lol-collections-champion-item .info-badge-wrapper.badge-1 { top: 10px; } .rcp-fe-lol-collections-champion-item .info-badge-wrapper.badge-2 { top: 30px; } .rcp-fe-lol-collections-champion-item .info-badge-wrapper.badge-3 { top: 50px; } .rcp-fe-lol-collections-champion-item .info-badge-wrapper .info-badge { width: 24px; height: 24px; background-size: contain; background-position: top right; background-repeat: no-repeat; } .rcp-fe-lol-collections-champion-item .lock-wrapper { position: relative; top: -12px; pointer-events: none; } .rcp-fe-lol-collections-champion-item .lock-icon { background-image: url("/fe/lol-collections/images/purchase/icon-lock.png"); background-size: contain; width: 24px; height: 24px; margin: 0 auto; pointer-events: auto; } .rcp-fe-lol-collections-champion-item .lock-icon:hover { background-image: url("/fe/lol-collections/images/purchase/icon-lock-hover.png"); } .rcp-fe-lol-collections-champion-item .champion-name-container { margin: 16px 0; } .rcp-fe-lol-collections-champion-item .champion-name { font-size: 13px; text-align: center; } .champion-item-tooltip-container { width: 300px; } .champion-item-tooltip-container .top-content { display: flex; justify-content: center; align-items: center; } .champion-item-tooltip-container .name-progress-container { flex-grow: 1; display: flex; justify-content: flex-start; align-items: center; } .champion-item-tooltip-container .name-progress-container lol-uikit-radial-progress { width: 45px; height: 45px; margin: 0 10px 0 -2px ; } .champion-item-tooltip-container .name-progress-container .mastery-level { line-height: 44px; } .champion-item-tooltip-container .name-progress-container .champion-name { line-height: 44px; display: inline; } .champion-item-tooltip-container .info-container { padding-top: 12px; border-top: 1px solid #785a28; margin-top: 12px; text-align: left ; } .champion-item-tooltip-container .mastery-container { margin-bottom: 10px; } .champion-item-tooltip-container .mastery-score { display: flex; flex-direction: row; margin-bottom: 2px; } .champion-item-tooltip-container .mastery-icon { background-image: url("/fe/lol-collections/images/item-element/tooltip-champ-mastery.png"); background-size: contain; width: 17px; height: 13px; margin: 0 5px 0 0 ; } .champion-item-tooltip-container .mastery-title { margin-left: auto; } .champion-item-tooltip-container .info-badge { display: flex; flex-direction: row; align-items: center; } .champion-item-tooltip-container .info-badge-icon { background-size: contain; width: 22px; height: 22px; margin: 0 3px 0 0 ; } .champion-item-tooltip-container .info-badge-icon.rental-icon { background-image: url("/fe/lol-collections/images/item-element/Rental.png"); } .champion-item-tooltip-container .info-badge-icon.free-to-play-icon { background-image: url("/fe/lol-collections/images/item-element/Free-Rotation.png"); } .champion-item-tooltip-container .info-badge-icon.chest-granted-icon { background-image: url("/fe/lol-collections/images/item-element/Hextech-Chest.png"); } .champion-item-tooltip-container .info-badge-icon.loyalty-icon { background-image: url("/fe/lol-collections/images/item-element/Loyalty.png"); } .champion-item-tooltip-container .eternals-container { margin: 10px 0px; } .champion-item-tooltip-container .eternals-container h6 { margin-bottom: 6px; } .champion-item-tooltip-container .eternals-set { display: flex; justify-content: space-between; margin-bottom: 2px; align-items: center; } .champion-item-tooltip-container .eternals-set-lock { background-image: url("/fe/lol-collections/images/item-element/tooltip-lock.png"); background-size: contain; width: 9px; height: 14px; } .champion-item-tooltip-container .eternals-set-icon { background-image: url("/fe/lol-collections/images/item-element/Eternal-Icon-Dark-Gold.png"); background-size: contain; background-repeat: no-repeat; background-position: center; width: 14px; height: 14px; margin: 0 3px 0 0 ; } .champion-item-tooltip-container .eternals-set-icon.complete { background-image: url("/fe/lol-collections/images/item-element/Eternal-Icon-Dark-Gold.png"); } .champion-item-tooltip-container .eternals-set-icon.incomplete { background-image: url("/fe/lol-collections/images/item-element/Eternal-Icon-Gold.png"); } .champion-item-tooltip-container .set-complete { color: #c8aa6e; } .champion-item-tooltip-container .eternals-set-count { color: #cdbe91; } .champion-item-tooltip-container .eternals-set-complete-wrapper { display: flex; flex-direction: row; } .champion-item-tooltip-container .eternals-set-complete-wrapper .eternals-set-count, .champion-item-tooltip-container .eternals-set-complete-wrapper .set-complete { position: relative; top: 1px; } .rcp-fe-lol-collections-chroma-item { width: 170px; height: 180px; margin: 10px; } .rcp-fe-lol-collections-chroma-item .inventory-item-image-container.owned { clip-path: polygon(14px 0px, 4px 10px, 4px 36px, 6px 38px, 6px 128px, 4px 129px, 4px 141px, 0px 144px, 0px 154px, 11px 163px, 35px 163px, 38px 160px, 130px 160px, 130px 160px, 132px 163px, 156px 163px, 169px 153px, 169px 145px, 164px 141px, 164px 129px, 162px 127px, 162px 39px, 164px 36px, 164px 9px, 155px 1px); } .rcp-fe-lol-collections-chroma-item .inventory-item-image { max-height: 164px; } .rcp-fe-lol-collections-chroma-item .lock-wrapper { bottom: 7px; width: 170px; } .rcp-fe-lol-collections-chroma-item .lock-icon { width: 36px; height: 36px; margin: 0 auto; } .rcp-fe-lol-collections-chroma-item .border-wrapper { top: 8px; } .rcp-fe-lol-collections-chroma-item .border-wrapper .border { width: 170px; height: 178px; } .rcp-fe-lol-collections-chroma-item .border-wrapper.normal .border { height: 174px; } .rcp-fe-lol-collections-chroma-item .border-wrapper.legendary .border { height: 182px; } .rcp-fe-lol-collections-chroma-item .gem-wrapper { bottom: 0px; width: 170px; } .rcp-fe-lol-collections-chroma-item .gem-wrapper .gem.rare { width: 29px; height: 28px; } .rcp-fe-lol-collections-chroma-item .gem-wrapper .gem.epic { width: 38px; height: 32px; } .rcp-fe-lol-collections-chroma-item .gem-wrapper .gem.legendary { width: 37px; height: 36px; } .rcp-fe-lol-collections-chroma-item .gem-wrapper .gem.mythic { width: 34px; height: 32px; } .rcp-fe-lol-collections-chroma-item .gem-wrapper .gem.ultimate { width: 34px; height: 38px; } .rcp-fe-lol-collections-chroma-item .linger-video-wrapper { top: -20px; left: -21px; width: 203px; overflow: hidden; } .rcp-fe-lol-collections-chroma-item .linger-video-wrapper .linger-video { width: 204px; } .rcp-fe-lol-collections-collection-controls { position: relative; width: 100%; height: 256px; } .rcp-fe-lol-collections-collection-controls .collection-search { position: absolute; top: 8px; width: 100%; } .rcp-fe-lol-collections-collection-controls .collection-search-input { width: 100%; padding: 0 0 0 27px ; height: 30px; line-height: 30px; } .rcp-fe-lol-collections-collection-controls .collection-filters { position: absolute; top: 56px; width: 100%; } .rcp-fe-lol-collections-collection-controls .collection-availability-filter { margin-top: 12px; } .rcp-fe-lol-collections-collection-controls .collection-grouping-sorting { position: absolute; top: 124px; width: 100%; } .rcp-fe-lol-collections-collection-controls .collection-grouping-sorting lol-uikit-framed-dropdown { --framed-dropdown-scrollable-max-height: 200px; } .rcp-fe-lol-collections-collection-controls .collection-sort-options { margin-top: 12px; } .rcp-fe-lol-collections-collection-details .top-frame { background-image: url("/fe/lol-collections/images/control-panel/control-panel-frame-top.png"); background-repeat: no-repeat; background-size: contain; background-position-y: 1px; height: 145px; } .rcp-fe-lol-collections-collection-details .collection-owned-totals { position: absolute; top: 34px; width: 194px; display: flex; flex-direction: column; align-items: center; } .rcp-fe-lol-collections-collection-details .owned-total-header { text-transform: uppercase; margin-top: 5px; max-width: 100px; text-align: center; } .rcp-fe-lol-collections-collection-details .bottom-frame { background-repeat: no-repeat; background-size: contain; height: 18px; background-image: url("/fe/lol-collections/images/control-panel/control-panel-frame-bot.png"); } .rcp-fe-lol-collections-collection-details .collection-info-breakdown { background-image: url("/fe/lol-collections/images/control-panel/control-panel-frame-mid.png"); background-size: contain; display: flex; flex-direction: column; } .rcp-fe-lol-collections-collection-details .breakdown-separator { width: 90%; } .rcp-fe-lol-collections-collection-details .collection-tier-information { display: flex; flex-wrap: wrap; padding: 0 5px; justify-content: center; margin: 8px; min-height: 50px; } .rcp-fe-lol-collections-collection-details .item { display: flex; width: 34px; flex-direction: column; align-items: center; text-align: center; margin-top: 7px; } .rcp-fe-lol-collections-collection-details .count { margin-bottom: 0px; margin-top: 8px; } .rcp-fe-lol-collections-collection-details .icon-wrapper { display: flex; align-items: center; text-align: center; height: 20px; width: 20px; margin: auto; } .rcp-fe-lol-collections-collection-details .icon { max-height: 20px; max-width: 20px; } .rcp-fe-lol-collections-collection-details .clickable-icon { cursor: pointer; } .rcp-fe-lol-collections-collection-details .collection-bottom-info { display: flex; flex-direction: row; justify-content: center; } .rcp-fe-lol-collections-collection-details .collection-legacy-info { margin: 8px 10px 0px 10px; } .rcp-fe-lol-collections-collection-details .collection-chroma-info { margin: 8px 10px 0px 10px; } .rcp-fe-lol-collections-collection-details .icon-legacy { width: 23px; height: 23px; } .rcp-fe-lol-collections-collection-details .legacy-count { margin-top: 5px; margin-bottom: 0; text-align: center; } .collections-sub-nav-component { position: absolute; top: 0; } lol-uikit-navigation-item.hidden { display: none; } .rcp-fe-lol-collections-inventory-item { pointer-events: auto; } .rcp-fe-lol-collections-inventory-item:hover .inventory-item-thumbnail.available { cursor: pointer; } .rcp-fe-lol-collections-inventory-item:hover .inventory-item-thumbnail.unavailable { cursor: auto; } .rcp-fe-lol-collections-inventory-item:hover .inventory-item-thumbnail.has-details { cursor: pointer; } .rcp-fe-lol-collections-inventory-item:hover .inventory-item-image-container, .rcp-fe-lol-collections-inventory-item:hover .inventory-item-image-container.owned { opacity: 1; } .rcp-fe-lol-collections-inventory-item:hover .lock-icon .no-details { background-image: url("/fe/lol-collections/images/purchase/icon-lock-hover.png"); } .rcp-fe-lol-collections-inventory-item .inventory-item-thumbnail.unowned { border: #3c3c41 thin solid; } .rcp-fe-lol-collections-inventory-item .inventory-item-image-container { display: flex; justify-content: center; align-items: center; background-image: url("/fe/lol-collections/images/summoner-rift-background.jpg"); opacity: 0.6; } .rcp-fe-lol-collections-inventory-item .inventory-item-image-container.owned { opacity: 0.8; } .rcp-fe-lol-collections-inventory-item .inventory-item-image-container.selected, .rcp-fe-lol-collections-inventory-item .inventory-item-image-container.current { opacity: 1; } .rcp-fe-lol-collections-inventory-item .item-video { display: none; max-width: 100%; } .rcp-fe-lol-collections-inventory-item .emblem { position: absolute; display: flex; justify-content: center; align-items: flex-start; left: 0; bottom: 40px; width: 100%; max-height: 74px; } .rcp-fe-lol-collections-inventory-item .emblem .emblem-img { max-width: 100px; } .rcp-fe-lol-collections-inventory-item .lock-wrapper { position: absolute; } .rcp-fe-lol-collections-inventory-item .lock-icon { background-image: url("/fe/lol-collections/images/purchase/icon-lock.png"); background-size: contain; } .rcp-fe-lol-collections-inventory-item .lock-icon.has-details:hover { background-image: url("/fe/lol-collections/images/purchase/icon-lock-hover.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper { position: absolute; } .rcp-fe-lol-collections-inventory-item .border-wrapper.unowned { display: none; } .rcp-fe-lol-collections-inventory-item .border-wrapper .border { background-repeat: no-repeat; background-position: center; } .rcp-fe-lol-collections-inventory-item .border-wrapper.normal.normal .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-normal-gradient.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.normal.normal .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_normal.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.normal.normal.selected .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-normal-selected.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.normal.normal.selected .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_normal.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.normal.normal.current .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-normal-current.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.normal.normal.current .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_normal.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.rare.rare .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-rare-gradient.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.rare.rare .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_rare.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.rare.rare.selected .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-rare-selected.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.rare.rare.selected .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_rare.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.rare.rare.current .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-rare-current.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.rare.rare.current .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_rare.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.epic.epic .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-epic-gradient.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.epic.epic .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_epic.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.epic.epic.selected .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-epic-selected.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.epic.epic.selected .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_epic.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.epic.epic.current .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-epic-current.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.epic.epic.current .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_epic.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.legendary.legendary .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-legendary-gradient.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.legendary.legendary .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_legendary.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.legendary.legendary.selected .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-legendary-selected.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.legendary.legendary.selected .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_legendary.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.legendary.legendary.current .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-legendary-current.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.legendary.legendary.current .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_legendary.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.mythic.mythic .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-mythic-gradient.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.mythic.mythic .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_mythic.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.mythic.mythic.selected .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-mythic-selected.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.mythic.mythic.selected .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_mythic.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.mythic.mythic.current .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-mythic-current.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.mythic.mythic.current .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_mythic.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.ultimate.ultimate .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-ultimate-gradient.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.ultimate.ultimate .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_ultimate.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.ultimate.ultimate.selected .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-ultimate-selected.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.ultimate.ultimate.selected .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_ultimate.png"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.ultimate.ultimate.current .border.item-type-general { background-image: url("/fe/lol-collections/images/item-element/borders/border-ultimate-current.svg"); } .rcp-fe-lol-collections-inventory-item .border-wrapper.ultimate.ultimate.current .border.item-type-skin { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_ultimate.png"); } .rcp-fe-lol-collections-inventory-item .gem-wrapper { position: absolute; } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem { background-repeat: no-repeat; background-size: contain; width: 0; height: 0; margin: 0 auto; } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.normal { background-image: none; } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.rare { background-image: url("/fe/lol-collections/images/gems/rare.png"); } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.epic { background-image: url("/lol-game-data/assets/v1/rarity-gem-icons/epic.png"); } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.legendary { background-image: url("/lol-game-data/assets/v1/rarity-gem-icons/legendary.png"); } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.mythic { background-image: url("/lol-game-data/assets/v1/rarity-gem-icons/mythic.png"); } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.ultimate { background-image: url("/lol-game-data/assets/v1/rarity-gem-icons/ultimate.png"); } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.cn-gem-0 { background-image: none; } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.cn-gem-1 { background-image: url("/lol-game-data/assets/v1/rarity-gem-icons/cn-gem-1.png"); } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.cn-gem-2 { background-image: url("/lol-game-data/assets/v1/rarity-gem-icons/cn-gem-2.png"); } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.cn-gem-3 { background-image: url("/lol-game-data/assets/v1/rarity-gem-icons/cn-gem-3.png"); } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.cn-gem-4 { background-image: url("/lol-game-data/assets/v1/rarity-gem-icons/cn-gem-4.png"); } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.cn-gem-5 { background-image: url("/lol-game-data/assets/v1/rarity-gem-icons/cn-gem-5.png"); } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.cn-gem-7 { background-image: url("/lol-game-data/assets/v1/rarity-gem-icons/cn-gem-7.png"); } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.cn-gem-8 { background-image: url("/lol-game-data/assets/v1/rarity-gem-icons/cn-gem-8.png"); } .rcp-fe-lol-collections-inventory-item .gem-wrapper .gem.cn-gem-9 { background-image: url("/lol-game-data/assets/v1/rarity-gem-icons/cn-gem-9.png"); } .rcp-fe-lol-collections-inventory-item .linger-video-wrapper { position: absolute; } .rcp-fe-lol-collections-inventory-item .linger-video-wrapper .linger-video { display: block; } .rcp-fe-lol-collections-inventory-item .linger-video-wrapper .linger-video.hidden { display: none; } .quest-skin-info { display: flex; flex-direction: row; justify-content: center; color: #a09b8c; } .quest-skin-info.badge { position: absolute; top: -9px; left: 50%; width: 58px; margin-left: -29px; border-radius: 3px; background: #010a13; z-index: 1; } .quest-skin-info.badge.owned { border: 1px solid #785a28; } .quest-skin-info.badge.unowned { border: 1px solid #3c3c41; } .quest-skin-info .quest-skin-ownership { line-height: 18px; } .quest-skin-info .quest-skin-icon { width: 20px; height: 18px; background-repeat: no-repeat; background-size: contain; margin-right: 5px; background-position: center; background-position-y: 2px; background-image: url("/fe/lol-collections/images/item-element/tripple-mask-grey2.png"); } .quest-skin-info.unowned { color: #5b5a56; } .quest-skin-info.unowned .quest-skin-icon { background-image: url("/fe/lol-collections/images/item-element/tripple-mask-grey.png"); } .quest-skin-info.owned { color: #c8aa6e; } .quest-skin-info.owned .quest-skin-icon { background-image: url("/fe/lol-collections/images/item-element/tripple-mask-gold.png"); } .inventory-item-tooltip-container .top-content { display: flex; justify-content: center; align-items: center; } .inventory-item-tooltip-container .top-content .gem { width: 18px; height: 18px; } .inventory-item-tooltip-container .top-content .inventory-item-name { flex-grow: 2; margin: 0 4px; } .inventory-item-tooltip-container .info-container { margin-top: 12px; } .inventory-item-tooltip-container .info-container.separator { border-top: thin solid #785a28; padding-top: 16px; } .inventory-item-tooltip-container .info-container .row { margin: 0 0 8px 0; } .inventory-item-tooltip-container .info-container .gold-text { color: #c89b3c; } .inventory-item-tooltip-container .info-container .legacy-info { display: flex; align-items: center; justify-content: center; } .inventory-item-tooltip-container .info-container .legacy-icon { width: 20px; height: 20px; margin: 0 5px; background-size: contain; background-repeat: no-repeat; background-image: url("/fe/lol-collections/images/control-panel/icon-legacy.png"); } .inventory-item-tooltip-container .info-container .chroma-info { position: absolute; bottom: 16px; right: 16px; } .inventory-item-tooltip-container .info-container .chroma-icon { width: 20px; height: 20px; } .inventory-item-tooltip-container .info-container .price { display: flex; align-items: center; justify-content: center; } .inventory-item-tooltip-container .info-container .price .initial-cost { color: #dd2d38; text-decoration: line-through; margin: 0 5px; } .inventory-item-tooltip-container .info-container .price .cost { margin: 0 5px; } .inventory-item-tooltip-container .info-container .price .cost.IP { margin: 0 20px 0 0; } .inventory-item-tooltip-container .info-container .price .currency { width: 20px; height: 20px; background-repeat: no-repeat; background-size: contain; } .inventory-item-tooltip-container .info-container .price .currency.RP { background: url("/fe/lol-static-assets/images/icon-rp-24.png"); background-size: contain; } .inventory-item-tooltip-container .info-container .price .currency.IP { background-image: url("/fe/lol-collections/images/currencies/icon-blue-essence.png"); margin: 0 1px 0 0; } .rcp-fe-lol-collections-legacy-app-mount .legacy-viewport { padding: 139px 0 0 35px; -webkit-user-select: none; } .summoner-spells-root-component .replay-button { float: left; top: 18px; left: 4px ; position: relative; width: auto; height: auto; } .summoner-spells-root-component .replay-button .replay-button-container #replay-button-preload { display: none; background: url("/fe/lol-collections/images/spells/button-replay-normal.png"), url("/fe/lol-collections/images/spells/button-replay-hover.png"), url("/fe/lol-collections/images/spells/button-replay-click.png"), url("/fe/lol-collections/images/spells/button-replay-disabled.png"); } .summoner-spells-root-component .replay-button .replay-button-container .replay-button-img { display: inline-block; height: 50px; width: 50px; background: url("/fe/lol-collections/images/spells/button-replay-normal.png") no-repeat center center; background-size: 100%; } .summoner-spells-root-component .replay-button .replay-button-container .enabled.replay-button-img:hover { background-image: url("/fe/lol-collections/images/spells/button-replay-hover.png"); } .summoner-spells-root-component .replay-button .replay-button-container .enabled.replay-button-img:active { background-image: url("/fe/lol-collections/images/spells/button-replay-click.png"); } .summoner-spells-root-component .replay-button .replay-button-container .disabled.replay-button-img { background-image: url("/fe/lol-collections/images/spells/button-replay-disabled.png"); cursor: default; } .rcp-fe-lol-collections-skin-item-header .group-wrapper-universe { display: flex; height: 48px; justify-content: center; align-items: center; } .rcp-fe-lol-collections-skin-item-header .universe-decorator { height: 16px; max-height: 16px; } .rcp-fe-lol-collections-skin-item-header .universe-title { margin: 0 12px 0 12px; } .rcp-fe-lol-collections-skin-item .inventory-item-thumbnail { width: 134px; height: 194px; margin: 0 10px; overflow: hidden; } .rcp-fe-lol-collections-skin-item .inventory-item-image-container.owned { clip-path: polygon(12px 2px, 3px 12px, 3px 36px, 5px 38px, 5px 159px, 3px 162px, 4px 171px, 0px 173px, 0px 184px, 11px 193px, 117px 193px, 130px 184px, 130px 173px, 126px 171px, 126px 162px, 125px 159px, 125px 38px, 128px 36px, 128px 12px, 118px 2px, 70px 2px, 65px 8px, 60px 2px); } .rcp-fe-lol-collections-skin-item .inventory-item-image { max-width: 100%; height: auto; } .rcp-fe-lol-collections-skin-item .lock-wrapper { bottom: 13px; width: 134px; } .rcp-fe-lol-collections-skin-item .lock-icon { width: 30px; height: 30px; margin: 0 auto; } .rcp-fe-lol-collections-skin-item .border-wrapper { top: -5px; } .rcp-fe-lol-collections-skin-item .border-wrapper .border { width: 134px; height: 226px; background-position: 0px 0px; background-size: contain; } .rcp-fe-lol-collections-skin-item .gem-wrapper { bottom: 19px; width: 134px; } .rcp-fe-lol-collections-skin-item .gem-wrapper .gem.rare { width: 23px; height: 23px; } .rcp-fe-lol-collections-skin-item .gem-wrapper .gem.epic { width: 28px; height: 26px; } .rcp-fe-lol-collections-skin-item .gem-wrapper .gem.legendary { width: 27px; height: 23px; } .rcp-fe-lol-collections-skin-item .gem-wrapper .gem.mythic { width: 24px; height: 24px; } .rcp-fe-lol-collections-skin-item .gem-wrapper .gem.ultimate { width: 23px; height: 23px; } .rcp-fe-lol-collections-skin-item .gem-wrapper .gem.cn-gem-1 { width: 28px; height: 26px; } .rcp-fe-lol-collections-skin-item .gem-wrapper .gem.cn-gem-2 { width: 28px; height: 26px; } .rcp-fe-lol-collections-skin-item .gem-wrapper .gem.cn-gem-3 { width: 28px; height: 26px; } .rcp-fe-lol-collections-skin-item .gem-wrapper .gem.cn-gem-4 { width: 27px; height: 23px; } .rcp-fe-lol-collections-skin-item .gem-wrapper .gem.cn-gem-5 { width: 27px; height: 23px; } .rcp-fe-lol-collections-skin-item .gem-wrapper .gem.cn-gem-7 { width: 24px; height: 24px; } .rcp-fe-lol-collections-skin-item .gem-wrapper .gem.cn-gem-8 { width: 24px; height: 24px; } .rcp-fe-lol-collections-skin-item .gem-wrapper .gem.cn-gem-9 { width: 23px; height: 23px; } .rcp-fe-lol-collections-skin-item .linger-video-wrapper { top: -24px; left: -20px; width: 173px; overflow: hidden; } .rcp-fe-lol-collections-skin-item .linger-video-wrapper .linger-video { width: 174px; backface-visibility: hidden; } .summoner-spells-root-component .collection-spell-name, .summoner-spells-root-component .collection-spell-level, .collections-error-message { font-family: var(--font-display); } .summoner-spells-root-component .collection-spell-icon-label, .summoner-spells-root-component .collection-spell-gametypes, .summoner-spells-root-component .collection-spell-desc { font-family: var(--font-body); } .summoner-spells-root-component .loading-spinner { position: fixed; top: 0; left: 0; width: 1055px; height: 718px; display: flex; justify-content: center; align-items: center; } .summoner-spells-root-component .loading-fade-in { -webkit-animation: fade-in 0.5s forwards; } @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } .summoner-spells-root-component .loading-hidden { display: none; } .summoner-spells-root-component .collection-spell-icons { width: 442px; margin-top: 1px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin-left: -3px; direction: ltr; } .summoner-spells-root-component .collection-spell-icon-container { position: relative; margin-right: 45px; } .summoner-spells-root-component .collection-spell-icon { border: 2px solid transparent; } .summoner-spells-root-component .collection-spell-icon-selected { border: 2px solid transparent; -webkit-border-image: linear-gradient(to top, #c8aa6e 0%, #c89b3c 44%, #a07b32 59%, #785a28 100%); border-image-slice: 1; } .summoner-spells-root-component .collection-spell-icon-selected+.collection-spell-icon-label { color: #f0e6d2; } .summoner-spells-root-component .collection-spell-icon-img { /** area player can click on **/ display: block; width: 57px; height: 57px; padding: 1px; opacity: 0.8; border: thin solid #3c3c41; } .summoner-spells-root-component .collection-spell-icon-img:hover { opacity: 1; -webkit-filter: brightness(1.3); } .summoner-spells-root-component .collection-spell-icon-img.collection-spell-icon-locked { opacity: 0.3; } .summoner-spells-root-component .collection-spell-icon-img.collection-spell-icon-locked:hover { opacity: 0.4; } .summoner-spells-root-component .collection-spell-icon-img-selected { opacity: 1; } .summoner-spells-root-component .collection-champion-lock-icon { position: absolute; height: 25px; width: 25px; margin-left: 20px; margin-top: -12px; background: url("/fe/lol-collections/images/spells/icon-lock-small.png") center center no-repeat; background-size: 25px; } .summoner-spells-root-component .collection-spell-icon-label { color: #a09b8c; height: 34px; width: 100%; position: relative; } .summoner-spells-root-component .collection-spell-icon-label-text { position: absolute; transform: translateX(-50%); left: 50%; top: 10px; min-width: 90px; text-align: center; } .summoner-spells-root-component .collection-spell-description-separator { width: 400px; margin: 17px 0 0; position: relative; height: 1px; border-width: 0; background-color: #f0e6d2; opacity: 0.25; } .summoner-spells-root-component .collection-spell-title-container { width: 352px ; float: left; direction: ltr; } .summoner-spells-root-component .collection-spell-name-container { position: relative; height: 45px; } .summoner-spells-root-component .collection-spell-text { position: absolute; bottom: 0; } .summoner-spells-root-component .collection-spell-level-container { position: relative; height: 19px; } .summoner-spells-root-component .collection-spell-level { color: #a09b8c; } .summoner-spells-root-component .collection-spell-gametypes-container { width: auto ; position: relative; height: 33px; clear: both; direction: ltr; } .summoner-spells-root-component .collection-spell-desc-container { width: 319px; position: relative; margin-top: 16px; direction: ltr; } .rcp-fe-lol-collections-summoner-icon-header .group-wrapper-esports-event { display: flex; height: 48px; justify-content: center; align-items: center; } .rcp-fe-lol-collections-summoner-icon-header .esports-event-decorator { height: 16px; max-height: 16px; } .rcp-fe-lol-collections-summoner-icon-header .esports-event-title { margin: 0 12px 0 12px; } .rcp-fe-lol-collections-summoner-icon-item { width: 92px; height: 92px; margin: 1px; } .rcp-fe-lol-collections-summoner-icon-item .inventory-item-image-container { height: 92px; } .rcp-fe-lol-collections-summoner-icon-item .inventory-item-image-container.owned { clip-path: polygon(7px 1px, 1px 6px, 1px 21px, 2px 22px, 2px 70px, 1px 72px, 1px 78px, 0px 79px, 0px 86px, 7px 91px, 18px 90px, 19px 89px, 70px 89px, 72px 90px, 84px 90px, 90px 86px, 90px 79px, 89px 78px, 89px 72px, 88px 71px, 88px 21px, 89px 21px, 89px 5px, 89px 7px, 84px 1px); } .rcp-fe-lol-collections-summoner-icon-item .inventory-item-image { max-height: 90px; } .rcp-fe-lol-collections-summoner-icon-item .lock-wrapper { bottom: 0; width: 92px; } .rcp-fe-lol-collections-summoner-icon-item .lock-icon { width: 30px; height: 30px; margin: 0 auto; } .rcp-fe-lol-collections-summoner-icon-item .border-wrapper { top: 0; } .rcp-fe-lol-collections-summoner-icon-item .border-wrapper .border { width: 92px; height: 100px; } .rcp-fe-lol-collections-summoner-icon-item .gem-wrapper { bottom: 2px; width: 92px; } .rcp-fe-lol-collections-summoner-icon-item .gem-wrapper .gem.rare { width: 12px; height: 12px; } .rcp-fe-lol-collections-summoner-icon-item .gem-wrapper .gem.epic { width: 16px; height: 16px; } .rcp-fe-lol-collections-summoner-icon-item .gem-wrapper .gem.legendary { width: 17px; height: 17px; } .rcp-fe-lol-collections-summoner-icon-item .gem-wrapper .gem.mythic { width: 16px; height: 15px; } .rcp-fe-lol-collections-summoner-icon-item .gem-wrapper .gem.ultimate { width: 16px; height: 20px; } .rcp-fe-lol-collections-summoner-icon-item .linger-video-wrapper { top: -6px; left: -9px; width: 105px; overflow: hidden; } .rcp-fe-lol-collections-summoner-icon-item .linger-video-wrapper .linger-video { width: 106px; } .summoner-spells-root-component .collection-spell-video { height: 720px; width: 1055px; left: 0; top: 0; position: fixed; } .summoner-spells-root-component .video-fade-in { -webkit-animation: fade-in 0.5s forwards; } .summoner-spells-root-component .video-fade-out { -webkit-animation: fade-out 0.5s forwards; } .summoner-spells-root-component .video-fade { animation: fadeIn ease 0.5s; } @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @-moz-keyframes fadeId { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeId { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeId { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeId { 0% { opacity: 0; } 100% { opacity: 1; } } .rcp-fe-lol-collections-ward-item { width: 125px; height: 125px; margin: 12px; } .rcp-fe-lol-collections-ward-item .inventory-item-image-container.owned { clip-path: polygon(9px 0px, 5px 5px, 2px 8px, 2px 27px, 4px 29px, 4px 93px, 4px 94px, 2px 96px, 2px 105px, 0px 107px, 0px 115px, 8px 121px, 25px 121px, 27px 119px, 96px 119px, 98px 121px, 114px 121px, 122px 114px, 122px 107px, 119px 103px, 119px 95px, 118px 94px, 118px 30px, 120px 26px, 120px 7px, 118px 5px, 115px 3px, 113px 0px); } .rcp-fe-lol-collections-ward-item .inventory-item-image { max-height: 121px; } .rcp-fe-lol-collections-ward-item .lock-wrapper { bottom: 10px; width: 125px; } .rcp-fe-lol-collections-ward-item .lock-icon { width: 30px; height: 30px; margin: 0 auto; } .rcp-fe-lol-collections-ward-item .border-wrapper { top: 8px; left: 12px; } .rcp-fe-lol-collections-ward-item .border-wrapper .border { width: 123px; height: 137px; } .rcp-fe-lol-collections-ward-item .border-wrapper.normal .border { height: 134px; } .rcp-fe-lol-collections-ward-item .gem-wrapper { bottom: 2px; width: 125px; } .rcp-fe-lol-collections-ward-item .gem-wrapper .gem.rare { width: 23px; height: 23px; } .rcp-fe-lol-collections-ward-item .gem-wrapper .gem.epic { width: 31px; height: 24px; } .rcp-fe-lol-collections-ward-item .gem-wrapper .gem.legendary { width: 30px; height: 28px; } .rcp-fe-lol-collections-ward-item .gem-wrapper .gem.mythic { width: 28px; height: 26px; } .rcp-fe-lol-collections-ward-item .gem-wrapper .gem.ultimate { width: 28px; height: 29px; } .rcp-fe-lol-collections-ward-item .linger-video-wrapper { top: -5px; left: -10px; width: 141px; overflow: hidden; } .rcp-fe-lol-collections-ward-item .linger-video-wrapper .linger-video { width: 142px; } .collections-sub-nav-container { position: absolute; top: 88px; left: 32px; } .collections-application { position: absolute; top: 1px; width: 1055px; height: 718px; background: no-repeat center center fixed; background-size: cover; background-image: url("/fe/lol-collections/images/background.png"); animation-name: fadeIn; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; } .collections-application a { text-decoration: none; } .collections-application .collections-routes { width: 100%; height: 100%; } .collections-viewport { padding: 139px 0 0 35px; -webkit-user-select: none; } .collections-error-message { display: flex; justify-content: center; } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .inventory-card-details, .inventory-card-preset, .inventory-card-updated, .inventory-card-title, .inventory-card-choose-your-runes, .inventory-controls-counter { font-family: var(--font-display); } .inventory-search { font-family: var(--font-body); } .inventory-card-updated, .inventory-card-title, .inventory-search { -webkit-user-select: none; } .inventory-card-updated, .inventory-card-title, .inventory-search { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .inventory-card-updated, .inventory-card-title { text-transform: uppercase; } .inventory-card-updated:lang(ko-kr), .inventory-card-title:lang(ko-kr), .inventory-card-updated:lang(ja-jp), .inventory-card-title:lang(ja-jp), .inventory-card-updated:lang(tr-tr), .inventory-card-title:lang(tr-tr), .inventory-card-updated:lang(el-gr), .inventory-card-title:lang(el-gr), .inventory-card-updated:lang(th-th), .inventory-card-title:lang(th-th), .inventory-card-updated:lang(zh-tw), .inventory-card-title:lang(zh-tw) { text-transform: none; } .inventory-card-updated, .inventory-card-title { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .inventory-card-updated:lang(ja-jp), .inventory-card-title:lang(ja-jp) { font-size: 13px; } .inventory-card-updated:lang(ar-ae), .inventory-card-title:lang(ar-ae) { letter-spacing: 0; } .inventory-search { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .inventory-search:lang(ja-jp) { font-size: 13px; } .inventory-search:lang(ar-ae) { letter-spacing: 0; } .inventory-cards::-webkit-scrollbar, .inventory-cards ::-webkit-scrollbar { width: 11px; height: 11px; background-color: transparent; } .inventory-cards::-webkit-scrollbar-thumb, .inventory-cards ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 6px; background-clip: padding-box; min-height: 32px; background-color: #785a28; } .inventory-cards::-webkit-scrollbar-thumb:hover, .inventory-cards ::-webkit-scrollbar-thumb:hover { background-color: #c8aa6e; } .inventory-cards::-webkit-scrollbar-thumb:active, .inventory-cards ::-webkit-scrollbar-thumb:active { background-color: #463714; } .inventory-cards::-webkit-scrollbar-thumb:disabled, .inventory-cards ::-webkit-scrollbar-thumb:disabled { background-color: #a09b8c; } @-moz-keyframes perks-item-description-fade-in { from { opacity: 0; transform: translateX(10px); visibility: hidden; } to { opacity: 1; transform: translateX(0); visibility: visible; } } @-webkit-keyframes perks-item-description-fade-in { from { opacity: 0; transform: translateX(10px); visibility: hidden; } to { opacity: 1; transform: translateX(0); visibility: visible; } } @-o-keyframes perks-item-description-fade-in { from { opacity: 0; transform: translateX(10px); visibility: hidden; } to { opacity: 1; transform: translateX(0); visibility: visible; } } @keyframes perks-item-description-fade-in { from { opacity: 0; transform: translateX(10px); visibility: hidden; } to { opacity: 1; transform: translateX(0); visibility: visible; } } @-moz-keyframes perks-item-description-fade-out { from { opacity: 1; transform: translateX(0); visibility: visible; } to { opacity: 0; transform: translateX(10px); visibility: hidden; } } @-webkit-keyframes perks-item-description-fade-out { from { opacity: 1; transform: translateX(0); visibility: visible; } to { opacity: 0; transform: translateX(10px); visibility: hidden; } } @-o-keyframes perks-item-description-fade-out { from { opacity: 1; transform: translateX(0); visibility: visible; } to { opacity: 0; transform: translateX(10px); visibility: hidden; } } @keyframes perks-item-description-fade-out { from { opacity: 1; transform: translateX(0); visibility: visible; } to { opacity: 0; transform: translateX(10px); visibility: hidden; } } .inventory-card { background-color: #000; cursor: pointer; height: 277px; position: relative; width: 170px; } .inventory-card.invalid .inventory-card-content { -webkit-filter: grayscale(100%); } .inventory-card.invalid .inventory-card-bg { -webkit-filter: grayscale(100%); opacity: 0.8; } .inventory-card:not(:hover) .inventory-card-details { opacity: 0; } .inventory-card:not(:hover) .inventory-card-bg { transform: scale(1.02); -webkit-clip-path: polygon(1% 1%, 99% 1%, 99% 99%, 1% 99%); } .inventory-card:not(:hover) .inventory-card-bg:lang(ar-ae) { transform: scale(1.02) scaleX(-1); } .inventory-card:not(:hover) .inventory-card-preset { opacity: 0.7; } .inventory-card.dragging .inventory-card-details { opacity: 0 !important; transition: unset !important; } .inventory-card.dragging .inventory-card-bg { opacity: initial !important; transition: unset !important; } .inventory-card:hover .inventory-card-bg { opacity: 0.2; } .inventory-card:hover .inventory-card-icons:after { width: 100%; } .inventory-card:hover .inventory-card-preset { color: #cdbe91; } .inventory-card-invalid { background-color: rgba(0,0,0,0.4); border: 2px solid #ff2345; border-radius: 50%; box-shadow: 0 0 38px rgba(255,35,69,0.5) inset, 0 0 38px rgba(255,35,69,0.5); box-sizing: border-box; content: ''; height: 80px; left: calc(50% - 80px * 0.5); position: absolute; top: calc(47% - 80px * 0.5); width: 80px; } .inventory-card-invalid:after { background-color: #ff2345; content: ''; height: 24px; left: calc(50% - 26px * 0.5); position: absolute; top: calc(50% - 30px * 0.5); width: 26px; -webkit-mask-image: url("/fe/lol-collections/perks/images/exclamation.svg"); -webkit-mask-repeat: no-repeat; } .inventory-card-content { box-sizing: border-box; color: #aaa; cursor: pointer; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; } .inventory-card-bg-mask { height: 100%; position: absolute; width: 100%; } .inventory-card-bg { background-position: center center; background-size: cover; height: 100%; position: absolute; transition: opacity 0.2s, transform 0.2s, -webkit-clip-path 0.2s; width: 100%; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: none ; } .inventory-card-gradient { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0.05) 32%, rgba(0,0,0,0.26) 48%, rgba(0,0,0,0.81) 81%, rgba(0,0,0,0.94) 92%, #000 100%); height: 100%; position: absolute; width: 100%; } .inventory-card-details { border: thin solid; border-image: linear-gradient(to bottom, #fff, #c8aa6e) 1 100%; border-image-slice: 1; box-sizing: border-box; font-size: 10px; height: 100%; line-height: 13px; padding: 14px; position: absolute; text-transform: uppercase; top: 0; transition: opacity 0.2s; width: 100%; letter-spacing: 0.3pt; } .inventory-card-style-name.precision { color: #c8aa6e; } .inventory-card-style-name.domination { color: #dc4747; } .inventory-card-style-name.sorcery { color: #6c75f5; } .inventory-card-style-name.inspiration { color: #48b4be; } .inventory-card-style-name.resolve { color: #a4d08d; } .inventory-card-ul { padding: 0 0 0 15px ; list-style-type: none; } .inventory-card-li { padding-bottom: 1px; } .inventory-card-li:before { content: "\25C6"; margin: 0 5px 0 -15px ; display: inline-block; } .inventory-card-li.keystone:before { transform: scale(1.5); } .inventory-card-preset { font-size: 10px; letter-spacing: 0.1em; padding: 0 14px; position: relative; text-transform: uppercase; transition: color 0.2s, opacity 0.2s; } .inventory-card-dot { margin-right: 5px; } .inventory-card-updated { color: #c89b3c; line-height: 13px; margin-bottom: 8px; padding: 0 14px; position: relative; } .inventory-card-title { -webkit-font-feature-settings: normal; line-height: 13px; margin-bottom: 12px; overflow: hidden; padding: 0 14px; position: relative; text-overflow: ellipsis; } .inventory-card-title:lang(ar-ae) { padding: 0 14px 3px; } .inventory-card-icons { align-items: center; border-top: thin solid rgba(255,255,255,0.25); display: flex; height: 48px; margin-left: 14px; position: relative; } .inventory-card-icons:lang(ar-ae) { margin-left: 0; margin-right: 14px; } .inventory-card-icons:after { border-top: thin solid rgba(200,170,110,0.4); content: ''; display: block; height: 1px; position: absolute; right: 0; top: -1px; transition: width 0.2s; width: 0; } .inventory-card-keystone { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; height: 45.5px; width: 45.5px; margin: -9.75px; margin-right: 0.25px; } .inventory-card-keystone:lang(ar-ae) { margin: -9.75px; margin-left: 0.25px; } .inventory-card-substyle { border: thin solid rgba(255,255,255,0.2); border-radius: 50%; box-sizing: border-box; height: 26px; width: 26px; } .inventory-card-substyle-inner { height: 100%; opacity: 0.8; transition: background-color 0.2s; -webkit-mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 70%; } .inventory-card-substyle-inner.domination { background-color: #d44242; -webkit-mask-image: url("/fe/lol-collections/perks/images/Domination/domination_icon_16.svg"); } .inventory-card-substyle-inner.inspiration { background-color: #49aab9; -webkit-mask-image: url("/fe/lol-collections/perks/images/Inspiration/inspiration_icon_16.svg"); } .inventory-card-substyle-inner.precision { background-color: #aea789; -webkit-mask-image: url("/fe/lol-collections/perks/images/Precision/precision_icon_16.svg"); } .inventory-card-substyle-inner.resolve { background-color: #a1d586; -webkit-mask-image: url("/fe/lol-collections/perks/images/Resolve/resolve_icon_16.svg"); } .inventory-card-substyle-inner.sorcery { background-color: #9faafc; -webkit-mask-image: url("/fe/lol-collections/perks/images/Sorcery/sorcery_icon_16.svg"); } .inventory-card-default { border: 5px solid rgba(0,0,0,0.5); box-sizing: border-box; content: ''; height: calc(100% + 1px * 2); left: -1px; position: absolute; top: -1px; width: calc(100% + 1px * 2); } .inventory-card-default:before { border: 16px solid transparent; border-right-color: rgba(0,0,0,0.5); border-top-color: rgba(0,0,0,0.5); content: ''; position: absolute; right: 0; top: 0; } .inventory-card-default:lang(ar-ae):before { right: auto; left: 0; border: 16px solid transparent; border-left-color: rgba(0,0,0,0.5); border-top-color: rgba(0,0,0,0.5); } .inventory-card-default:after { background: linear-gradient(to bottom, #dfe5e5 0%, #adb2b2 100%); content: ''; height: 30px; position: absolute; right: -2px ; left: auto ; top: -2px; width: 30px; -webkit-mask-image: url("/fe/lol-collections/perks/images/runes.svg"); -webkit-mask-position: 100% 0 ; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 18px; } .inventory-card-choose-your-runes { align-self: flex-start; font-size: 10px; padding: 5px 14px 5px 0; } .inventory-card-choose-your-runes:lang(ar-ae) { padding: 5px 0 5px 14px; } .inventory-card-create-border { --border-color: #cdbe91; } .inventory-cards { margin-left: -14px; max-height: 467px; overflow-y: auto; padding-top: 40px; direction: ltr; } .inventory-card-wrapper { display: inline-block; margin: 0 14px 28px; position: relative; vertical-align: top; direction: ltr; float: none ; } .inventory-cards-delete { position: absolute; right: 0 ; left: auto ; top: 0; transform: translate(50%, -50%) ; } .inventory-controls { align-items: center; border-bottom: thin solid rgba(255,255,255,0.25); display: flex; height: 40px; justify-content: space-between; padding: 0 28px 31px 0; direction: ltr; } .inventory-controls-left { align-items: center; display: flex; } .inventory-controls-right { align-items: center; display: flex; } #inventory-create-new-button { display: block; } .inventory-controls-counter { color: #cdbe91; font-size: 16px; font-weight: bold; letter-spacing: 1px; margin: 0 20px 0 0; } .inventory-controls-counter-divider { font-size: 14px; opacity: 0.2; padding: 0 6px; } .inventory-search-holder { position: relative; } .inventory-controls-preset-toggle { border-left: thin solid rgba(205,190,145,0.2); margin-left: 17px; padding: 4px 0 4px 17px; } .inventory-controls-preset-toggle:lang(ar-ae) { border-left: none; border-right: thin solid rgba(205,190,145,0.2); margin-left: 0; margin-right: 17px; padding: 4px 17px 4px 0; } .inventory-search { background: none; border: thin solid #695625; box-sizing: border-box; outline: none; padding: 6px 10px 6px 30px; width: 196px; } .inventory-magnifier { border: 2px solid #a09b8c; border-radius: 50%; box-sizing: border-box; height: 10px; left: 9px; right: auto; position: absolute; top: 9px; width: 10px; } .inventory-magnifier:after { background: #a09b8c; content: ''; display: block; height: 5px; left: 50%; position: absolute; top: 50%; transform: translate(-1px, 4px) rotate(-45deg); transform-origin: 50% -4px; width: 2px; } .perks-tutorial-tooltip-new-page { width: 170px; } .perks-tutorial-tooltip-preset-pages { width: 250px; } .inventory-mass-delete-button { display: block; margin: 0 0 0 10px; } .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title, .items-root-component .item-sets-browser .view-recommended-sets-container, .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text { font-family: var(--font-display); } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .more-champs, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .content, .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion .selected-champ-text { font-family: var(--font-body); } .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .more-champs, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .content, .items-root-component .item-sets-browser .view-recommended-sets-container, .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text, .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion .selected-champ-text { -webkit-user-select: none; } .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .more-champs, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .content, .items-root-component .item-sets-browser .view-recommended-sets-container, .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text, .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion .selected-champ-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title, .items-root-component .item-sets-browser .view-recommended-sets-container, .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text { text-transform: uppercase; } .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title:lang(ko-kr), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header:lang(ko-kr), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text:lang(ko-kr), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text:lang(ko-kr), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title:lang(ko-kr), .items-root-component .item-sets-browser .view-recommended-sets-container:lang(ko-kr), .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text:lang(ko-kr), .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title:lang(ja-jp), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header:lang(ja-jp), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text:lang(ja-jp), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text:lang(ja-jp), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title:lang(ja-jp), .items-root-component .item-sets-browser .view-recommended-sets-container:lang(ja-jp), .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text:lang(ja-jp), .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title:lang(tr-tr), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header:lang(tr-tr), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text:lang(tr-tr), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text:lang(tr-tr), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title:lang(tr-tr), .items-root-component .item-sets-browser .view-recommended-sets-container:lang(tr-tr), .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text:lang(tr-tr), .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title:lang(el-gr), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header:lang(el-gr), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text:lang(el-gr), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text:lang(el-gr), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title:lang(el-gr), .items-root-component .item-sets-browser .view-recommended-sets-container:lang(el-gr), .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text:lang(el-gr), .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title:lang(th-th), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header:lang(th-th), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text:lang(th-th), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text:lang(th-th), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title:lang(th-th), .items-root-component .item-sets-browser .view-recommended-sets-container:lang(th-th), .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text:lang(th-th), .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title:lang(zh-tw), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header:lang(zh-tw), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text:lang(zh-tw), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text:lang(zh-tw), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title:lang(zh-tw), .items-root-component .item-sets-browser .view-recommended-sets-container:lang(zh-tw), .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text:lang(zh-tw) { text-transform: none; } .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title, .items-root-component .item-sets-browser .view-recommended-sets-container, .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text { text-transform: none; } .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title:lang(ar-ae), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title:lang(ar-ae) { letter-spacing: 0; } .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title { letter-spacing: 0.025em; } .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title:lang(ar-ae), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .title:lang(ar-ae) { letter-spacing: 0; } .items-root-component .item-sets-browser .view-recommended-sets-container { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .items-root-component .item-sets-browser .view-recommended-sets-container:lang(ar-ae) { letter-spacing: 0; } .items-root-component .item-sets-browser .view-recommended-sets-container { letter-spacing: 0.025em; } .items-root-component .item-sets-browser .view-recommended-sets-container:lang(ar-ae) { letter-spacing: 0; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text, .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header:lang(ar-ae), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text:lang(ar-ae), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text:lang(ar-ae), .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text:lang(ar-ae) { letter-spacing: 0; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text, .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text { letter-spacing: 0.0375em; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text:lang(ar-ae), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text:lang(ar-ae), .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text:lang(ar-ae) { letter-spacing: 0; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .more-champs, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .content, .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion .selected-champ-text { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .more-champs:lang(ar-ae), .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .content:lang(ar-ae), .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion .selected-champ-text:lang(ar-ae) { letter-spacing: 0; } .items-root-component .loading-spinner { position: fixed; top: 0; left: 0; width: 1055px; height: 718px; display: flex; justify-content: center; align-items: center; } .items-root-component .item-sets-browser { animation: fadeIn 1s; } .items-root-component .item-sets-browser .item-sets-top-container { direction: ltr; margin-top: -11px; width: 1000px; height: 48px; } .items-root-component .item-sets-browser .item-sets-top-container .manage-custom-sets-title { color: #c8aa6e; } .items-root-component .item-sets-browser .item-sets-top-container .item-sets-search { width: 305px; float: right; margin-top: 4px; } .items-root-component .item-sets-browser .item-sets-top-container .action-button { float: right; margin: 6px; } .items-root-component .item-sets-browser .item-sets-top-container .action-button.hidden { display: none; } .items-root-component .item-sets-browser .item-sets-top-container .create-empty { margin-right: 12px; } .items-root-component .item-sets-browser .item-sets-top-container .item-set-file-input { display: none; } .items-root-component .item-sets-browser .item-sets-top-container .paste-area { float: right; width: 340px; height: 30px; margin-right: 15px; margin-top: 2px; } .items-root-component .item-sets-browser .item-sets-top-container .paste-area .paste-textarea { overflow: hidden; } .items-root-component .item-sets-browser .item-sets-top-container .paste-area.hidden { display: none; } .items-root-component .item-sets-browser .custom-item-sets-table { direction: ltr; width: 1000px; margin-top: 16px; } .items-root-component .item-sets-browser .custom-item-sets-table .col-1 { width: 262px; margin: 0 0 0 28px ; } .items-root-component .item-sets-browser .custom-item-sets-table .col-2 { width: 359px; } .items-root-component .item-sets-browser .custom-item-sets-table .col-3 { width: 200px; } .items-root-component .item-sets-browser .custom-item-sets-table .col-4 { width: 148px; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers { background-color: #1e2328; width: 100%; height: 32px; line-height: 32px; font-size: 0; direction: ltr; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers.transparent { opacity: 0; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header { display: inline-block; vertical-align: middle; text-align: center; cursor: default; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header.col-1 { text-align: left ; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header.col-2 { padding: 0 139px 0 0 ; width: 220px; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header.col-3 { padding: 0 0 0 10px ; width: 200px; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header .item-set-selector-all { pointer-events: auto; position: absolute; height: 33px; width: 23px; margin: -8px 0 0 -29px ; padding: 0 0 0 6px ; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-headers .item-sets-table-header .item-set-selector-all.hidden { display: none; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows { width: 1000px; height: 360px; overflow-x: hidden; overflow-y: auto; position: relative; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row { height: 60px; white-space: nowrap; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row:after { content: ''; position: absolute; height: 1px; width: 983px; margin-top: 59px; left: 5px; background-color: #1e2328; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-table-row-background { position: absolute; height: 60px; width: 983px; background: transparent; cursor: pointer; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-table-cell { position: relative; display: inline-flex; vertical-align: middle; align-items: center; height: 60px; pointer-events: none; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .title-text { color: #a09b8c; white-space: normal; overflow: hidden; text-overflow: ellipsis; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .item-set-selector { pointer-events: auto; position: absolute; width: 23px; height: 60px; margin: 0 0 0 -29px ; padding: 0 0 0 6px ; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-title .item-set-selector.hidden { display: none; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs { justify-content: flex-start; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .champ-display { display: inline-block; margin: 0 5px; border: 2px solid #3c3c41; border-radius: 50%; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .champ-display .champ-icon { width: 40px; height: 40px; -webkit-clip-path: circle(18px at center); transform: scale(1.09); vertical-align: middle; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .more-champs { margin-top: 5px; margin-left: 11px; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-champs .all-champ-text { color: #a09b8c; width: 214px; text-align: center; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-maps { justify-content: center; align-items: center; flex-direction: row ; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-maps .map-display { display: inline-block; margin: 0 10px; width: 27px; height: 27px; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-maps .map-display.map-11 { background: url(/fe/lol-collections/map_11_off.png) no-repeat center center; background-size: 24px; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-maps .map-display.map-11.associated { background: url(/fe/lol-collections/map_11_on.png) no-repeat center center; background-size: 24px; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-maps .map-display.map-12 { background: url(/fe/lol-collections/map_12_off.png) no-repeat center center; background-size: 25px; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-maps .map-display.map-12.associated { background: url(/fe/lol-collections/map_12_on.png) no-repeat center center; background-size: 25px; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-maps .map-display.map-10 { background: url(/fe/lol-collections/map_10_off.png) no-repeat center center; background-size: 27px; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-maps .map-display.map-10.associated { background: url(/fe/lol-collections/map_10_on.png) no-repeat center center; background-size: 27px; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-actions { justify-content: center; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-actions .more-button { width: 32px; height: 58px; margin-left: 47px; background: url("/fe/lol-collections/icon_ellipses.png") no-repeat center center; background-size: 16px; cursor: pointer; pointer-events: auto; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row .item-sets-actions .more-button:hover { -webkit-filter: brightness(2); } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row:hover { background-color: rgba(30,35,40,0.5); } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-table-row:hover .item-sets-title .title-text { color: #cdbe91; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row { display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; height: 160px; cursor: default; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .no-item-sets-row .content { width: 500px; text-align: center; margin-top: 16px; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-create-new-row { display: flex; align-items: center; align-content: center; justify-content: center; height: 60px; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-create-new-row .create-new-set-button, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-create-new-row .import-set-button { min-width: 200px; margin: 0 15px; } .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-create-new-row .create-new-set-button.hidden, .items-root-component .item-sets-browser .custom-item-sets-table .item-sets-table-rows .item-sets-create-new-row .import-set-button.hidden { display: none; } .items-root-component .item-sets-browser .view-recommended-sets-top { margin-top: 20px; height: 23px; } .items-root-component .item-sets-browser .view-recommended-sets-top:after { content: ''; position: absolute; height: 1px; width: 998px; left: 36px; bottom: 87px; background-color: #463714; } .items-root-component .item-sets-browser .view-recommended-sets-container { color: #cdbe91; display: flex; flex-direction: row ; justify-content: flex-start; align-items: center; align-content: flex-start; margin-top: 15px; padding: 0 10px; } .items-root-component .item-sets-browser .view-recommended-sets-container .recommend-a-set-text { direction: ltr; flex: 0 0 271px; text-align: left ; padding: 0 0 0 18px ; cursor: default; } .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion { flex: 0 0 250px; display: flex; flex-direction: row ; justify-content: flex-start ; align-items: center; align-content: flex-start ; } .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion .selected-champ-display { cursor: pointer; } .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion .selected-champ-display .icon-container { background: linear-gradient(to top, #463714 4%, #785a28 23%, #c89b3c 90%, #c8aa6e 100%); border-radius: 50%; width: 44px; height: 44px; } .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion .selected-champ-display .icon-container .champ-icon { width: 40px; height: 40px; margin: 2px; -webkit-clip-path: circle(18px at center); transform: scale(1.11); vertical-align: middle; } .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion .selected-champ-display .icon-container .champ-icon.champ-none { -webkit-clip-path: circle(19px at center); transform: scale(1.05); } .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion .selected-champ-display .icon-container:hover { background: linear-gradient(to top, #c89b3c 0%, #f0e6d2 100%); } .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion .selected-champ-display .icon-container:active { background: linear-gradient(to top, #785a28 0%, #463714 100%); } .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion .selected-champ-text { direction: ltr; flex: 0 0 190px; text-align: left ; padding: 0 0 0 15px ; cursor: default; } .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion .champ-selector-dialog { display: none; direction: ltr; position: absolute; z-index: 10; bottom: 95px; left: 71px ; outline: none; } .items-root-component .item-sets-browser .view-recommended-sets-container .select-champion .champ-selector-dialog.show { display: flex; justify-content: center; } .items-root-component .item-sets-browser .view-recommended-sets-container .select-map { width: 152px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; align-content: flex-start; } .items-root-component .item-sets-browser .view-recommended-sets-container .select-map .selected-map-display { display: flex; justify-content: center; align-items: center; flex-direction: row ; } .items-root-component .item-sets-browser .view-recommended-sets-container .select-map .selected-map-display .map-display { display: inline-block; margin: 0 5px; cursor: pointer; } .items-root-component .item-sets-browser .view-recommended-sets-container .select-map .selected-map-display .map-display .map-icon { width: 42px; height: 42px; vertical-align: middle; } .items-root-component .item-sets-browser .view-recommended-sets-container .view-button-container { flex: 0 0 280px; display: flex; flex-direction: row ; justify-content: flex-end; } .items-root-component .item-sets-browser .view-recommended-sets-container .view-button-container .view-button { direction: ltr; } .items-root-component .item-sets-browser .view-recommended-sets-container .view-button-container .create-custom-button { padding: 0 0 0 30px ; } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .item-set-champion-selector { font-family: var(--font-display); } .item-set-champion-selector .selected-champions .selected-label, .item-set-champion-selector .selected-champions .has-more, .item-set-champion-selector .champion-selector-all-champs .champ-display .champ-name, .item-set-champion-selector .recently-played-champions .recently-played-label { font-family: var(--font-body); } .item-set-champion-selector, .item-set-champion-selector .selected-champions .selected-label, .item-set-champion-selector .selected-champions .has-more, .item-set-champion-selector .champion-selector-all-champs .champ-display .champ-name, .item-set-champion-selector .recently-played-champions .recently-played-label { -webkit-user-select: none; } .item-set-champion-selector, .item-set-champion-selector .selected-champions .selected-label, .item-set-champion-selector .selected-champions .has-more, .item-set-champion-selector .champion-selector-all-champs .champ-display .champ-name, .item-set-champion-selector .recently-played-champions .recently-played-label { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .item-set-champion-selector { text-transform: uppercase; } .item-set-champion-selector:lang(ko-kr), .item-set-champion-selector:lang(ja-jp), .item-set-champion-selector:lang(tr-tr), .item-set-champion-selector:lang(el-gr), .item-set-champion-selector:lang(th-th), .item-set-champion-selector:lang(zh-tw) { text-transform: none; } .item-set-champion-selector { text-transform: none; } .item-set-champion-selector { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .item-set-champion-selector:lang(ar-ae) { letter-spacing: 0; } .item-set-champion-selector { letter-spacing: 0.025em; } .item-set-champion-selector:lang(ar-ae) { letter-spacing: 0; } .item-set-champion-selector .selected-champions .selected-label, .item-set-champion-selector .selected-champions .has-more, .item-set-champion-selector .champion-selector-all-champs .champ-display .champ-name, .item-set-champion-selector .recently-played-champions .recently-played-label { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .item-set-champion-selector .selected-champions .selected-label:lang(ja-jp), .item-set-champion-selector .selected-champions .has-more:lang(ja-jp), .item-set-champion-selector .champion-selector-all-champs .champ-display .champ-name:lang(ja-jp), .item-set-champion-selector .recently-played-champions .recently-played-label:lang(ja-jp) { font-size: 13px; } .item-set-champion-selector .selected-champions .selected-label:lang(ar-ae), .item-set-champion-selector .selected-champions .has-more:lang(ar-ae), .item-set-champion-selector .champion-selector-all-champs .champ-display .champ-name:lang(ar-ae), .item-set-champion-selector .recently-played-champions .recently-played-label:lang(ar-ae) { letter-spacing: 0; } .item-set-champion-selector { width: 555px; height: 375px; padding: 5px; } .item-set-champion-selector .champ-icon-container { border: 2px solid #1e2328; border-radius: 50%; cursor: pointer; width: 25px; height: 25px; display: inline-block; vertical-align: middle; } .item-set-champion-selector .champ-icon-container.selected { border: 2px solid #c8aa6e; } .item-set-champion-selector .champ-icon-container .champ-icon { width: 25px; height: 25px; border-radius: 0; -webkit-clip-path: circle(11px at center); transform: scale(1.17); } .item-set-champion-selector.is-single-select { height: 325px; } .item-set-champion-selector .selected-champions { display: inline-block; vertical-align: middle; text-align: left; width: 100%; height: 36px; padding: 5px 10px; } .item-set-champion-selector .selected-champions .selected-label { display: inline-block; vertical-align: middle; width: 80px; height: 25px; margin-top: 8px; } .item-set-champion-selector .selected-champions .selected-champ { display: inline-block; vertical-align: middle; cursor: pointer; margin-right: 6px; margin-top: 2px; } .item-set-champion-selector .selected-champions .has-more { display: inline-block; vertical-align: bottom; } .item-set-champion-selector .selected-champions .clear-selected-btn { display: inline-block; float: right; -webkit-mask: url("/fe/lol-collections/icon_clearall.png") no-repeat center; -webkit-mask-size: cover; width: 18px; height: 15px; vertical-align: middle; cursor: pointer; margin-right: 22px; margin-top: 10px; background-color: #cdbe91; } .item-set-champion-selector .selected-champions .clear-selected-btn:hover { background-color: #f0e6d2; } .item-set-champion-selector .selected-champions .clear-selected-btn:active { background-color: #785a28; } .item-set-champion-selector .champ-selector-filters { direction: ltr; white-space: nowrap; text-align: left; margin-top: 16px; } .item-set-champion-selector .champ-selector-filters .champ-role-filters { display: inline-block; vertical-align: middle; width: 180px; margin: 0 0 0 11px ; } .item-set-champion-selector .champ-selector-filters .champ-role-filters .champ-role-filter { display: inline-block; vertical-align: middle; cursor: pointer; width: 25px; height: 25px; background-image: url(/fe/lol-collections/role-filter-disabled.png); background-repeat: no-repeat; background-size: 180px; margin: 0 3px 0 0 ; } .item-set-champion-selector .champ-selector-filters .champ-role-filters .champ-role-filter.selected { background-image: url(/fe/lol-collections/role-filter-enabled.png); background-repeat: no-repeat; background-size: 180px; } .item-set-champion-selector .champ-selector-filters .champ-role-filters .champ-role-filter.fighter { background-position: 0 0; } .item-set-champion-selector .champ-selector-filters .champ-role-filters .champ-role-filter.tank { background-position: -32px 0; } .item-set-champion-selector .champ-selector-filters .champ-role-filters .champ-role-filter.mage { background-position: -64px 0; } .item-set-champion-selector .champ-selector-filters .champ-role-filters .champ-role-filter.assassin { background-position: -96px 0; } .item-set-champion-selector .champ-selector-filters .champ-role-filters .champ-role-filter.support { background-position: -128px 0; } .item-set-champion-selector .champ-selector-filters .champ-role-filters .champ-role-filter.marksman { background-position: -160px 0; } .item-set-champion-selector .champ-selector-filters .owned-filter { display: inline-flex; width: 100px; margin: 7px 0 0 18px ; } .item-set-champion-selector .champ-selector-filters .champ-name-filter { display: inline-block; vertical-align: middle; width: 180px; margin: -6px 0 0 40px ; } .item-set-champion-selector .champ-selector-filters .champ-name-filter:lang(fr-fr) { width: 160px; margin-left: 60px; } .item-set-champion-selector .champ-selector-filters .champ-name-filter:lang(tr-tr) { width: 160px; margin-left: 65px; } .item-set-champion-selector .champ-selector-filters .champ-name-filter:lang(ko-kr) { width: 160px; margin-left: 60px; } .item-set-champion-selector .champ-selector-filters .champ-name-filter:lang(pt-br) { width: 150px; margin-left: 70px; } .item-set-champion-selector .champion-selector-all-champs { height: 205px; width: 546px; margin: 19px 0 0 9px ; text-align: left ; white-space: normal; } .item-set-champion-selector .champion-selector-all-champs .champ-display { display: inline-block; vertical-align: middle; cursor: pointer; height: 41px; } .item-set-champion-selector .champion-selector-all-champs .champ-display.hidden { display: none; } .item-set-champion-selector .champion-selector-all-champs .champ-display .champ-name { display: inline-block; vertical-align: middle; width: 97px; cursor: pointer; text-align: left ; } .item-set-champion-selector .champion-selector-all-champs .champ-display:hover .champ-name { color: #cdbe91; } .item-set-champion-selector .separator { border: none; margin: 3px 12px; width: 531px; } .item-set-champion-selector .separator.separator-top { border-top: thin solid #3c3c41; } .item-set-champion-selector .separator.separator-bottom { border-top: thin solid #785a28; } .item-set-champion-selector .recently-played-champions { direction: ltr; text-align: left ; margin: 12px 0 0 11px ; } .item-set-champion-selector .recently-played-champions .recently-played-label { padding: 0 6px 0 0 ; } .item-set-champion-selector .recently-played-champions .recently-played-champ { display: inline-block; vertical-align: middle; margin: 0 7px 0 0 ; cursor: pointer; } lol-uikit-close-button[loading] { visibility: hidden; position: relative; } lol-uikit-close-button[loading]::before { background-image: url("/fe/lol-collections/spin.gif"); background-size: cover; width: 28px; height: 28px; display: block; content: ""; visibility: visible; position: absolute; } .item-sets-item-tooltip .item-name { font-family: var(--font-display); } .item-sets-item-tooltip .tooltip-wrapper { font-family: var(--font-body); } .item-sets-item-tooltip .tooltip-wrapper, .item-sets-item-tooltip .item-name { -webkit-user-select: none; } .item-sets-item-tooltip .tooltip-wrapper, .item-sets-item-tooltip .item-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .item-sets-item-tooltip .item-name { text-transform: uppercase; } .item-sets-item-tooltip .item-name:lang(ko-kr), .item-sets-item-tooltip .item-name:lang(ja-jp), .item-sets-item-tooltip .item-name:lang(tr-tr), .item-sets-item-tooltip .item-name:lang(el-gr), .item-sets-item-tooltip .item-name:lang(th-th), .item-sets-item-tooltip .item-name:lang(zh-tw) { text-transform: none; } .item-sets-item-tooltip .item-name { text-transform: none; } .item-sets-item-tooltip .item-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .item-sets-item-tooltip .item-name:lang(ar-ae) { letter-spacing: 0; } .item-sets-item-tooltip .item-name { letter-spacing: 0.0375em; } .item-sets-item-tooltip .item-name:lang(ar-ae) { letter-spacing: 0; } .item-sets-item-tooltip .tooltip-wrapper { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .item-sets-item-tooltip .tooltip-wrapper:lang(ja-jp) { font-size: 13px; } .item-sets-item-tooltip .tooltip-wrapper:lang(ar-ae) { letter-spacing: 0; } .item-sets-item-tooltip .item-info { clear: both; } .item-sets-item-tooltip .item-info:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .item-sets-item-tooltip { overflow: hidden; } .item-sets-item-tooltip .tooltip-wrapper { width: 325px; text-align: left ; padding: 18px; color: #f0e6d2; direction: ltr; } .item-sets-item-tooltip .tooltip-wrapper:lang(hu-hu), .item-sets-item-tooltip .tooltip-wrapper:lang(de-de), .item-sets-item-tooltip .tooltip-wrapper:lang(el-gr), .item-sets-item-tooltip .tooltip-wrapper:lang(ru-ru), .item-sets-item-tooltip .tooltip-wrapper:lang(pl_PL), .item-sets-item-tooltip .tooltip-wrapper:lang(pt_BR) { width: 400px; } .item-sets-item-tooltip .tooltip-wrapper a { color: #cdfafa; } .item-sets-item-tooltip .item-name { margin-bottom: 10px; } .item-sets-item-tooltip .item-info { position: relative; margin-bottom: 20px; width: 100%; } .item-sets-item-tooltip .item-right { float: left; width: calc(100% - 66px); } .item-sets-item-tooltip .item-icon { float: left ; margin: 0 10px 0 0 ; width: 42px; height: 42px; padding: 1px; border: thin solid #3c3c41; } .item-sets-item-tooltip .item-icon.legacy { -webkit-filter: grayscale(100%); } .item-sets-item-tooltip .item-price { position: relative; } .item-sets-item-tooltip .item-price:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin: 0 5px 0 0 ; -webkit-mask-image: url(/fe/lol-collections/icon_gold.png); -webkit-mask-size: contain; background-color: #785a28; } .item-sets-item-tooltip .item-description { margin-top: 15px; } .item-sets-item-tooltip .item-description .legacy-description { color: #be1e37; margin-bottom: 10px; } .item-sets-item-tooltip .item-description stats { color: #0596aa; } .item-sets-item-tooltip .item-description unique, .item-sets-item-tooltip .item-description active, .item-sets-item-tooltip .item-description passive, .item-sets-item-tooltip .item-description aura { color: #c8aa6e; } .item-sets-item-tooltip .required-champion, .item-sets-item-tooltip .required-ally { margin-top: 10px; color: #c89b3c; } .item-sets-item-tooltip .item-instructions { margin-top: 15px; color: #0ac8b9; } .item-sets-item-tooltip .item-instructions .instruction { display: none; } .item-sets-item-tooltip .item-instructions[source="inventory-editor"] .drag-drop-add-block, .item-sets-item-tooltip .item-instructions[source="inventory-editor"] .click-add-to-highlighted-block, .item-sets-item-tooltip .item-instructions[source="inventory-editor"] .click-view-build-path { display: block; } .item-sets-item-tooltip .item-instructions[source="inventory-preferred-slots"] .drag-drop-add-slot, .item-sets-item-tooltip .item-instructions[source="inventory-preferred-slots"] .click-add-to-highlighted-slot, .item-sets-item-tooltip .item-instructions[source="inventory-preferred-slots"] .click-view-build-path { display: block; } .item-sets-item-tooltip .item-instructions[source="block"].stackable .remove-from-block-short, .item-sets-item-tooltip .item-instructions[source="block"].stackable .change-qty { display: block; } .item-sets-item-tooltip .item-instructions[source="block"]:not(.stackable) .remove-from-block-full, .item-sets-item-tooltip .item-instructions[source="block"]:not(.stackable) .click-view-build-path { display: block; } .item-sets-item-tooltip .item-instructions[source="preferred-slot"] .remove-from-slot, .item-sets-item-tooltip .item-instructions[source="preferred-slot"] .click-view-build-path { display: block; } .item-sets-item-tooltip .item-instructions[source="editor-build-into"] .drag-drop-add-block, .item-sets-item-tooltip .item-instructions[source="editor-build-into"] .click-add-to-highlighted-block, .item-sets-item-tooltip .item-instructions[source="editor-build-into"] .click-view-build-path { display: block; } .item-sets-item-tooltip .item-instructions[source="preferred-slot-build-into"] .drag-drop-add-slot, .item-sets-item-tooltip .item-instructions[source="preferred-slot-build-into"] .click-add-to-highlighted-slot, .item-sets-item-tooltip .item-instructions[source="preferred-slot-build-into"] .click-view-build-path { display: block; } .item-sets-item-tooltip .hidden { display: none; } .item-set-menu-component .menu-items { font-family: var(--font-body); } .item-set-menu-component .menu-items { -webkit-user-select: none; } .item-set-menu-component .menu-items { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .item-set-menu-component .menu-items { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .item-set-menu-component .menu-items:lang(ar-ae) { letter-spacing: 0; } .item-set-menu-component .menu-items { min-width: 160px; text-align: left ; } .item-set-menu-component .menu-items .menu-item { height: 32px; line-height: 32px; padding: 0 16px; cursor: pointer; } .item-set-menu-component .menu-items .menu-item:hover { background-color: #1e2328; color: #f0e6d2; } .item-set-menu-component .menu-items .menu-item.disabled { background-color: #010a13; color: #5c5b57; cursor: default; } .preferred-slots-menu-component .preferred-slots .slot, .preferred-slots-menu-component .preferred-slots .slot.key-medium { font-family: var(--font-display); } .preferred-slots-menu-component .title { font-family: var(--font-body); } .preferred-slots-menu-component .title, .preferred-slots-menu-component .preferred-slots .slot, .preferred-slots-menu-component .preferred-slots .slot.key-medium { -webkit-user-select: none; } .preferred-slots-menu-component .title, .preferred-slots-menu-component .preferred-slots .slot, .preferred-slots-menu-component .preferred-slots .slot.key-medium { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .preferred-slots-menu-component .preferred-slots .slot, .preferred-slots-menu-component .preferred-slots .slot.key-medium { text-transform: uppercase; } .preferred-slots-menu-component .preferred-slots .slot:lang(ko-kr), .preferred-slots-menu-component .preferred-slots .slot.key-medium:lang(ko-kr), .preferred-slots-menu-component .preferred-slots .slot:lang(ja-jp), .preferred-slots-menu-component .preferred-slots .slot.key-medium:lang(ja-jp), .preferred-slots-menu-component .preferred-slots .slot:lang(tr-tr), .preferred-slots-menu-component .preferred-slots .slot.key-medium:lang(tr-tr), .preferred-slots-menu-component .preferred-slots .slot:lang(el-gr), .preferred-slots-menu-component .preferred-slots .slot.key-medium:lang(el-gr), .preferred-slots-menu-component .preferred-slots .slot:lang(th-th), .preferred-slots-menu-component .preferred-slots .slot.key-medium:lang(th-th), .preferred-slots-menu-component .preferred-slots .slot:lang(zh-tw), .preferred-slots-menu-component .preferred-slots .slot.key-medium:lang(zh-tw) { text-transform: none; } .preferred-slots-menu-component .preferred-slots .slot { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .preferred-slots-menu-component .preferred-slots .slot:lang(ar-ae) { letter-spacing: 0; } .preferred-slots-menu-component .preferred-slots .slot.key-medium { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .preferred-slots-menu-component .preferred-slots .slot.key-medium:lang(ja-jp) { font-size: 13px; } .preferred-slots-menu-component .preferred-slots .slot.key-medium:lang(ar-ae) { letter-spacing: 0; } .preferred-slots-menu-component .title { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .preferred-slots-menu-component .title:lang(ar-ae) { letter-spacing: 0; } .preferred-slots-menu-component { width: 190px; min-height: 150px; padding: 10px 10px 0 10px; } .preferred-slots-menu-component .title { color: #cdbe91; cursor: default; text-align: center; margin-bottom: 5px; } .preferred-slots-menu-component .preferred-slots { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; padding: 5px; } .preferred-slots-menu-component .preferred-slots .slot { flex: 0 0 50px; width: 50px; height: 50px; line-height: 50px; margin-bottom: 10px; text-align: center; cursor: pointer; border: #1e282d solid 2px; } .preferred-slots-menu-component .preferred-slots .slot.key-medium { line-height: 50px; } .preferred-slots-menu-component .preferred-slots .slot.key-long { font-size: 9px; } .preferred-slots-menu-component .preferred-slots .slot.selected { border: #c8aa6e solid 2px; } .preferred-slots-menu-component .preferred-slots .slot:hover { background-color: rgba(240,230,210,0.1); } .item-set-import-modal .dialog-frame { font-family: var(--font-body); } .item-set-import-modal .dialog-frame .dialog-content { box-sizing: border-box; } .item-set-import-modal .dialog-frame .dialog-text { display: flex; align-items: center; justify-content: center; } .item-set-import-modal .dialog-frame lol-uikit-flat-button-group { position: absolute; bottom: -2px; width: 100%; justify-content: center; } .item-set-import-modal lol-uikit-flat-button { outline: none; } .item-set-modal-root-component .item-sets-modal-backdrop { position: absolute; height: 636px; background: url(/fe/lol-collections/background.jpg) no-repeat top left; width: 100%; } .item-set-modal-root-component .item-sets-modal-content { position: absolute; margin-top: 35px; margin-left: 35px; } img.item-set-build-path-icon { cursor: pointer; width: auto; height: 35px; padding: 1px; border: 1px #785a28 solid; } .item-build-tree-component { width: 100%; } .item-build-tree-component .img-border { height: 40px; } .item-build-tree-component .build-tree-parent { margin-bottom: 20px; position: relative; display: flex; justify-content: center; } .item-build-tree-component .build-tree-parent:after { position: absolute; content: ''; width: 1px; height: 10px; bottom: 0; left: 50%; background-color: #785a28; transform: translateY(100%); } .item-build-tree-component .build-tree-parent.no-child:after { display: none; } .item-build-tree-component .build-tree-children { display: flex; flex-direction: row; justify-content: space-around; width: 100%; } .item-build-tree-component .build-tree-children .build-tree-child { flex: 1 1 100%; padding: 0 4px; position: relative; display: flex; flex-direction: row; justify-content: space-around; } .item-build-tree-component .build-tree-children .build-tree-child:only-child:after { display: none; } .item-build-tree-component .build-tree-children .build-tree-child:before, .item-build-tree-component .build-tree-children .build-tree-child:after { content: ''; position: absolute; background-color: #785a28; left: 0; } .item-build-tree-component .build-tree-children .build-tree-child:before { left: 50%; top: 0; transform: translateY(-100%); width: 1px; height: 10px; } .item-build-tree-component .build-tree-children .build-tree-child:after { top: -10px; transform: translateY(-100%); height: 1px; width: 100%; } .item-build-tree-component .build-tree-children .build-tree-child:first-child:after { left: 50%; width: 50%; } .item-build-tree-component .build-tree-children .build-tree-child:last-child:after { width: calc(50% + 1px); } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text, .item-set-editor-component .item-set-header { font-family: var(--font-display); } .item-set-item .item-count, .item-set-item span, .item-set-editor-component .item-set-root-component-text, .item-set-editor-component .top-container .right-col .champion-map-associations .has-more, .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .current-sort-option-text, .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-options .sort-options-dialog .sort-option, .item-set-editor-component .body-container .mid-container .item-build-path .build-into-items .build-into-label, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .item-count, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path span, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .item-count, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display span, .item-set-editor-component .body-container .right-container .bottom .section-edit-panel span.panel-caption { font-family: var(--font-body); } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text, .item-set-editor-component .item-set-header { font-family: var(--font-display); } .item-set-item .item-count, .item-set-item span, .item-set-editor-component .item-set-root-component-text, .item-set-editor-component .top-container .right-col .champion-map-associations .has-more, .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .current-sort-option-text, .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-options .sort-options-dialog .sort-option, .item-set-editor-component .body-container .mid-container .item-build-path .build-into-items .build-into-label, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .item-count, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path span, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .item-count, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display span, .item-set-editor-component .body-container .right-container .bottom .section-edit-panel span.panel-caption { font-family: var(--font-body); } .item-set-item .item-count, .item-set-item span, .item-set-editor-component .item-set-root-component-text, .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs, .item-set-editor-component .top-container .right-col .champion-map-associations .has-more, .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .current-sort-option-text, .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-options .sort-options-dialog .sort-option, .item-set-editor-component .body-container .mid-container .item-build-path .build-into-items .build-into-label, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .item-count, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path span, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .item-count, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display span, .item-set-editor-component .body-container .right-container .bottom .section-edit-panel span.panel-caption, .item-set-editor-component .item-set-header { -webkit-user-select: none; } .item-set-item .item-count, .item-set-item span, .item-set-editor-component .item-set-root-component-text, .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs, .item-set-editor-component .top-container .right-col .champion-map-associations .has-more, .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .current-sort-option-text, .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-options .sort-options-dialog .sort-option, .item-set-editor-component .body-container .mid-container .item-build-path .build-into-items .build-into-label, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .item-count, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path span, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .item-count, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display span, .item-set-editor-component .body-container .right-container .bottom .section-edit-panel span.panel-caption, .item-set-editor-component .item-set-header { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text, .item-set-editor-component .item-set-header { text-transform: uppercase; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs:lang(ko-kr), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text:lang(ko-kr), .item-set-editor-component .item-set-header:lang(ko-kr), .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs:lang(ja-jp), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text:lang(ja-jp), .item-set-editor-component .item-set-header:lang(ja-jp), .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs:lang(tr-tr), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text:lang(tr-tr), .item-set-editor-component .item-set-header:lang(tr-tr), .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs:lang(el-gr), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text:lang(el-gr), .item-set-editor-component .item-set-header:lang(el-gr), .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs:lang(th-th), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text:lang(th-th), .item-set-editor-component .item-set-header:lang(th-th), .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs:lang(zh-tw), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text:lang(zh-tw), .item-set-editor-component .item-set-header:lang(zh-tw) { text-transform: none; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text { text-transform: none; } .item-set-editor-component .item-set-header { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .item-set-editor-component .item-set-header:lang(ar-ae) { letter-spacing: 0; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs:lang(ja-jp), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text:lang(ja-jp) { font-size: 13px; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs:lang(ar-ae), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text:lang(ar-ae) { letter-spacing: 0; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text { letter-spacing: 0.0375em; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs:lang(ar-ae), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text:lang(ar-ae) { letter-spacing: 0; } .item-set-item span, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path span, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display span, .item-set-editor-component .body-container .right-container .bottom .section-edit-panel span.panel-caption { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .item-set-item span:lang(ar-ae), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path span:lang(ar-ae), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display span:lang(ar-ae), .item-set-editor-component .body-container .right-container .bottom .section-edit-panel span.panel-caption:lang(ar-ae) { letter-spacing: 0; } .item-set-item .item-count, .item-set-editor-component .item-set-root-component-text, .item-set-editor-component .top-container .right-col .champion-map-associations .has-more, .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .current-sort-option-text, .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-options .sort-options-dialog .sort-option, .item-set-editor-component .body-container .mid-container .item-build-path .build-into-items .build-into-label, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .item-count, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .item-count { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .item-set-item .item-count:lang(ja-jp), .item-set-editor-component .item-set-root-component-text:lang(ja-jp), .item-set-editor-component .top-container .right-col .champion-map-associations .has-more:lang(ja-jp), .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .current-sort-option-text:lang(ja-jp), .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-options .sort-options-dialog .sort-option:lang(ja-jp), .item-set-editor-component .body-container .mid-container .item-build-path .build-into-items .build-into-label:lang(ja-jp), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .item-count:lang(ja-jp), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .item-count:lang(ja-jp) { font-size: 13px; } .item-set-item .item-count:lang(ar-ae), .item-set-editor-component .item-set-root-component-text:lang(ar-ae), .item-set-editor-component .top-container .right-col .champion-map-associations .has-more:lang(ar-ae), .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .current-sort-option-text:lang(ar-ae), .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-options .sort-options-dialog .sort-option:lang(ar-ae), .item-set-editor-component .body-container .mid-container .item-build-path .build-into-items .build-into-label:lang(ar-ae), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .item-count:lang(ar-ae), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .item-count:lang(ar-ae) { letter-spacing: 0; } #item-set-dropdown { outline: none; --flat-dropdown-scrollable-max-height: 410px; } #item-set-dropdown .item-set-dropdown-item-text { direction: ltr; pointer-events: none; padding-right: 15px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; white-space: nowrap; max-width: 400px; } .item-set-item-icon-md, .item-set-item img, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path img, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path img.item-set-build-path-icon, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display img { display: block; width: 45px; height: 45px; } .build-into-item { display: inline-block; } .build-into-item .item-icon { cursor: pointer; width: 28px; height: 28px; padding: 1px; border: 1px #785a28 solid; } .item-set-item, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display { margin-top: 10px; list-style-type: none; border-right: 30px solid transparent ; height: 75px; width: 49px; padding: 0 ; text-align: center; } .item-set-item .img-border-wrapper, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper { position: relative; cursor: pointer; width: 46px; height: 46px; padding: 0.5px; border: thin solid #3c3732; } .item-set-item .img-border-wrapper:hover .preferred-slot-indicator, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper:hover .preferred-slot-indicator, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper:hover .preferred-slot-indicator { opacity: 1; } .item-set-item .img-border-wrapper.has-active, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.has-active, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.has-active { border: thin solid #785a28; } .item-set-item .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator), .item-set-item .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator), .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator) { border-top: thin solid transparent; } .item-set-item .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator):before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator):before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator):before, .item-set-item .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator):before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator):before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator):before { content: ''; width: 11px; height: 0px; position: absolute; top: -1px; left: -1px; border-top: thin solid #3c3732; } .item-set-item .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator):after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator):after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator):after, .item-set-item .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator):after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator):after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator):after { content: ''; position: absolute; top: -1px; right: -1px; width: 11px; height: 0px; border-top: thin solid #3c3732; } .item-set-item .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator) .item-click-area:not(.hide-indicator):before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator) .item-click-area:not(.hide-indicator):before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator) .item-click-area:not(.hide-indicator):before, .item-set-item .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator) .item-click-area:not(.hide-indicator):before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator) .item-click-area:not(.hide-indicator):before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator) .item-click-area:not(.hide-indicator):before { content: ''; position: absolute; top: -4px; left: 10px; border-left: 1px #3c3732 solid; height: 7px; } .item-set-item .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator) .item-click-area:not(.hide-indicator):after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator) .item-click-area:not(.hide-indicator):after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator) .item-click-area:not(.hide-indicator):after, .item-set-item .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator) .item-click-area:not(.hide-indicator):after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator) .item-click-area:not(.hide-indicator):after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator) .item-click-area:not(.hide-indicator):after { content: ''; position: absolute; top: -4px; right: 10px; border-left: 1px #3c3732 solid; height: 7px; } .item-set-item .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator) .item-click-area:not(.hide-indicator).has-active:before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator) .item-click-area:not(.hide-indicator).has-active:before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator) .item-click-area:not(.hide-indicator).has-active:before, .item-set-item .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator) .item-click-area:not(.hide-indicator).has-active:before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator) .item-click-area:not(.hide-indicator).has-active:before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator) .item-click-area:not(.hide-indicator).has-active:before { border-left: thin solid #785a28; } .item-set-item .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator) .item-click-area:not(.hide-indicator).has-active:after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator) .item-click-area:not(.hide-indicator).has-active:after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator) .item-click-area:not(.hide-indicator).has-active:after, .item-set-item .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator) .item-click-area:not(.hide-indicator).has-active:after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator) .item-click-area:not(.hide-indicator).has-active:after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator) .item-click-area:not(.hide-indicator).has-active:after { border-left: thin solid #785a28; } .item-set-item .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator).has-active:before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator).has-active:before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator).has-active:before, .item-set-item .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator).has-active:before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator).has-active:before, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator).has-active:before { border-top: thin solid #785a28; } .item-set-item .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator).has-active:after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator).has-active:after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled.has-slot:not(.hide-indicator).has-active:after, .item-set-item .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator).has-active:after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator).has-active:after, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .img-border-wrapper.preferred-slot-enabled:hover:not(.hide-indicator).has-active:after { border-top: thin solid #785a28; } .item-set-item .item-count, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .item-count, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .item-count { display: none; position: absolute; background-color: #010a13; color: #f0e6d2; width: 14px; height: 14px; margin-left: 31px; margin-top: -14px; padding-left: 1px; text-align: center; cursor: default; } .item-set-item .item-count.show, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .item-count.show, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .item-count.show { display: block; } .item-set-item .preferred-slot-indicator, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .preferred-slot-indicator, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .preferred-slot-indicator { position: absolute; display: flex; width: 21px; height: 14px; flex-direction: row; flex-wrap: wrap; margin-top: -54px; margin-left: 12.5px; opacity: 0.6; cursor: pointer; transition: all 0.3s ease-in-out; } .item-set-item .preferred-slot-indicator.no-slot, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .preferred-slot-indicator.no-slot, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .preferred-slot-indicator.no-slot { opacity: 0; } .item-set-item .preferred-slot-indicator.hidden, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .preferred-slot-indicator.hidden, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .preferred-slot-indicator.hidden { display: none; } .item-set-item .preferred-slot-indicator .indicator, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .preferred-slot-indicator .indicator, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .preferred-slot-indicator .indicator { display: inline-block; margin: 0; width: 5px; height: 5px; background: #5b5a56; border: 1px #010a13 solid; } .item-set-item .preferred-slot-indicator .indicator.selected, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path .preferred-slot-indicator .indicator.selected, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display .preferred-slot-indicator .indicator.selected { background: #f0e6d2; } .item-set-item span, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path span, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display span { width: 100%; text-align: center; display: inline-block; margin-top: 4px; margin-bottom: 6px; } .item-set-item.legacy .item-icon, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path.legacy .item-icon, .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-set-item-display.legacy .item-icon { -webkit-filter: grayscale(100%); } .item-set-dropdown-item-text { direction: ltr; pointer-events: none; padding-right: 15px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; white-space: nowrap; max-width: 400px; } .item-set-editor-component { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; margin: auto; height: 570px; opacity: 0; transition: all 0.5s ease-in-out; } .item-set-editor-component.is-loaded { opacity: 1; } .item-set-editor-component li { list-style: none; } .item-set-editor-component .icon { cursor: pointer; opacity: 0.8; } .item-set-editor-component .icon:hover { opacity: 1; } .item-set-editor-component .icon.arrow-up { width: 0; height: 0; margin-top: 3px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #f0e6d2; } .item-set-editor-component .icon.arrow-down { width: 0; height: 0; margin-top: 3px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid #f0e6d2; } .item-set-editor-component .icon.close { width: 16px; height: 16px; -webkit-mask-image: url("/fe/lol-collections/icon-close.png"); -webkit-mask-size: contain; background-color: #f0e6d2; } .item-set-editor-component .top-container { position: absolute; left: 0; width: 1020px; height: 36px; display: flex; flex-direction: row ; justify-content: flex-start; } .item-set-editor-component .top-container .left-col { flex: 0 0 500px ; width: auto ; margin-right: 0 ; display: flex; flex-direction: row ; } .item-set-editor-component .top-container .left-col .rename-set-input { width: 256px; } .item-set-editor-component .top-container .left-col #item-set-dropdown { margin: -8px 0 0 8px ; } .item-set-editor-component .top-container .right-col { display: flex; width: 498px ; margin: 0 0 0 20px ; flex-direction: row ; justify-content: space-between; } .item-set-editor-component .top-container .right-col .champion-map-associations { display: flex; width: 25% ; flex-direction: row ; justify-content: space-between; align-content: center; align-items: center; height: 36px; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs { width: 210px ; text-align: left; white-space: nowrap; margin: 0 0 0 10px ; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .associated-champ { display: inline-block; vertical-align: middle; border: 2px solid #c8aa6e; border-radius: 50%; width: 26px; cursor: pointer; height: 26px; margin-top: -4px; margin-left: -1px; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .associated-champ:hover { filter: brightness(1.2); } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .associated-champ .champ-icon { width: 26px; height: 26px; -webkit-clip-path: circle(12px at center); } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .all-champs { display: inline-block; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .champ-selector-button { display: inline-block; vertical-align: middle; margin-bottom: 3px; margin-right: 5px; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .champ-selector-dialog { display: none; position: absolute; z-index: 10; top: 48px; left: 379px ; outline: none; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-champs .champ-selector-dialog.show { display: flex; justify-content: center; } .item-set-editor-component .top-container .right-col .champion-map-associations .has-more { display: inline-block; vertical-align: bottom; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-maps { white-space: nowrap; vertical-align: middle; direction: ltr; margin-right: 0 ; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-maps .associated-map { display: inline-block; cursor: pointer; margin-left: 5px; } .item-set-editor-component .top-container .right-col .champion-map-associations .associated-maps .associated-map .map-icon { height: 32px; width: 32px; } .item-set-editor-component .top-container .right-col .toolbox { direction: ltr; display: inline-flex; float: right; flex-direction: row; align-items: center; margin-right: 40px; } .item-set-editor-component .top-container .right-col .toolbox lol-uikit-close-button { border-left: 5px solid transparent; border-right: 5px solid transparent; } .item-set-editor-component .top-container .right-col .toolbox .save-btn { direction: ltr; margin: 0 0 0 11px ; } .item-set-editor-component .top-container .right-col .toolbox .hidden { display: none; } .item-set-editor-component .body-container { display: flex; flex-direction: row ; justify-content: flex-start; align-items: flex-start; align-content: flex-start; margin-top: 50px; width: 1020px; height: 550px; overflow: hidden; } .item-set-editor-component .body-container .left-container { flex: 0 0 180px ; width: auto ; direction: ltr; } .item-set-editor-component .body-container .mid-container { display: flex; flex: 0 0 345px ; width: auto ; flex-direction: column; justify-content: flex-start; align-items: flex-start; height: 550px; overflow: hidden; } .item-set-editor-component .body-container .mid-container .item-grid-and-build-path { height: 495px; width: 100% ; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .item-set-editor-component .body-container .mid-container .item-grid-and-build-path > .item-set-item, .item-set-editor-component .body-container .mid-container .item-grid-and-build-path > .item-set-item-display { display: none; } .item-set-editor-component .body-container .mid-container .item-search-and-sort { display: flex; flex-direction: row ; justify-content: space-between ; align-items: center; width: 307px ; flex: 0 0 30px ; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-search { width: 210px; margin-left: 0 ; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-search:lang(ru-ru) { width: 180px; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort { direction: ltr; cursor: pointer; flex-direction: row; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort lol-uikit-framed-dropdown { height: 30px; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .current-sort-option-text { display: inline-block; float: right; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort:hover .current-sort-option-text { color: #f0e6d2; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort:hover .sort-button { background-color: #f0e6d2; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-button { display: inline-block; float: right; margin-left: 5px; -webkit-mask: url("/fe/lol-collections/icon_sort.png") no-repeat center; -webkit-mask-size: cover; width: 18px; height: 15px; vertical-align: middle; cursor: pointer; background-color: #cdbe91; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-button:hover { background-color: #f0e6d2; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-button:active { background-color: #785a28; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-options { position: absolute; z-index: 10; top: 85px; left: 440px; text-align: left; display: none; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-options:lang(ru-ru) { left: 465px; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-options .sort-options-dialog { outline: none; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-options .sort-options-dialog .sort-option { cursor: pointer; padding: 3px 6px; text-align: center; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-options .sort-options-dialog .sort-option.selected { color: #c8aa6e; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-options .sort-options-dialog .sort-option:hover { background-color: #1e2328; } .item-set-editor-component .body-container .mid-container .item-search-and-sort .item-sort .sort-options.show { display: flex; justify-content: center; } .item-set-editor-component .body-container .mid-container .editor-item-grid { display: flex; flex-direction: column; flex: 1 1 495px ; width: auto ; transition: all 0.5s; min-width: 0; min-height: 0; } .item-set-editor-component .body-container .mid-container .item-build-path { flex: 0 0 auto; transition: all 0.5s; padding: 10px 0; display: none; width: 300px; } .item-set-editor-component .body-container .mid-container .item-build-path .icon { position: relative; left: 280px ; right: auto ; } .item-set-editor-component .body-container .mid-container .item-build-path.show { height: auto; opacity: 1; display: flex; justify-content: center; flex-direction: column; } .item-set-editor-component .body-container .mid-container .item-build-path .build-into-items { text-align: left; margin-bottom: 20px; } .item-set-editor-component .body-container .mid-container .item-build-path .build-into-items.hidden { display: none; } .item-set-editor-component .body-container .mid-container .item-build-path .build-into-items .build-into-label { direction: ltr; margin-top: -10px; text-align: left ; } .item-set-editor-component .body-container .right-container { flex: 0 0 485px ; width: auto ; height: 550px; } .item-set-editor-component .body-container .right-container .top { margin-bottom: 23px; } .item-set-editor-component .body-container .right-container .top.empty { margin-bottom: 0; } .item-set-editor-component .body-container .right-container .top .item-set-sections { max-height: 410px; padding-bottom: 10px; } .item-set-editor-component .body-container .right-container .top .item-set-sections .section { margin-top: 23px; margin-right: 15px ; min-height: 142px; max-width: 451px; border: #1e282d solid 2px; padding: 2px; } .item-set-editor-component .body-container .right-container .top .item-set-sections .section.high-light { border-color: #0a323c; } .item-set-editor-component .body-container .right-container .top .item-set-sections .section.high-light .title { background-color: #0a323c; } .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title { text-align: left; height: 25px; background: #1e282d; display: flex; } .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title:hover { filter: brightness(1.1); } .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .block-title-rename { width: 100%; } .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title div.edit-block-title { position: absolute; cursor: pointer; background: url("/fe/lol-collections/icon_edit.png"); background-size: 100%; margin: 5px 0 0 8px ; height: 12px; width: 12px; } .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title div.block-ctrl-btn { display: flex; justify-content: space-between; width: 55px; position: relative; top: 3px; margin: 0 10px 0 auto ; } .item-set-editor-component .body-container .right-container .top .item-set-sections .section .title .title-text { display: inline-block; margin: 3px 0 0 28px ; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list { min-height: 80px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 0 0 0 40px ; } .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .from-build-path img.item-set-build-path-icon { border: none; } .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .item-anchor-tail { position: absolute; width: 20px; height: 20px; right: 20px; pointer-events: none; margin-top: -40px; } .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .build-into-item { margin-top: 10px; border-right: 30px solid transparent; height: 75px; width: 49px; text-align: center; } .item-set-editor-component .body-container .right-container .top .item-set-sections .section .item-list .build-into-item .item-icon { width: 46px; height: 46px; padding: 0.5px; border: thin solid #3c3732; } .item-set-editor-component .body-container .right-container .top .item-set-sections > :first-child { margin-top: 0px; } .item-set-editor-component .body-container .right-container .top .section:first-child .arrow-up { cursor: auto; border-bottom: 10px solid #5c5b57; } .item-set-editor-component .body-container .right-container .top .section:last-child .arrow-down { cursor: auto; border-top: 10px solid #5c5b57; } .item-set-editor-component .body-container .right-container .bottom { width: 485px ; margin-right: 0 ; } .item-set-editor-component .body-container .right-container .bottom .item-set-item, .item-set-editor-component .body-container .right-container .bottom .item-set-item-display, .item-set-editor-component .body-container .right-container .bottom .build-into-item, .item-set-editor-component .body-container .right-container .bottom .item { display: none; } .item-set-editor-component .body-container .right-container .bottom .section-edit-panel { width: 455px ; height: 80px; text-align: left ; -webkit-user-drag: none; border: 2px #1e282d solid; direction: ltr; } .item-set-editor-component .body-container .right-container .bottom .section-edit-panel .drop-area-icon { display: inline-block; vertical-align: middle; margin: 0 0 0 25px ; width: 48px; height: 41px; background: url("/fe/lol-collections/icon_drop.png") no-repeat top left; } .item-set-editor-component .body-container .right-container .bottom .section-edit-panel span.panel-caption { cursor: default; vertical-align: middle; color: #c89b3c; margin: 30px 15px; display: inline-block; width: 320px ; } .item-set-editor-component .item-set-flat-button.sm { width: 80px; } .item-set-editor-component .item-set-flat-button.align-right { margin-left: auto; } .item-set-editor-component .item-set-clipboard-area { position: fixed; width: 0; height: 0; opacity: 0; } .recommended-set-viewer .viewer-controls .viewer-title, .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg, .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text { font-family: var(--font-display); } .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-icon-container .item-count, .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-price { font-family: var(--font-body); } .recommended-set-viewer .viewer-controls .viewer-title, .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg, .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text, .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-icon-container .item-count, .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-price { -webkit-user-select: none; } .recommended-set-viewer .viewer-controls .viewer-title, .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg, .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text, .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-icon-container .item-count, .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-price { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .recommended-set-viewer .viewer-controls .viewer-title, .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg, .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text { text-transform: uppercase; } .recommended-set-viewer .viewer-controls .viewer-title:lang(ko-kr), .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg:lang(ko-kr), .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text:lang(ko-kr), .recommended-set-viewer .viewer-controls .viewer-title:lang(ja-jp), .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg:lang(ja-jp), .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text:lang(ja-jp), .recommended-set-viewer .viewer-controls .viewer-title:lang(tr-tr), .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg:lang(tr-tr), .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text:lang(tr-tr), .recommended-set-viewer .viewer-controls .viewer-title:lang(el-gr), .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg:lang(el-gr), .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text:lang(el-gr), .recommended-set-viewer .viewer-controls .viewer-title:lang(th-th), .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg:lang(th-th), .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text:lang(th-th), .recommended-set-viewer .viewer-controls .viewer-title:lang(zh-tw), .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg:lang(zh-tw), .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text:lang(zh-tw) { text-transform: none; } .recommended-set-viewer .viewer-controls .viewer-title, .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg, .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text { text-transform: none; } .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg:lang(ar-ae) { letter-spacing: 0; } .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg { letter-spacing: 0.025em; } .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg:lang(ar-ae) { letter-spacing: 0; } .recommended-set-viewer .viewer-controls .viewer-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .recommended-set-viewer .viewer-controls .viewer-title:lang(ar-ae) { letter-spacing: 0; } .recommended-set-viewer .viewer-controls .viewer-title { letter-spacing: 0.025em; } .recommended-set-viewer .viewer-controls .viewer-title:lang(ar-ae) { letter-spacing: 0; } .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text:lang(ja-jp) { font-size: 13px; } .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text:lang(ar-ae) { letter-spacing: 0; } .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text { letter-spacing: 0.0375em; } .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text:lang(ar-ae) { letter-spacing: 0; } .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-price { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-price:lang(ar-ae) { letter-spacing: 0; } .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-icon-container .item-count { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-icon-container .item-count:lang(ja-jp) { font-size: 13px; } .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-icon-container .item-count:lang(ar-ae) { letter-spacing: 0; } .recommended-set-viewer { opacity: 0; transition: all 0.5s ease-in-out; } .recommended-set-viewer.is-loaded { opacity: 1; } .recommended-set-viewer .viewer-controls { display: flex; flex-direction: row ; justify-content: flex-start ; align-items: center; align-content: flex-start; } .recommended-set-viewer .viewer-controls .viewer-title { direction: ltr; color: #c8aa6e; width: 350px; text-align: left ; } .recommended-set-viewer .viewer-controls .champion-display { width: 100px; display: flex; flex-direction: row; justify-content: center; } .recommended-set-viewer .viewer-controls .champion-display .selected-champ-display { cursor: pointer; background: linear-gradient(to top, #463714 4%, #785a28 23%, #c89b3c 90%, #c8aa6e 100%); border-radius: 50%; width: 36px; height: 36px; } .recommended-set-viewer .viewer-controls .champion-display .selected-champ-display .champ-icon { width: 32px; height: 32px; margin: 2px; -webkit-clip-path: circle(14px at center); transform: scale(1.18); vertical-align: middle; } .recommended-set-viewer .viewer-controls .champion-display .selected-champ-display:hover { background: linear-gradient(to top, #c89b3c 0%, #f0e6d2 100%); } .recommended-set-viewer .viewer-controls .champion-display .selected-champ-display:active { background: linear-gradient(to top, #785a28 0%, #463714 100%); } .recommended-set-viewer .viewer-controls .champion-display .champ-selector-dialog { display: none; position: absolute; z-index: 10; top: 50px; left: 116px ; outline: none; } .recommended-set-viewer .viewer-controls .champion-display .champ-selector-dialog.show { display: flex; justify-content: center; } .recommended-set-viewer .viewer-controls .map-displays { width: 200px; display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: flex-start; } .recommended-set-viewer .viewer-controls .map-displays .map-display { display: inline-block; margin: 0 5px; cursor: pointer; } .recommended-set-viewer .viewer-controls .map-displays .map-display .map-icon { width: 32px; height: 32px; vertical-align: middle; } .recommended-set-viewer .viewer-controls .control-buttons { width: 286px; display: flex; flex-direction: row; justify-content: flex-end ; align-items: center; align-content: flex-start; margin-left: 0 ; } .recommended-set-viewer .viewer-controls .control-buttons .duplicate-recommended-button { direction: ltr; } .recommended-set-viewer .item-blocks-container { display: flex; flex-direction: row; justify-content: flex-start; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; width: 980px; height: 500px; margin-top: 45px; } .recommended-set-viewer .item-blocks-container .rec-sets-not-available-msg { height: 100%; width: 100%; text-align: center; margin-top: 150px; } .recommended-set-viewer .item-blocks-container .item-block { border: #1e282d solid 2px; min-height: 135px; width: 288px; margin-right: 30px; margin-bottom: 27px; } .recommended-set-viewer .item-blocks-container .item-block .block-title { text-align: left; height: 25px; background: #1e282d; display: flex; } .recommended-set-viewer .item-blocks-container .item-block .block-title .title-text { display: inline-block; margin-left: 9px; margin-top: 4px; } .recommended-set-viewer .item-blocks-container .item-block .block-items { display: flex; padding-top: 25px; padding-left: 38px; flex-direction: row; flex-wrap: wrap; } .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display { border-right: 30px solid transparent; height: 75px; width: 49px; margin-bottom: 10px; } .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-icon-container { width: 46px; height: 46px; padding: 0.5px; border: thin solid #3c3732; } .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-icon-container .item-icon { display: block; width: 45px; height: 45px; } .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-icon-container .item-count { display: none; position: absolute; background-color: #010a13; color: #f0e6d2; width: 14px; height: 14px; margin-left: 31px; margin-top: -14px; padding-left: 1px; text-align: center; cursor: default; } .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-icon-container .item-count.show { display: block; } .recommended-set-viewer .item-blocks-container .item-block .block-items .item-display .item-price { width: 100%; text-align: center; display: inline-block; margin-top: 4px; margin-bottom: 6px; } .item-set-item-filter-panel .item-set-filter-group .group-title, .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button { font-family: var(--font-display); } .item-set-item-filter-panel .item-set-filter-group .group-title, .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button { -webkit-user-select: none; } .item-set-item-filter-panel .item-set-filter-group .group-title, .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .item-set-item-filter-panel .item-set-filter-group .group-title, .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button { text-transform: uppercase; } .item-set-item-filter-panel .item-set-filter-group .group-title:lang(ko-kr), .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button:lang(ko-kr), .item-set-item-filter-panel .item-set-filter-group .group-title:lang(ja-jp), .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button:lang(ja-jp), .item-set-item-filter-panel .item-set-filter-group .group-title:lang(tr-tr), .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button:lang(tr-tr), .item-set-item-filter-panel .item-set-filter-group .group-title:lang(el-gr), .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button:lang(el-gr), .item-set-item-filter-panel .item-set-filter-group .group-title:lang(th-th), .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button:lang(th-th), .item-set-item-filter-panel .item-set-filter-group .group-title:lang(zh-tw), .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button:lang(zh-tw) { text-transform: none; } .item-set-item-filter-panel .item-set-filter-group .group-title, .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .item-set-item-filter-panel .item-set-filter-group .group-title:lang(ja-jp), .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button:lang(ja-jp) { font-size: 13px; } .item-set-item-filter-panel .item-set-filter-group .group-title:lang(ar-ae), .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button:lang(ar-ae) { letter-spacing: 0; } .item-set-item-filter-panel { margin-right: 0 ; } .item-set-item-filter-panel .item-set-filter-group { text-align: left ; margin-bottom: 5px; } .item-set-item-filter-panel .item-set-filter-group .group-title { color: #a09b8c; } .item-set-item-filter-panel .item-set-filter-group .item-filter { margin-top: 0; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item-set-item-filter-panel .item-set-filter-group .item-filter.checked label { color: #c8aa6e; } .item-set-item-filter-panel .filter-panel-buttons { height: 30px; direction: ltr; } .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button { color: #c8aa6e; cursor: pointer; } .item-set-item-filter-panel .filter-panel-buttons span.clear-all-button:hover { color: #f0e6d2; } .item-set-item-display .item-price { font-family: var(--font-body); } .item-set-item-display .item-price { -webkit-user-select: none; } .item-set-item-display .item-price { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .item-set-item-display .item-price { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .item-set-item-display .item-price:lang(ar-ae) { letter-spacing: 0; } .item-set-item-display { cursor: pointer; display: inline-block; width: 48px; height: 75px; } .item-set-item-display .item-icon { border: thin solid #3c3732; width: 45px; height: 45px; } .item-set-item-display .item-price { display: inline-block; width: 100%; text-align: center; } .item-set-item-display[has-active="true"] .item-icon { border: thin solid #785a28; } .item-set-drag-image { width: 45px; height: 45px; } .item-set-item-grid .filtered-items { width: 310px; margin-top: 10px; overflow-x: hidden; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; transition: height 0.43s cubic-bezier(0, 0, 0, 1); } .item-set-item-grid .filtered-items .from-block, .item-set-item-grid .filtered-items .build-into-item, .item-set-item-grid .filtered-items .from-build-path, .item-set-item-grid .filtered-items .from-preferred-slots { display: none; } .item-set-item-grid .filtered-items .item-set-item-display { margin: 0 30px 0 0 ; } .item-set-item-grid .filtered-items .item-set-item-display.end-of-row { margin: 0 2px 0 0 ; } .item-set-item-grid .filtered-items .item-set-item-display.hidden { display: none; } .emotes-loading-section { position: fixed; top: 0; left: 0; width: 1055px; height: 718px; display: flex; justify-content: center; align-items: center; } .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-static-assets/images/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 { font-family: var(--font-display); } .emote-inventory .display-category-section-title .title-text, .emote-inventory .display-category-section-title .title-numbers { -webkit-user-select: none; } .emote-inventory .display-category-section-title .title-text, .emote-inventory .display-category-section-title .title-numbers { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .emote-inventory .display-category-section-title .title-text { text-transform: uppercase; } .emote-inventory .display-category-section-title .title-text:lang(ko-kr), .emote-inventory .display-category-section-title .title-text:lang(ja-jp), .emote-inventory .display-category-section-title .title-text:lang(tr-tr), .emote-inventory .display-category-section-title .title-text:lang(el-gr), .emote-inventory .display-category-section-title .title-text:lang(th-th), .emote-inventory .display-category-section-title .title-text: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; } .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-static-assets/images/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-static-assets/images/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-static-assets/images/border_images/icon-lock-large-hover.png"); } .emote-inventory .emote-item .emote-item-icon.unowned:active::after { background-image: url("/fe/lol-static-assets/images/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-static-assets/images/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-medium].rcp-fe-lol-emote-inventory-tooltip { text-align: left; padding: 14px; max-width: max-content; width: max-content; } lol-uikit-content-block[type=tooltip-medium].rcp-fe-lol-emote-inventory-tooltip h6 { max-width: 280px; } lol-uikit-content-block[type=tooltip-medium].rcp-fe-lol-emote-inventory-tooltip .price-currency-type-RP, lol-uikit-content-block[type=tooltip-medium].rcp-fe-lol-emote-inventory-tooltip .price-currency-type-IP { margin-top: 8px; display: flex; align-items: center; } lol-uikit-content-block[type=tooltip-medium].rcp-fe-lol-emote-inventory-tooltip .price-currency-type-RP::before, lol-uikit-content-block[type=tooltip-medium].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-medium].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-medium].rcp-fe-lol-emote-inventory-tooltip .price-currency-type-IP::before { background-image: url("/fe/lol-static-assets/images/be-icon.png"); } lol-uikit-content-block[type=tooltip-medium].rcp-fe-lol-emote-inventory-tooltip .price-currency-sale { margin-left: 8px; color: #be1e37; } lol-uikit-content-block[type=tooltip-medium].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-static-assets/images/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-static-assets/images/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-static-assets/images/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-static-assets/images/emote_wheel_images/wheel-top-active.png"); } .emote-wheel-wrapper .emote-tray__top.dragstart { background-image: url("/fe/lol-static-assets/images/emote_wheel_images/wheel-top-hover.png"); } .emote-wheel-wrapper .emote-tray__top.dropped { background-image: url("/fe/lol-static-assets/images/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-static-assets/images/emote_wheel_images/wheel-top-hover.png"); } .emote-wheel-wrapper .emote-tray__right { background-image: url("/fe/lol-static-assets/images/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-static-assets/images/emote_wheel_images/wheel-right-active.png"); } .emote-wheel-wrapper .emote-tray__right.dragstart { background-image: url("/fe/lol-static-assets/images/emote_wheel_images/wheel-right-hover.png"); } .emote-wheel-wrapper .emote-tray__right.dropped { background-image: url("/fe/lol-static-assets/images/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-static-assets/images/emote_wheel_images/wheel-right-hover.png"); } .emote-wheel-wrapper .emote-tray__bottom { background-image: url("/fe/lol-static-assets/images/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-static-assets/images/emote_wheel_images/wheel-bottom-active.png"); } .emote-wheel-wrapper .emote-tray__bottom.dragstart { background-image: url("/fe/lol-static-assets/images/emote_wheel_images/wheel-bottom-hover.png"); } .emote-wheel-wrapper .emote-tray__bottom.dropped { background-image: url("/fe/lol-static-assets/images/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-static-assets/images/emote_wheel_images/wheel-bottom-hover.png"); } .emote-wheel-wrapper .emote-tray__left { background-image: url("/fe/lol-static-assets/images/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-static-assets/images/emote_wheel_images/wheel-left-active.png"); } .emote-wheel-wrapper .emote-tray__left.dragstart { background-image: url("/fe/lol-static-assets/images/emote_wheel_images/wheel-left-hover.png"); } .emote-wheel-wrapper .emote-tray__left.dropped { background-image: url("/fe/lol-static-assets/images/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-static-assets/images/emote_wheel_images/wheel-left-hover.png"); } .emote-wheel-wrapper .emote-tray__center { background-image: url("/fe/lol-static-assets/images/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-static-assets/images/emote_wheel_images/wheel-center-active.png"); } .emote-wheel-wrapper .emote-tray__center.dragstart { background-image: url("/fe/lol-static-assets/images/emote_wheel_images/wheel-center-hover.png"); } .emote-wheel-wrapper .emote-tray__center.dropped { background-image: url("/fe/lol-static-assets/images/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-static-assets/images/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-static-assets/images/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-static-assets/images/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-static-assets/images/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-static-assets/images/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-static-assets/images/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-static-assets/images/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); } .perks-body-content, .page-name, .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .style_name, .style_summary { font-family: var(--font-display); } .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_summary_description, .perks-style-filter-tooltip { font-family: var(--font-body); } .page-name, .primary-style-selector .primary-style-selector-title, .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-title, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_name, .style_summary, .style_summary_description, .perks-style-filter-tooltip { -webkit-user-select: none; } .page-name, .primary-style-selector .primary-style-selector-title, .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-title, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_name, .style_summary, .style_summary_description, .perks-style-filter-tooltip { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .page-name, .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .style_name, .style_summary { text-transform: uppercase; } .page-name:lang(ko-kr), .primary-style-selector .primary-style-selector-title:lang(ko-kr), .primary-perk-selector .perk-selector-title:lang(ko-kr), .primary-perk-selector .perk-selector-title.keystone:lang(ko-kr), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ko-kr), .splashed-style-selector .splashed-style-selector-title:lang(ko-kr), .style-option-tooltip .level-locked-header:lang(ko-kr), .style-option-tooltip .tooltip-header:lang(ko-kr), .keystone-icon-tooltip .level-locked-header:lang(ko-kr), .keystone-icon-tooltip .tooltip-header:lang(ko-kr), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(ko-kr), .perks-tooltip .level-locked-header:lang(ko-kr), .perks-tooltip .tooltip-header:lang(ko-kr), .style_name:lang(ko-kr), .style_summary:lang(ko-kr), .page-name:lang(ja-jp), .primary-style-selector .primary-style-selector-title:lang(ja-jp), .primary-perk-selector .perk-selector-title:lang(ja-jp), .primary-perk-selector .perk-selector-title.keystone:lang(ja-jp), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ja-jp), .splashed-style-selector .splashed-style-selector-title:lang(ja-jp), .style-option-tooltip .level-locked-header:lang(ja-jp), .style-option-tooltip .tooltip-header:lang(ja-jp), .keystone-icon-tooltip .level-locked-header:lang(ja-jp), .keystone-icon-tooltip .tooltip-header:lang(ja-jp), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(ja-jp), .perks-tooltip .level-locked-header:lang(ja-jp), .perks-tooltip .tooltip-header:lang(ja-jp), .style_name:lang(ja-jp), .style_summary:lang(ja-jp), .page-name:lang(tr-tr), .primary-style-selector .primary-style-selector-title:lang(tr-tr), .primary-perk-selector .perk-selector-title:lang(tr-tr), .primary-perk-selector .perk-selector-title.keystone:lang(tr-tr), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(tr-tr), .splashed-style-selector .splashed-style-selector-title:lang(tr-tr), .style-option-tooltip .level-locked-header:lang(tr-tr), .style-option-tooltip .tooltip-header:lang(tr-tr), .keystone-icon-tooltip .level-locked-header:lang(tr-tr), .keystone-icon-tooltip .tooltip-header:lang(tr-tr), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(tr-tr), .perks-tooltip .level-locked-header:lang(tr-tr), .perks-tooltip .tooltip-header:lang(tr-tr), .style_name:lang(tr-tr), .style_summary:lang(tr-tr), .page-name:lang(el-gr), .primary-style-selector .primary-style-selector-title:lang(el-gr), .primary-perk-selector .perk-selector-title:lang(el-gr), .primary-perk-selector .perk-selector-title.keystone:lang(el-gr), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(el-gr), .splashed-style-selector .splashed-style-selector-title:lang(el-gr), .style-option-tooltip .level-locked-header:lang(el-gr), .style-option-tooltip .tooltip-header:lang(el-gr), .keystone-icon-tooltip .level-locked-header:lang(el-gr), .keystone-icon-tooltip .tooltip-header:lang(el-gr), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(el-gr), .perks-tooltip .level-locked-header:lang(el-gr), .perks-tooltip .tooltip-header:lang(el-gr), .style_name:lang(el-gr), .style_summary:lang(el-gr), .page-name:lang(th-th), .primary-style-selector .primary-style-selector-title:lang(th-th), .primary-perk-selector .perk-selector-title:lang(th-th), .primary-perk-selector .perk-selector-title.keystone:lang(th-th), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(th-th), .splashed-style-selector .splashed-style-selector-title:lang(th-th), .style-option-tooltip .level-locked-header:lang(th-th), .style-option-tooltip .tooltip-header:lang(th-th), .keystone-icon-tooltip .level-locked-header:lang(th-th), .keystone-icon-tooltip .tooltip-header:lang(th-th), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(th-th), .perks-tooltip .level-locked-header:lang(th-th), .perks-tooltip .tooltip-header:lang(th-th), .style_name:lang(th-th), .style_summary:lang(th-th), .page-name:lang(zh-tw), .primary-style-selector .primary-style-selector-title:lang(zh-tw), .primary-perk-selector .perk-selector-title:lang(zh-tw), .primary-perk-selector .perk-selector-title.keystone:lang(zh-tw), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(zh-tw), .splashed-style-selector .splashed-style-selector-title:lang(zh-tw), .style-option-tooltip .level-locked-header:lang(zh-tw), .style-option-tooltip .tooltip-header:lang(zh-tw), .keystone-icon-tooltip .level-locked-header:lang(zh-tw), .keystone-icon-tooltip .tooltip-header:lang(zh-tw), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(zh-tw), .perks-tooltip .level-locked-header:lang(zh-tw), .perks-tooltip .tooltip-header:lang(zh-tw), .style_name:lang(zh-tw), .style_summary:lang(zh-tw) { text-transform: none; } .page-name, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .page-name:lang(ar-ae), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(ar-ae) { letter-spacing: 0; } .primary-perk-selector .perk-selector-title.keystone, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .tooltip-header, .perks-tooltip .tooltip-header { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .primary-perk-selector .perk-selector-title.keystone:lang(ar-ae), .style-option-tooltip .tooltip-header:lang(ar-ae), .keystone-icon-tooltip .tooltip-header:lang(ar-ae), .perks-tooltip .tooltip-header:lang(ar-ae) { letter-spacing: 0; } .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .keystone-icon-tooltip .level-locked-header, .perks-tooltip .level-locked-header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .primary-style-selector .primary-style-selector-title:lang(ja-jp), .primary-perk-selector .perk-selector-title:lang(ja-jp), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ja-jp), .splashed-style-selector .splashed-style-selector-title:lang(ja-jp), .style-option-tooltip .level-locked-header:lang(ja-jp), .keystone-icon-tooltip .level-locked-header:lang(ja-jp), .perks-tooltip .level-locked-header:lang(ja-jp) { font-size: 13px; } .primary-style-selector .primary-style-selector-title:lang(ar-ae), .primary-perk-selector .perk-selector-title:lang(ar-ae), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ar-ae), .splashed-style-selector .splashed-style-selector-title:lang(ar-ae), .style-option-tooltip .level-locked-header:lang(ar-ae), .keystone-icon-tooltip .level-locked-header:lang(ar-ae), .perks-tooltip .level-locked-header:lang(ar-ae) { letter-spacing: 0; } .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .perks-style-filter-tooltip { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .primary-style-selector .primary-style-selector-description:lang(ja-jp), .primary-perk-selector .perk-selector-description:lang(ja-jp), .splashed-selected-perk-icon .splashed-selected-perk-icon-description:lang(ja-jp), .splashed-style-selector .splashed-style-selector-description:lang(ja-jp), .style-option-tooltip .tooltip-description:lang(ja-jp), .style-option-tooltip .requirement:lang(ja-jp), .keystone-icon-tooltip .tooltip-description:lang(ja-jp), .keystone-icon-tooltip .requirement:lang(ja-jp), .perks-tooltip .tooltip-description:lang(ja-jp), .perks-tooltip .requirement:lang(ja-jp), .perks-style-filter-tooltip:lang(ja-jp) { font-size: 13px; } .primary-style-selector .primary-style-selector-description:lang(ar-ae), .primary-perk-selector .perk-selector-description:lang(ar-ae), .splashed-selected-perk-icon .splashed-selected-perk-icon-description:lang(ar-ae), .splashed-style-selector .splashed-style-selector-description:lang(ar-ae), .style-option-tooltip .tooltip-description:lang(ar-ae), .style-option-tooltip .requirement:lang(ar-ae), .keystone-icon-tooltip .tooltip-description:lang(ar-ae), .keystone-icon-tooltip .requirement:lang(ar-ae), .perks-tooltip .tooltip-description:lang(ar-ae), .perks-tooltip .requirement:lang(ar-ae), .perks-style-filter-tooltip:lang(ar-ae) { letter-spacing: 0; } .primary-style-selector .primary-style-selector-text, .primary-perk-selector .perk-selector-text.drawer-closed, .splashed-selected-perk-icon .splashed-selected-perk-icon-text, .splashed-style-selector .splashed-style-selector-text { opacity: 1; transform: translateX(0); transition: opacity 0.3s ease, transform 0.3s ease; } .primary-style-selector .primary-style-selector-text.hide, .primary-perk-selector .perk-selector-text.drawer-open, .splashed-selected-perk-icon .splashed-selected-perk-icon-text.hidden, .splashed-style-selector .splashed-style-selector-text.hide { opacity: 0; transform: translateX(10px); transition: opacity 0.3s ease, transform 0.3s ease; } .primary-style-selector .primary-style-selector-left, .primary-perk-selector .primary-perk-selector-left, .splashed-selected-perk-icon .splashed-selected-perk-icon-left, .splashed-style-selector .splashed-style-selector-left { align-items: center; display: flex; flex-grow: 0; flex-shrink: 0; justify-content: center; width: 107px; margin-left: -30px; margin-right: 0; } .primary-style-selector .primary-style-selector-right, .primary-perk-selector .primary-perk-selector-right, .splashed-selected-perk-icon .splashed-selected-perk-icon-right, .splashed-style-selector .splashed-style-selector-right { flex-grow: 1; position: relative; } .primary-style-selector .primary-style-selector-text, .primary-perk-selector .perk-selector-text, .splashed-selected-perk-icon .splashed-selected-perk-icon-text, .splashed-style-selector .splashed-style-selector-text { height: 88px; position: relative; top: calc((88px - 47px) / 2 - 3px); } .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title { margin-bottom: 3px; } .primary-style-selector .primary-style-selector-title, .splashed-style-selector .splashed-style-selector-title { font-size: 18px; line-height: 22px; letter-spacing: 0.05em; transition: color 0.2s; margin-top: 13px; } .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-description { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .primary-style-selector .primary-style-selector-description a:link, .primary-perk-selector .perk-selector-description a:link, .splashed-selected-perk-icon .splashed-selected-perk-icon-description a:link, .splashed-style-selector .splashed-style-selector-description a:link, .primary-style-selector .primary-style-selector-description a:not(:link), .primary-perk-selector .perk-selector-description a:not(:link), .splashed-selected-perk-icon .splashed-selected-perk-icon-description a:not(:link), .splashed-style-selector .splashed-style-selector-description a:not(:link) { font-weight: bold; color: #fff; cursor: default; } .style-option-tooltip, .keystone-icon-tooltip, .perks-tooltip { box-sizing: border-box; padding: 0; direction: ltr; text-align: left; } .style-option-tooltip .level-locked-header, .keystone-icon-tooltip .level-locked-header, .perks-tooltip .level-locked-header { color: #a09b8c; padding: 5px 15px; background: #1e2328; } .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .tooltip-header, .perks-tooltip .tooltip-header { display: flex; justify-content: space-between; padding: 12px 15px 10px; } .style-option-tooltip .tooltip-header .points, .keystone-icon-tooltip .tooltip-header .points, .perks-tooltip .tooltip-header .points { color: #a09b8c; } .style-option-tooltip .tooltip-description, .keystone-icon-tooltip .tooltip-description, .perks-tooltip .tooltip-description { margin: 0; padding: 0 15px 15px; } .style-option-tooltip .tooltip-description a:link, .keystone-icon-tooltip .tooltip-description a:link, .perks-tooltip .tooltip-description a:link, .style-option-tooltip .tooltip-description a:not(:link), .keystone-icon-tooltip .tooltip-description a:not(:link), .perks-tooltip .tooltip-description a:not(:link) { font-weight: bold; color: #f00; cursor: default; } .style-option-tooltip .tooltip-description .tooltip-description-line, .keystone-icon-tooltip .tooltip-description .tooltip-description-line, .perks-tooltip .tooltip-description .tooltip-description-line { margin: 10px 0 0 0; } .style-option-tooltip .tooltip-description .tooltip-description-line:first-child, .keystone-icon-tooltip .tooltip-description .tooltip-description-line:first-child, .perks-tooltip .tooltip-description .tooltip-description-line:first-child { margin-top: 0; } .style-option-tooltip .requirement, .keystone-icon-tooltip .requirement, .perks-tooltip .requirement { color: #be1e37; } @-moz-keyframes perks-item-description-fade-in { from { opacity: 0; transform: translateX(10px); visibility: hidden; } to { opacity: 1; transform: translateX(0); visibility: visible; } } @-webkit-keyframes perks-item-description-fade-in { from { opacity: 0; transform: translateX(10px); visibility: hidden; } to { opacity: 1; transform: translateX(0); visibility: visible; } } @-o-keyframes perks-item-description-fade-in { from { opacity: 0; transform: translateX(10px); visibility: hidden; } to { opacity: 1; transform: translateX(0); visibility: visible; } } @keyframes perks-item-description-fade-in { from { opacity: 0; transform: translateX(10px); visibility: hidden; } to { opacity: 1; transform: translateX(0); visibility: visible; } } @-moz-keyframes perks-item-description-fade-out { from { opacity: 1; transform: translateX(0); visibility: visible; } to { opacity: 0; transform: translateX(10px); visibility: hidden; } } @-webkit-keyframes perks-item-description-fade-out { from { opacity: 1; transform: translateX(0); visibility: visible; } to { opacity: 0; transform: translateX(10px); visibility: hidden; } } @-o-keyframes perks-item-description-fade-out { from { opacity: 1; transform: translateX(0); visibility: visible; } to { opacity: 0; transform: translateX(10px); visibility: hidden; } } @keyframes perks-item-description-fade-out { from { opacity: 1; transform: translateX(0); visibility: visible; } to { opacity: 0; transform: translateX(10px); visibility: hidden; } } .style_picker { height: 635px; width: 1055px; position: relative; } .style_picker_columns { height: 100%; display: flex; } .perks-tutorial-tooltip-style-picker { width: 250px; } lol-uikit-flat-checkbox.longDescriptions { position: absolute; bottom: 0px; left: 29px; } .perks-body-content, .page-name, .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .style_name, .style_summary { font-family: var(--font-display); } .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_summary_description, .perks-style-filter-tooltip { font-family: var(--font-body); } .perks-body-content, .page-name, .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .style_name, .style_summary { font-family: var(--font-display); } .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_summary_description, .perks-style-filter-tooltip { font-family: var(--font-body); } .page-name, .primary-style-selector .primary-style-selector-title, .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-title, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_name, .style_summary, .style_summary_description, .perks-style-filter-tooltip { -webkit-user-select: none; } .page-name, .primary-style-selector .primary-style-selector-title, .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-title, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_name, .style_summary, .style_summary_description, .perks-style-filter-tooltip { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .page-name, .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .style_name, .style_summary { text-transform: uppercase; } .page-name:lang(ko-kr), .primary-style-selector .primary-style-selector-title:lang(ko-kr), .primary-perk-selector .perk-selector-title:lang(ko-kr), .primary-perk-selector .perk-selector-title.keystone:lang(ko-kr), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ko-kr), .splashed-style-selector .splashed-style-selector-title:lang(ko-kr), .style-option-tooltip .level-locked-header:lang(ko-kr), .style-option-tooltip .tooltip-header:lang(ko-kr), .keystone-icon-tooltip .level-locked-header:lang(ko-kr), .keystone-icon-tooltip .tooltip-header:lang(ko-kr), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(ko-kr), .perks-tooltip .level-locked-header:lang(ko-kr), .perks-tooltip .tooltip-header:lang(ko-kr), .style_name:lang(ko-kr), .style_summary:lang(ko-kr), .page-name:lang(ja-jp), .primary-style-selector .primary-style-selector-title:lang(ja-jp), .primary-perk-selector .perk-selector-title:lang(ja-jp), .primary-perk-selector .perk-selector-title.keystone:lang(ja-jp), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ja-jp), .splashed-style-selector .splashed-style-selector-title:lang(ja-jp), .style-option-tooltip .level-locked-header:lang(ja-jp), .style-option-tooltip .tooltip-header:lang(ja-jp), .keystone-icon-tooltip .level-locked-header:lang(ja-jp), .keystone-icon-tooltip .tooltip-header:lang(ja-jp), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(ja-jp), .perks-tooltip .level-locked-header:lang(ja-jp), .perks-tooltip .tooltip-header:lang(ja-jp), .style_name:lang(ja-jp), .style_summary:lang(ja-jp), .page-name:lang(tr-tr), .primary-style-selector .primary-style-selector-title:lang(tr-tr), .primary-perk-selector .perk-selector-title:lang(tr-tr), .primary-perk-selector .perk-selector-title.keystone:lang(tr-tr), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(tr-tr), .splashed-style-selector .splashed-style-selector-title:lang(tr-tr), .style-option-tooltip .level-locked-header:lang(tr-tr), .style-option-tooltip .tooltip-header:lang(tr-tr), .keystone-icon-tooltip .level-locked-header:lang(tr-tr), .keystone-icon-tooltip .tooltip-header:lang(tr-tr), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(tr-tr), .perks-tooltip .level-locked-header:lang(tr-tr), .perks-tooltip .tooltip-header:lang(tr-tr), .style_name:lang(tr-tr), .style_summary:lang(tr-tr), .page-name:lang(el-gr), .primary-style-selector .primary-style-selector-title:lang(el-gr), .primary-perk-selector .perk-selector-title:lang(el-gr), .primary-perk-selector .perk-selector-title.keystone:lang(el-gr), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(el-gr), .splashed-style-selector .splashed-style-selector-title:lang(el-gr), .style-option-tooltip .level-locked-header:lang(el-gr), .style-option-tooltip .tooltip-header:lang(el-gr), .keystone-icon-tooltip .level-locked-header:lang(el-gr), .keystone-icon-tooltip .tooltip-header:lang(el-gr), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(el-gr), .perks-tooltip .level-locked-header:lang(el-gr), .perks-tooltip .tooltip-header:lang(el-gr), .style_name:lang(el-gr), .style_summary:lang(el-gr), .page-name:lang(th-th), .primary-style-selector .primary-style-selector-title:lang(th-th), .primary-perk-selector .perk-selector-title:lang(th-th), .primary-perk-selector .perk-selector-title.keystone:lang(th-th), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(th-th), .splashed-style-selector .splashed-style-selector-title:lang(th-th), .style-option-tooltip .level-locked-header:lang(th-th), .style-option-tooltip .tooltip-header:lang(th-th), .keystone-icon-tooltip .level-locked-header:lang(th-th), .keystone-icon-tooltip .tooltip-header:lang(th-th), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(th-th), .perks-tooltip .level-locked-header:lang(th-th), .perks-tooltip .tooltip-header:lang(th-th), .style_name:lang(th-th), .style_summary:lang(th-th), .page-name:lang(zh-tw), .primary-style-selector .primary-style-selector-title:lang(zh-tw), .primary-perk-selector .perk-selector-title:lang(zh-tw), .primary-perk-selector .perk-selector-title.keystone:lang(zh-tw), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(zh-tw), .splashed-style-selector .splashed-style-selector-title:lang(zh-tw), .style-option-tooltip .level-locked-header:lang(zh-tw), .style-option-tooltip .tooltip-header:lang(zh-tw), .keystone-icon-tooltip .level-locked-header:lang(zh-tw), .keystone-icon-tooltip .tooltip-header:lang(zh-tw), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(zh-tw), .perks-tooltip .level-locked-header:lang(zh-tw), .perks-tooltip .tooltip-header:lang(zh-tw), .style_name:lang(zh-tw), .style_summary:lang(zh-tw) { text-transform: none; } .page-name, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .page-name:lang(ar-ae), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(ar-ae) { letter-spacing: 0; } .primary-perk-selector .perk-selector-title.keystone, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .tooltip-header, .perks-tooltip .tooltip-header { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .primary-perk-selector .perk-selector-title.keystone:lang(ar-ae), .style-option-tooltip .tooltip-header:lang(ar-ae), .keystone-icon-tooltip .tooltip-header:lang(ar-ae), .perks-tooltip .tooltip-header:lang(ar-ae) { letter-spacing: 0; } .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .keystone-icon-tooltip .level-locked-header, .perks-tooltip .level-locked-header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .primary-style-selector .primary-style-selector-title:lang(ja-jp), .primary-perk-selector .perk-selector-title:lang(ja-jp), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ja-jp), .splashed-style-selector .splashed-style-selector-title:lang(ja-jp), .style-option-tooltip .level-locked-header:lang(ja-jp), .keystone-icon-tooltip .level-locked-header:lang(ja-jp), .perks-tooltip .level-locked-header:lang(ja-jp) { font-size: 13px; } .primary-style-selector .primary-style-selector-title:lang(ar-ae), .primary-perk-selector .perk-selector-title:lang(ar-ae), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ar-ae), .splashed-style-selector .splashed-style-selector-title:lang(ar-ae), .style-option-tooltip .level-locked-header:lang(ar-ae), .keystone-icon-tooltip .level-locked-header:lang(ar-ae), .perks-tooltip .level-locked-header:lang(ar-ae) { letter-spacing: 0; } .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .perks-style-filter-tooltip { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .primary-style-selector .primary-style-selector-description:lang(ja-jp), .primary-perk-selector .perk-selector-description:lang(ja-jp), .splashed-selected-perk-icon .splashed-selected-perk-icon-description:lang(ja-jp), .splashed-style-selector .splashed-style-selector-description:lang(ja-jp), .style-option-tooltip .tooltip-description:lang(ja-jp), .style-option-tooltip .requirement:lang(ja-jp), .keystone-icon-tooltip .tooltip-description:lang(ja-jp), .keystone-icon-tooltip .requirement:lang(ja-jp), .perks-tooltip .tooltip-description:lang(ja-jp), .perks-tooltip .requirement:lang(ja-jp), .perks-style-filter-tooltip:lang(ja-jp) { font-size: 13px; } .primary-style-selector .primary-style-selector-description:lang(ar-ae), .primary-perk-selector .perk-selector-description:lang(ar-ae), .splashed-selected-perk-icon .splashed-selected-perk-icon-description:lang(ar-ae), .splashed-style-selector .splashed-style-selector-description:lang(ar-ae), .style-option-tooltip .tooltip-description:lang(ar-ae), .style-option-tooltip .requirement:lang(ar-ae), .keystone-icon-tooltip .tooltip-description:lang(ar-ae), .keystone-icon-tooltip .requirement:lang(ar-ae), .perks-tooltip .tooltip-description:lang(ar-ae), .perks-tooltip .requirement:lang(ar-ae), .perks-style-filter-tooltip:lang(ar-ae) { letter-spacing: 0; } .perks-body-content, .page-name, .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .style_name, .style_summary { font-family: var(--font-display); } .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_summary_description, .perks-style-filter-tooltip { font-family: var(--font-body); } .perks-panel { height: 100%; overflow: hidden; } .perks-panel.hidden { display: none; } .perks-body { /* These values must a fixed width/height (not percentages) * in order for the champ-select modal popup to be properly * sized. */ height: 635px; width: 1055px; position: relative; } .perks-body-content { max-width: 1200px; margin: 0 auto; padding: 28px 0 0 35px; position: relative; display: flex; -webkit-user-select: none; height: 100%; box-sizing: border-box; z-index: 0; } .perks-background-video { position: absolute; top: -81px; } .perks-construct-minspec { left: -1px; top: -80px; } .style-background-videos-enabled .perks-construct-minspec { background-image: none !important; } .perks-body-column { width: 275px; flex-shrink: 0; } .perks-body-column+ .perks-body-column { margin-left: 50px; } .perks-body-column:first-child .perks-body-column-top { flex-direction: row ; } .perks-body-column-top { height: 40px; display: flex; align-items: center; direction: ltr; } .perks-pages-dropdown-holder { position: relative; } .perks-dropdown-input { position: relative; margin-left: 3px; direction: ltr; } .page-name { text-transform: none; padding: 8px 5px 9px 12px ; height: 32px; margin-top: 0; } .perk-primary-style { box-sizing: border-box; height: 100%; width: 200px; position: relative; padding-left: 10px; } .perks-body-choices-holder { position: relative; direction: ltr; } .perks-progress-bar { position: absolute; top: calc(131px * 0.5); left: calc(47px * 0.5); } .perks-progress-bar:lang(ar-ae) { left: auto; right: calc(47px * 0.5); } .stat-mod-perks-progress-bar { position: absolute; bottom: 18px; left: calc(47px * 0.5 - 6px); --row-height: 44px; --row-height-0: 44px; --row-height-1: 44px; --y-offset: 0; } .stat-mod-perks-progress-bar:lang(ar-ae) { left: auto; right: calc(47px * 0.5 - 6px); } .perks-tutorial-tooltip-primary-path, .perks-tutorial-tooltip-secondary-path, .perks-tutorial-tooltip-stat-mods { width: 250px; } .perks-edit-btn { margin-right: 7px ; } .perks-delete-page-button { margin: 0 0 0 10px ; } .add-page { margin: 0 0 0 10px ; } .add-page.block { display: block; } .perks-settings { position: absolute; left: 35px; bottom: 27px; display: flex; align-items: center; } .perks-grid-mode-buttons { display: flex; line-height: 0; margin-right: 26px; transition: opacity 0.2s; } .perks-grid-mode-buttons:not(:hover) { opacity: 0.7; } .perks-grid-mode-label { cursor: pointer; display: block; } .perks-grid-mode-label+ .perks-grid-mode-label { margin-left: -1px; } .perks-grid-mode-label+ .perks-grid-mode-label .perks-grid-mode-icon { border-left-color: #585342; } .perks-grid-mode-input { display: none; } .perks-grid-mode-input:checked+ .perks-grid-mode-icon { border-color: #585342; } .perks-grid-mode-input:not(:checked)+ .perks-grid-mode-path { opacity: 0.5; } .perks-grid-mode-icon { border: thin solid #010a13; fill: #f0e6d2; padding: 5px; transition: border-color 0.2s; } .perks-grid-mode-path { transition: opacity 0.2s; } .primary-style-selector { display: flex; height: 131px; width: 275px; } .primary-style-selector .primary-style-selector-title.domination { color: #d44242; } .primary-style-selector .primary-style-selector-title.inspiration { color: #49aab9; } .primary-style-selector .primary-style-selector-title.precision { color: #aea789; } .primary-style-selector .primary-style-selector-title.resolve { color: #a1d586; } .primary-style-selector .primary-style-selector-title.sorcery { color: #9faafc; } .primary-perk-selector { display: flex; position: relative; height: 107px; } .primary-perk-selector+ .primary-perk-selector { height: 88px; } .primary-perk-selector.keystone.domination { --middle-color: #dc4747; } .primary-perk-selector.keystone.inspiration { --middle-color: #48b4be; } .primary-perk-selector.keystone.precision { --middle-color: #c8aa6e; } .primary-perk-selector.keystone.resolve { --middle-color: #a4d08d; } .primary-perk-selector.keystone.sorcery { --middle-color: #6c75f5; } .primary-perk-selector.keystone:before, .primary-perk-selector.keystone:after { background: linear-gradient(to right, transparent 0%, var(--middle-color) 50%, transparent 100%); content: ''; display: block; height: 9px; left: -15px; margin: 0; position: absolute; width: 286px; -webkit-mask-image: url("/fe/lol-collections/perks/images/primary-perk-selector/keystone-border.svg"); transform: none ; } .primary-perk-selector.keystone:before { top: -5px; } .primary-perk-selector.keystone:after { bottom: -5px; transform: scaleY(-1) ; } .primary-perk-selector .primary-perk-selector-keystone { font-size: 10px; letter-spacing: 0.15em; position: absolute; text-transform: uppercase; top: -19px; } .primary-perk-selector .primary-perk-selector-keystone.domination { color: #dc4747; } .primary-perk-selector .primary-perk-selector-keystone.inspiration { color: #48b4be; } .primary-perk-selector .primary-perk-selector-keystone.precision { color: #c8aa6e; } .primary-perk-selector .primary-perk-selector-keystone.resolve { color: #a4d08d; } .primary-perk-selector .primary-perk-selector-keystone.sorcery { color: #6c75f5; } .primary-perk-selector .perk-selector-text.keystone { top: calc((107px - 62px) / 2 - 4px); } .primary-perk-selector .perk-selector-title.domination { color: #d44242; } .primary-perk-selector .perk-selector-title.inspiration { color: #49aab9; } .primary-perk-selector .perk-selector-title.precision { color: #aea789; } .primary-perk-selector .perk-selector-title.resolve { color: #a1d586; } .primary-perk-selector .perk-selector-title.sorcery { color: #9faafc; } .primary-selected-perk-icon.keystone { --diameter: 62px; } .splashed-perks-selector { position: relative; margin-bottom: 22px; } .splashed-perks-selector .splashed-perk-selector-hider { position: absolute; top: -17px; left: 77px ; right: auto ; width: 198px; } .splashed-perks-selector .splashed-perk-selector-hider.gridmode { top: -15px; } .splashed-perks-selector .splashed-perk-selector-drawer { height: 78px; position: relative; } .splashed-selected-perk-icon { height: 88px; display: flex; } .splashed-selected-perk-icon:first-child { height: 107px; } .splashed-selected-perk-icon:first-child lol-perks-perk-icon-button.splashed-selected-perk-icon-button { top: -5px; } .splashed-selected-perk-icon:first-child .splashed-selected-perk-icon-text { top: 21px; } .splashed-selected-perk-icon .splashed-selected-perk-icon-title.domination { color: #d44242; } .splashed-selected-perk-icon .splashed-selected-perk-icon-title.inspiration { color: #49aab9; } .splashed-selected-perk-icon .splashed-selected-perk-icon-title.precision { color: #aea789; } .splashed-selected-perk-icon .splashed-selected-perk-icon-title.resolve { color: #a1d586; } .splashed-selected-perk-icon .splashed-selected-perk-icon-title.sorcery { color: #9faafc; } .splashed_perk_option { --diameter: 38px; } .splashed-perk-option-glowing-dot { position: absolute; right: -9px; top: -9px; } .splashed-style-selector { display: flex; height: 131px; position: relative; } .splashed-style-selector .splashed-style-selector-title.domination { color: #d44242; } .splashed-style-selector .splashed-style-selector-title.inspiration { color: #49aab9; } .splashed-style-selector .splashed-style-selector-title.precision { color: #aea789; } .splashed-style-selector .splashed-style-selector-title.resolve { color: #a1d586; } .splashed-style-selector .splashed-style-selector-title.sorcery { color: #9faafc; } .stat-mod-perk-selector { height: 44px; } .stat-mod-perk-selector+ .stat-mod-perk-selector { height: 44px; } .stat-mod-perk-selector lol-perks-perk-icon-button { --diameter: 28px; --scale-when-open: 1; } .stat-mod-perk-selector .perk-selector-text { top: 4px; } .stat-mod-perk-selector .perk-selector-text .perk-selector-description { white-space: nowrap; } .style-keystones { position: relative; } .style-keystones .right-icon { margin-left: 6px; } .perk-option-glowing-dot { position: absolute; right: -9px; top: -9px; } .keystone_icon { display: inline-block; position: relative; } .thumb_keystone { border-radius: 50%; width: 90px; height: 90px; cursor: pointer; } .thumb_keystone_placeholder { display: inline-block; width: 90px; height: 90px; } .keystone-icon-glowing-dot { position: absolute; right: 0; top: 0; } .perks-panel-perks-pages-dropdown { z-index: 1 ; width: 300px; position: relative; } #perks-panel-page-dropdown { display: flex; --flat-dropdown-scrollable-max-height: 410px; --flat-dropdown-current-content-text-transform: uppercase; } .lol-perks-panel-profile-container #perks-panel-page-dropdown { top: 106px; left: 0; } #perks-panel-page-dropdown .perks-pages-dropdown-add { padding: 0 0 0 22px ; margin: 0 0 0 -4px ; } .perks-icon-add-page { position: absolute; right: 10px ; left: auto ; top: 20px; width: 12px; height: 12px; } .perks-icon-add-page:before { content: ''; width: 10px; height: 2px; background: #cdbe91; position: absolute; } .perks-icon-add-page:after { content: ''; width: 10px; height: 2px; background: #cdbe91; position: absolute; -webkit-transform: rotate(90deg); } .perks-icon-add-page.disabled:before, .perks-icon-add-page.disabled:after { background: #5c5b57; } .pages-dropdown-option { display: block; } .page-mark-container, #perks-panel-page-dropdown .page-mark-container { display: inline-block; width: 22px; margin: 0 0 0 -6px ; vertical-align: middle; } .page-mark-container .exclamation-mark, #perks-panel-page-dropdown .page-mark-container .exclamation-mark { display: none; background: #e62142; -webkit-mask-image: url("/fe/lol-collections/perks/images/exclamation.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 14px 14px; vertical-align: middle; height: 28px; } .page-mark-container lol-perks-glowing-dot, #perks-panel-page-dropdown .page-mark-container lol-perks-glowing-dot { display: none; margin: auto; } .page-mark-container.invalid .exclamation-mark, #perks-panel-page-dropdown .page-mark-container.invalid .exclamation-mark, .page-mark-container.auto-modified lol-perks-glowing-dot, #perks-panel-page-dropdown .page-mark-container.auto-modified lol-perks-glowing-dot { display: block; } #perks-panel-page-dropdown .perks-pages-dropdown-option-text { display: inline-block; max-width: 186px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text { max-width: 230px; vertical-align: middle; line-height: 28px; text-transform: none; } .perks-pages-dropdown-option-tooltip { display: inline-block; white-space: nowrap; } .perks-tooltip.short-width { width: 200px; } .style_name, .style_summary { font-weight: 400; } .style_picker_column[disabled]:hover { -webkit-filter: grayscale(100%); } .style_picker_column { flex-basis: 100%; display: block; font-family: 'LoL Body'; color: #fff; box-shadow: 0 0 0 1px rgba(1,10,19,0.85); text-align: center; cursor: pointer; position: relative; -webkit-filter: saturate(0); transition: -webkit-filter 0.25s ease-out 0.15s; } .style_picker_column:hover { -webkit-filter: none; } .style_picker_column:hover .style_background { opacity: 0.7; } .style_picker_column:hover .style_background.style_video { opacity: 1; } .style_picker_column:hover .style_logo { opacity: 1; -webkit-filter: grayscale(0%); } .style_picker_column:hover .style_vfx { opacity: 1; } .style_picker_column:hover.domination .style_logo_ring { -webkit-filter: hue-rotate(0deg) grayscale(0%); } .style_picker_column:hover.domination .style_name { color: #d44242; } .style_picker_column:hover.inspiration .style_logo_ring { -webkit-filter: hue-rotate(245deg) grayscale(0%); } .style_picker_column:hover.inspiration .style_name { color: #49aab9; } .style_picker_column:hover.precision .style_logo_ring { -webkit-filter: hue-rotate(65deg) grayscale(0%); } .style_picker_column:hover.precision .style_name { color: #aea789; } .style_picker_column:hover.resolve .style_logo_ring { -webkit-filter: hue-rotate(165deg) grayscale(0%); } .style_picker_column:hover.resolve .style_name { color: #a1d586; } .style_picker_column:hover.sorcery .style_logo_ring { -webkit-filter: hue-rotate(285deg) grayscale(0%); } .style_picker_column:hover.sorcery .style_name { color: #9faafc; } .style_picker_column:hover .description_text { opacity: 1; } .style_background { height: 639px; width: 211px; position: absolute; opacity: 0; top: 0; left: 0; } .style_video { transition: opacity 0.1s ease-out 0.05s; top: -30px; } .style_video.precision { -webkit-filter: hue-rotate(145deg); } .style_video.domination { -webkit-filter: hue-rotate(88deg); } .style_video.resolve { -webkit-filter: hue-rotate(245deg); } .style_video.inspiration { -webkit-filter: hue-rotate(297deg); } .background_lines { background-image: url("/fe/lol-collections/perks/images/style-picker-column/lines.png"); transition: opacity 0.1s ease-out 0.05s; } .background_glow { transition: opacity 0.25s ease-out 0.15s; } .domination .background_glow { background-image: url("/fe/lol-collections/perks/images/Domination/glow-d.png"); } .inspiration .background_glow { background-image: url("/fe/lol-collections/perks/images/Inspiration/glow-i.png"); } .precision .background_glow { background-image: url("/fe/lol-collections/perks/images/Precision/glow-p.png"); } .resolve .background_glow { background-image: url("/fe/lol-collections/perks/images/Resolve/glow-r.png"); } .sorcery .background_glow { background-image: url("/fe/lol-collections/perks/images/Sorcery/glow-s.png"); } .style_content { width: 211px; position: absolute; } .style_logo_lockup { position: relative; height: 246px; margin: 30px 0 56px; } .style_logo_ring { content: url("/fe/lol-collections/perks/images/style-picker-column/ring.png"); position: absolute; top: 0; left: 0; transition: -webkit-filter 0.15s ease-out; } .domination .style_logo_ring { -webkit-filter: hue-rotate(0deg) grayscale(100%); } .inspiration .style_logo_ring { -webkit-filter: hue-rotate(245deg) grayscale(100%); } .precision .style_logo_ring { -webkit-filter: hue-rotate(65deg) grayscale(100%); } .resolve .style_logo_ring { -webkit-filter: hue-rotate(165deg) grayscale(100%); } .sorcery .style_logo_ring { -webkit-filter: hue-rotate(285deg) grayscale(100%); } .style_logo { opacity: 0.7; -webkit-filter: grayscale(100%); transition: -webkit-filter 0.15s ease-out; } .style_logo.icon_precision { content: url("/fe/lol-collections/perks/images/Precision/icon-p.png"); } .style_logo.icon_domination { content: url("/fe/lol-collections/perks/images/Domination/icon-d.png"); } .style_logo.icon_sorcery { content: url("/fe/lol-collections/perks/images/Sorcery/icon-s.png"); } .style_logo.icon_inspiration { content: url("/fe/lol-collections/perks/images/Inspiration/icon-i.png"); } .style_logo.icon_resolve { content: url("/fe/lol-collections/perks/images/Resolve/icon-r.png"); } .style_vfx { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.25s ease-out; } .domination .style_vfx { content: url("/fe/lol-collections/perks/images/Domination/vfx-d.png"); } .inspiration .style_vfx { content: url("/fe/lol-collections/perks/images/Inspiration/vfx-i.png"); } .precision .style_vfx { content: url("/fe/lol-collections/perks/images/Precision/vfx-p.png"); } .resolve .style_vfx { content: url("/fe/lol-collections/perks/images/Resolve/vfx-r.png"); } .sorcery .style_vfx { content: url("/fe/lol-collections/perks/images/Sorcery/vfx-s.png"); } .style_header { width: 211px; position: absolute; bottom: 10px; direction: ltr; } .style_name { color: #727271; font-size: 16px; letter-spacing: 0.15em ; line-height: 19.2px; margin-bottom: 4px; transition: color 0.15s ease-out; } .style_summary { color: #ddd; font-size: 10px; letter-spacing: 0.075em; line-height: 14px; } .description_text { opacity: 0.2; transition: opacity 0.15s ease-out; } .style_summary_description { color: #ddd; font-size: 11px; font-weight: 400; letter-spacing: 0.05em; line-height: 14px; margin: 22px; direction: ltr; } .locked_style_keystones { width: 100%; height: 162px; background-image: url("/fe/lol-collections/perks/images/style-picker-column/lock_diamond.png"); background-position: center center; background-repeat: no-repeat; background-size: 40%; } .locked_style_footer { border-top: 2px solid rgba(91,90,86,0.8); height: 60px; margin: 49px 64px 0; position: relative; } .locked_style_footer:after { background: #000; border: 2px solid rgba(91,90,86,0.8); content: ''; height: 9px; left: 50%; position: absolute; transform: translate(-50%, calc(-50% - 2px * 0.5)) rotate(45deg); width: 9px; } .perks-style-filter { --selectedX: 0; display: flex; margin: 0 0 0 10px ; } .perks-style-filter> lol-perks-style-filter-checkbox:first-child { position: relative; } .perks-style-filter> lol-perks-style-filter-checkbox:first-child:after { background: #c89b3c; bottom: -30px; content: ''; height: 3px; left: 0; position: absolute; transition: transform 0.2s; transform: translateX(var(--selectedX)); width: 100%; } .perks-style-filter-tooltip { min-width: 50px; padding: 7px 10px; text-align: center; } .perk-icon-button { --diameter: 38px; } lol-uikit-close-button.perks-edit-btn[loading] { visibility: hidden; position: relative; } lol-uikit-close-button.perks-edit-btn[loading]::before { background-image: url("/fe/lol-collections/perks/images/spin.gif"); background-size: cover; width: 28px; height: 28px; display: block; content: ""; visibility: visible; position: absolute; } .lol-perks-progress-bar { --pattern-height: 180px; } .lol-perks-progress-bar:not([style-name=stat-shard]) { --row-height: 88px; --row-height-0: 131px; --row-height-1: 107px; --y-offset: 42px; } .lol-perks-progress-bar:not([style-name]) { --color-light: #dfe5e5; --color-dark: #adb2b2; } .lol-perks-progress-bar:not([style-name]) .fill { background: rgba(173,178,178,0.2); box-shadow: inset 0 0 1px rgba(223,229,229,0.3); } .lol-perks-progress-bar:not([style-name]) .progress { background: rgba(173,178,178,0.4); box-shadow: inset 0 0 1px rgba(223,229,229,0.6); } .lol-perks-progress-bar[style-name=domination] { --color-light: #d44242; --color-dark: #dc4747; } .lol-perks-progress-bar[style-name=domination] .fill { background: rgba(220,71,71,0.2); box-shadow: inset 0 0 1px rgba(212,66,66,0.3); } .lol-perks-progress-bar[style-name=domination] .progress { background: rgba(220,71,71,0.4); box-shadow: inset 0 0 1px rgba(212,66,66,0.6); } .lol-perks-progress-bar[style-name=domination] .pulsating { background-image: repeating-linear-gradient(0deg, rgba(212,66,66,0), #d44242 calc(var(--pattern-height) * 0.5), rgba(212,66,66,0) var(--pattern-height)); } .lol-perks-progress-bar[style-name=domination] .progress-glow { -webkit-filter: drop-shadow(0 0 5px rgba(212,66,66,0.75)) drop-shadow(0 0 5px rgba(212,66,66,0.75)); } .lol-perks-progress-bar[style-name=domination] .brightness { -webkit-filter: drop-shadow(0 0 5px rgba(212,66,66,0.75)) drop-shadow(0 0 5px rgba(212,66,66,0.75)) brightness(2); } .lol-perks-progress-bar[style-name=inspiration] { --color-light: #49aab9; --color-dark: #48b4be; } .lol-perks-progress-bar[style-name=inspiration] .fill { background: rgba(72,180,190,0.2); box-shadow: inset 0 0 1px rgba(73,170,185,0.3); } .lol-perks-progress-bar[style-name=inspiration] .progress { background: rgba(72,180,190,0.4); box-shadow: inset 0 0 1px rgba(73,170,185,0.6); } .lol-perks-progress-bar[style-name=inspiration] .pulsating { background-image: repeating-linear-gradient(0deg, rgba(73,170,185,0), #49aab9 calc(var(--pattern-height) * 0.5), rgba(73,170,185,0) var(--pattern-height)); } .lol-perks-progress-bar[style-name=inspiration] .progress-glow { mix-blend-mode: color-dodge; -webkit-filter: drop-shadow(0 0 5px #49aab9) drop-shadow(0 0 5px #49aab9); } .lol-perks-progress-bar[style-name=inspiration] .brightness { -webkit-filter: drop-shadow(0 0 5px #49aab9) drop-shadow(0 0 5px #49aab9) brightness(2); } .lol-perks-progress-bar[style-name=precision] { --color-light: #aea789; --color-dark: #c8aa6e; } .lol-perks-progress-bar[style-name=precision] .fill { background: rgba(200,170,110,0.2); box-shadow: inset 0 0 1px rgba(174,167,137,0.3); } .lol-perks-progress-bar[style-name=precision] .progress { background: rgba(200,170,110,0.4); box-shadow: inset 0 0 1px rgba(174,167,137,0.6); } .lol-perks-progress-bar[style-name=precision] .pulsating { background-image: repeating-linear-gradient(0deg, rgba(174,167,137,0), #aea789 calc(var(--pattern-height) * 0.5), rgba(174,167,137,0) var(--pattern-height)); } .lol-perks-progress-bar[style-name=precision] .progress-glow { mix-blend-mode: hard-light; -webkit-filter: drop-shadow(0 0 5px #aea789) drop-shadow(0 0 5px #aea789); } .lol-perks-progress-bar[style-name=precision] .brightness { -webkit-filter: drop-shadow(0 0 5px #aea789) drop-shadow(0 0 5px #aea789) brightness(2); } .lol-perks-progress-bar[style-name=resolve] { --color-light: #a1d586; --color-dark: #a4d08d; } .lol-perks-progress-bar[style-name=resolve] .fill { background: rgba(164,208,141,0.2); box-shadow: inset 0 0 1px rgba(161,213,134,0.3); } .lol-perks-progress-bar[style-name=resolve] .progress { background: rgba(164,208,141,0.4); box-shadow: inset 0 0 1px rgba(161,213,134,0.6); } .lol-perks-progress-bar[style-name=resolve] .pulsating { background-image: repeating-linear-gradient(0deg, rgba(161,213,134,0), #a1d586 calc(var(--pattern-height) * 0.5), rgba(161,213,134,0) var(--pattern-height)); } .lol-perks-progress-bar[style-name=resolve] .progress-glow { mix-blend-mode: color-dodge; -webkit-filter: drop-shadow(0 0 5px #a1d586) drop-shadow(0 0 5px #a1d586); } .lol-perks-progress-bar[style-name=resolve] .brightness { -webkit-filter: drop-shadow(0 0 5px #a1d586) drop-shadow(0 0 5px #a1d586) brightness(2); } .lol-perks-progress-bar[style-name=sorcery] { --color-light: #9faafc; --color-dark: #6c75f5; } .lol-perks-progress-bar[style-name=sorcery] .fill { background: rgba(108,117,245,0.2); box-shadow: inset 0 0 1px rgba(159,170,252,0.3); } .lol-perks-progress-bar[style-name=sorcery] .progress { background: rgba(108,117,245,0.4); box-shadow: inset 0 0 1px rgba(159,170,252,0.6); } .lol-perks-progress-bar[style-name=sorcery] .pulsating { background-image: repeating-linear-gradient(0deg, rgba(159,170,252,0), #9faafc calc(var(--pattern-height) * 0.5), rgba(159,170,252,0) var(--pattern-height)); } .lol-perks-progress-bar[style-name=sorcery] .progress-glow { mix-blend-mode: color-dodge; -webkit-filter: drop-shadow(0 0 5px #9faafc) drop-shadow(0 0 5px #9faafc); } .lol-perks-progress-bar[style-name=sorcery] .brightness { -webkit-filter: drop-shadow(0 0 5px #9faafc) drop-shadow(0 0 5px #9faafc) brightness(2); } .lol-perks-progress-bar[style-name=stat-shard] { --color-light: #cebe83; --color-dark: #dbb062; } .lol-perks-progress-bar[style-name=stat-shard] .fill { background: rgba(219,176,98,0.2); box-shadow: inset 0 0 1px rgba(206,190,131,0.3); } .lol-perks-progress-bar[style-name=stat-shard] .progress { background: rgba(219,176,98,0.4); box-shadow: inset 0 0 1px rgba(206,190,131,0.6); } .lol-perks-progress-bar[style-name=stat-shard] .pulsating { background-image: repeating-linear-gradient(0deg, rgba(206,190,131,0), #cebe83 calc(var(--pattern-height) * 0.5), rgba(206,190,131,0) var(--pattern-height)); } .lol-perks-progress-bar[style-name=stat-shard] .progress-glow { mix-blend-mode: color-dodge; -webkit-filter: drop-shadow(0 0 5px #cebe83) drop-shadow(0 0 5px #cebe83); } .lol-perks-progress-bar[style-name=stat-shard] .brightness { -webkit-filter: drop-shadow(0 0 5px #cebe83) drop-shadow(0 0 5px #cebe83) brightness(2); } .lol-perks-progress-bar[hide-ring] lol-perks-gradient-ring { display: none; } .lol-perks-progress-bar[hide-ring] .border:before, .lol-perks-progress-bar[hide-ring] .border:after { display: none; } .lol-perks-progress-bar lol-perks-gradient-ring { --gradient: linear-gradient(to bottom, transparent 85%, var(--color-dark) 100%); height: 84px; left: calc(50% - 42px); position: absolute; top: -84px; width: 84px; } .lol-perks-progress-bar .border { border: 2px solid rgba(0,3,3,0.4); border-top-color: transparent !important; margin: calc(-2px - 2px + var(--y-offset)) 0 0 -6px; padding: 2px; position: relative; transition: border-color 0.2s; } .lol-perks-progress-bar .border:lang(ar-ae) { margin: calc(-2px - 2px + var(--y-offset)) -6px 0 0; } .lol-perks-progress-bar .border:after, .lol-perks-progress-bar .border:before { border: solid transparent; border-top-color: var(--color-light); border-width: 4px 2px; content: ''; position: absolute; top: -2px; } .lol-perks-progress-bar .border:after { border-left-color: var(--color-light); left: 50%; transform: skew(0deg, -30deg); } .lol-perks-progress-bar .border:before { border-right-color: var(--color-light); right: 50%; transform: skew(0deg, 30deg); z-index: 1; } .lol-perks-progress-bar .fill { position: relative; transition: -webkit-filter 0.2s; width: 4px; } .lol-perks-progress-bar .fill.shoot .progress-glow { transition-delay: 1s; opacity: 0.3; } .lol-perks-progress-bar .fill.shoot .comet-mover { transform: translateY(calc(100% + 200px)); transition: transform 0.5s ease-in; } .lol-perks-progress-bar .fill.shoot .brightness { animation-duration: 1s; animation-name: fill-brightness; animation-timing-function: linear; } .lol-perks-progress-bar .brightness { background: var(--color-light); height: 100%; opacity: 0; position: absolute; top: 0; width: 100%; } .lol-perks-progress-bar .progress { width: 4px; overflow: hidden; position: relative; transition: height 0.2s; } .lol-perks-progress-bar .pulsating { animation-duration: 0.7s; animation-iteration-count: infinite; animation-name: pulsating-flow; animation-timing-function: linear; background-size: 100% var(--pattern-height); } .lol-perks-progress-bar .progress-glow { position: relative; transition: opacity 0.2s; } .lol-perks-progress-bar .comet-mask { height: 100%; left: 50%; overflow: hidden; position: absolute; top: 0; transform: translateX(-50%); width: 60px; } .lol-perks-progress-bar .comet-mover { height: 100%; } .lol-perks-progress-bar .comet { background: linear-gradient(to bottom, transparent 0%, white calc(100% - 8px * 0.5)); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: calc(100% - 200px * 0.5); border-top-right-radius: calc(100% - 200px * 0.5); left: calc(50% - 8px * 0.5); height: 200px; position: absolute; top: -200px; width: 8px; -webkit-filter: blur(1px); } @-moz-keyframes fill-brightness { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @-webkit-keyframes fill-brightness { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @-o-keyframes fill-brightness { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @keyframes fill-brightness { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @-moz-keyframes pulsating-flow { 0% { transform: translateY(calc(-1 * var(--pattern-height))); } 100% { transform: translateY(0); } } @-webkit-keyframes pulsating-flow { 0% { transform: translateY(calc(-1 * var(--pattern-height))); } 100% { transform: translateY(0); } } @-o-keyframes pulsating-flow { 0% { transform: translateY(calc(-1 * var(--pattern-height))); } 100% { transform: translateY(0); } } @keyframes pulsating-flow { 0% { transform: translateY(calc(-1 * var(--pattern-height))); } 100% { transform: translateY(0); } } .lol-perks-drawer { --flourish-color: #614a25; --flourish-width: 100%; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .lol-perks-drawer[hide-top] .flourish.top { display: none; } .lol-perks-drawer[hide-bottom] .flourish.bottom { display: none; } .lol-perks-drawer .radial-mask { height: 100%; position: absolute; width: 100%; -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, #000 10%, #000 90%, rgba(0,0,0,0) 100%); } .lol-perks-drawer .radial { background: radial-gradient(ellipse closest-side at center, #ffdc7c 0%, rgba(255,220,124,0) 100%); height: 100%; transform: translateX(100%); position: absolute; width: 100%; } .lol-perks-drawer .row { align-items: center; display: flex; height: 100%; justify-content: space-around; } .lol-perks-drawer .row * { opacity: 0; transform: translateX(-10px); transition: opacity 200ms ease-out, transform 200ms ease-out; } .lol-perks-drawer .row.open-transition > * { opacity: 1; transform: translateX(0); } .lol-perks-drawer .row.open-transition > *:nth-last-child(2) { transition-delay: 40ms; } .lol-perks-drawer .row.open-transition > *:nth-last-child(3) { transition-delay: 80ms; } .lol-perks-drawer .row.open-transition > *:nth-last-child(4) { transition-delay: 120ms; } .lol-perks-drawer .row.open-transition > *:nth-last-child(5) { transition-delay: 160ms; } .lol-perks-drawer .row.open-transition > *:nth-last-child(6) { transition-delay: 200ms; } .lol-perks-drawer .flourish { box-sizing: border-box; left: 0; position: absolute; width: var(--flourish-width); animation: fadeIn ease 1.5s; } .lol-perks-drawer .flourish.top { top: 0; } .lol-perks-drawer .flourish.bottom { top: 100%; } .lol-perks-drawer .flourish-line { border-top: thin solid; border-color: var(--flourish-color); box-sizing: border-box; margin: 0 3px; } .lol-perks-drawer .flourish-line:before, .lol-perks-drawer .flourish-line:after { border: 1px solid; border-color: var(--flourish-color); box-sizing: border-box; content: ''; height: 5px; position: absolute; top: 0; transform: translate(-50%, calc(-50% + 0.5px)) rotate(45deg); width: 5px; } .lol-perks-drawer .flourish-line:before { left: 0; } .lol-perks-drawer .flourish-line:after { left: 100%; } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .lol-perks-construct-minspec-component { height: 720px; overflow: hidden; position: absolute; width: 1280px; } .lol-perks-construct-minspec-component[primary='8400'] #keystone_fg1, .lol-perks-construct-minspec-component[primary='8400'] #keystone_fg2 { background-size: 100%; } .lol-perks-construct-minspec-component div { backface-visibility: hidden; transform-style: preserve-3d; } .lol-perks-construct-minspec-component #construct, .lol-perks-construct-minspec-component #splash { height: 720px; left: 462px; position: absolute; top: 0; width: 700px; } .lol-perks-construct-minspec-component #keystone { height: 670px; left: 512px; position: absolute; top: 25px; width: 600px; } .lol-perks-construct-minspec-component .aux { display: none; height: 0; left: 0; position: absolute; top: 0; width: 0; } .ember-application-factory.rcp-fe-lol-perks-addon.ember-application { height: 635px; width: 1055px; } /** * Generic styles * * - makes it easy to add classes during development through the Elements inspector * - makes it easier to read a template file and understand how the elements * are alid out without having to go and read each individual CSS class * - it reduces the need to create artificial, highly specific and long class names, ex: * .section_title, * .section_title_wrapper, * .section_tittle_wrapper_gutter * * .results_list * .results_list_item_wrapper * .results_list_item_content * */ .PerksPanel a { text-decoration: none; } .quest-forms .quest-form-tier { font-family: var(--font-display); } .quest-forms .quest-form-tier { -webkit-user-select: none; } .quest-forms .quest-form-tier { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .quest-forms .quest-form-tier { text-transform: uppercase; } .quest-forms .quest-form-tier:lang(ko-kr), .quest-forms .quest-form-tier:lang(ja-jp), .quest-forms .quest-form-tier:lang(tr-tr), .quest-forms .quest-form-tier:lang(el-gr), .quest-forms .quest-form-tier:lang(th-th), .quest-forms .quest-form-tier:lang(zh-tw) { text-transform: none; } .quest-forms .quest-form-tier { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .quest-forms .quest-form-tier:lang(ja-jp) { font-size: 13px; } .quest-forms .quest-form-tier:lang(ar-ae) { letter-spacing: 0; } .quest-forms { display: flex; flex-direction: column; } .quest-forms .quest-form-tier { color: #3c3c41; margin: 0 16px; padding: 7px 0; display: flex; flex-direction: row; justify-content: space-between; height: 24px; line-height: 24px; align-items: center; min-width: 238px; } .quest-forms .quest-form-tier:not(:last-child) { border-bottom: 1px solid #1e2328; box-sizing: content-box; } .quest-forms .quest-form-tier.unlocked { cursor: pointer; } .quest-forms .quest-form-tier.selected { color: #c89b3c; } .quest-forms .quest-form-tier.selected:before { content: ''; width: 2px; height: 24px; position: absolute; left: 3px; background-color: #c89b3c; } .quest-forms .quest-form-tier:hover { color: #f0e6d2; } .quest-forms .quest-form-tier:hover:before { content: ''; width: 4px; height: 24px; position: absolute; left: 3px; background-color: #f0e6d2; } .quest-forms .quest-form-tier .quest-form-tier-name { padding-right: 10px; } .quest-forms .quest-form-tier .quest-form-tier-lock { width: 8px; height: 13px; background-image: url("/fe/lol-static-assets/images/npe-rewards-lock-grey.png"); background-repeat: no-repeat; background-size: cover; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .skin-name, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features h4, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value { font-family: var(--font-display); } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .universe-text-wrapper .universe-text, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features ul li, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .label, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .indicator .label { font-family: var(--font-body); } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .skin-name, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .universe-text-wrapper .universe-text, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features h4, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features ul li, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .label, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .indicator .label { -webkit-user-select: none; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .skin-name, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .universe-text-wrapper .universe-text, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features h4, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features ul li, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .label, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .indicator .label { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .skin-name, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features h4, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value { text-transform: uppercase; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .skin-name:lang(ko-kr), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features h4:lang(ko-kr), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value:lang(ko-kr), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .skin-name:lang(ja-jp), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features h4:lang(ja-jp), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value:lang(ja-jp), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .skin-name:lang(tr-tr), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features h4:lang(tr-tr), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value:lang(tr-tr), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .skin-name:lang(el-gr), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features h4:lang(el-gr), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value:lang(el-gr), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .skin-name:lang(th-th), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features h4:lang(th-th), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value:lang(th-th), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .skin-name:lang(zh-tw), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features h4:lang(zh-tw), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value:lang(zh-tw) { text-transform: none; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value { text-transform: none; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .skin-name { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .skin-name:lang(ar-ae) { letter-spacing: 0; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features h4 { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features h4:lang(ar-ae) { letter-spacing: 0; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value:lang(ar-ae) { letter-spacing: 0; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value { letter-spacing: 0.0375em; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value:lang(ar-ae) { letter-spacing: 0; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .universe-text-wrapper .universe-text, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features ul li { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .universe-text-wrapper .universe-text:lang(ja-jp), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features ul li:lang(ja-jp) { font-size: 13px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .universe-text-wrapper .universe-text:lang(ar-ae), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features ul li:lang(ar-ae) { letter-spacing: 0; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .label, .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .indicator .label { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .label:lang(ja-jp), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .indicator .label:lang(ja-jp) { font-size: 13px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .label:lang(ar-ae), .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .indicator .label:lang(ar-ae) { letter-spacing: 0; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value { color: #f0e6d2; } .showcase-view-root-component { width: 1055px; height: 639px; overflow: hidden; position: relative; } .showcase-view-root-component .uikit-background-switcher { --background-switcher-img-height: 100%; } .showcase-view-root-component .background-shader { position: absolute; background-image: url("/fe/lol-collections/images/skins-viewer/showcase/screen-shader.png"); background-size: cover; background-repeat: no-repeat; height: 100%; width: 100%; } .showcase-view-root-component .description-background-shader { background-image: url("/fe/lol-collections/images/skins-viewer/showcase/description-screen-shader.png"); background-repeat: repeat-y; width: 100%; } .showcase-view-root-component .description-background-shader.hidden { display: none; } .showcase-view-root-component .emblem-overlay { display: flex; position: absolute; justify-content: center; align-items: flex-start; width: 100%; bottom: 140px; } .showcase-view-root-component .emblem-overlay img { width: 160px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part { position: absolute; top: 0; height: calc(100% - 104px); width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title { display: flex; align-items: center; margin-left: 35px; margin-top: 15px; padding-bottom: 15px; padding-right: 15px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .tier-icon { height: 24px; width: 24px; margin-right: 10px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .tier-icon img { max-height: 100%; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-title .skin-name { display: inline-block; direction: ltr; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info { display: flex; justify-content: space-between; flex-direction: column; flex-grow: 1; width: 100%; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details { max-width: 308px; flex-grow: 1; margin-left: 35px; display: flex; flex-direction: column; justify-content: flex-start; border-top: thin solid rgba(155,125,35,0.5); } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .universe-text-wrapper { margin-top: 22px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .universe-text-wrapper .universe-text { color: #a09b8c; line-height: 20px; margin-top: 0; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features { flex-basis: 50%; flex-grow: 1; margin-top: 22px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features h4 { margin: 0 0 12px 0; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features ul { padding-left: 13px; margin: 0; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .theme-features ul li { color: #a09b8c; line-height: 20px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .scroll-text { max-height: 390px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details.split-layout .scroll-text { max-height: 160px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-details .hidden { display: none; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom { width: 100%; height: 20px; margin-bottom: 10px; display: flex; justify-content: space-between; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data.hidden { visibility: hidden; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date { display: flex; align-items: baseline; margin-left: 30px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .label { font-size: 11px; margin-right: 5px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .unlock-data .acquire-date .value { word-break: break-all; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .indicator { display: flex; margin-right: 30px; align-items: center; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .indicator .icon { width: 20px; height: 20px; margin-right: 5px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .indicator .label { font-size: 11px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .indicator.hidden { display: none; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .indicator.legacy { background-image: url("/fe/lol-collections/images/skins-viewer/icon-legacy.png"); background-size: contain; background-repeat: no-repeat; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .top-part .skin-info .skin-info-bottom .indicator.limited { background-image: url("/fe/lol-collections/images/skins-viewer/icon-limited.png"); background-size: contain; background-repeat: no-repeat; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part { position: absolute; height: 104px; width: 100%; bottom: 0; border-top: thin solid #785a28; display: flex; justify-content: space-between; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .owned-button { position: absolute; bottom: 45px; left: 30px; min-width: 135px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .unlock-button { position: absolute; bottom: 33px; left: 35px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .unlock-button lol-uikit-flat-button { position: absolute; bottom: 12px; left: -5px; width: 135px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .unlock-button .disable-message { position: absolute; bottom: -25px; left: -5px; width: 135px; text-align: center; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .unlock-button.hidden { display: none; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .carousel { display: flex; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .related { display: flex; justify-content: flex-end; position: absolute; right: 27px; bottom: 45px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .related .hidden { display: none; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .related .icon { width: 28px; height: 28px; cursor: pointer; margin-left: 20px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .related .chroma { background: url("/fe/lol-static-assets/images/skin-viewer/icon-chroma-default.png") 0 0 no-repeat; background-size: contain; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .related .chroma:hover { background-image: url("/fe/lol-static-assets/images/skin-viewer/icon-chroma-hover.png"); } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .related .quest-forms { background: url("/fe/lol-static-assets/images/skin-viewer/icon-three-masks-default.png") 0 0 no-repeat; background-size: contain; width: 40px; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .related .quest-forms:hover { background-image: url("/fe/lol-static-assets/images/skin-viewer/icon-three-masks-hover.png"); } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .related .skinline { background: url("/fe/lol-static-assets/images/skin-viewer/icon-themes-default.png") 0 0 no-repeat; background-size: contain; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .related .skinline:hover { background-image: url("/fe/lol-static-assets/images/skin-viewer/icon-themes-hover.png"); } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .related .toggle-ui { background: url("/fe/lol-collections/images/skins-viewer/showcase/magnifier.png") 0 0 no-repeat; background-size: contain; } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .related .toggle-ui:hover { background-image: url("/fe/lol-collections/images/skins-viewer/showcase/magnifier-hover.png"); } .showcase-view-root-component .showcase-hidden-input { position: absolute; top: 0; left: 0; opacity: 0; } .skin-purchase .purchase-button-disable-message { font-family: var(--font-body); } .skin-purchase .purchase-button-disable-message { -webkit-user-select: none; } .skin-purchase .purchase-button-disable-message { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .skin-purchase .purchase-button-disable-message { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .skin-purchase .purchase-button-disable-message:lang(ja-jp) { font-size: 13px; } .skin-purchase .purchase-button-disable-message:lang(ar-ae) { letter-spacing: 0; } .skin-purchase .purchase-button-wrapper { display: flex; justify-content: center; margin-bottom: 10px; } .skin-purchase .purchase-button-disable-message { max-width: 350px; color: #be1e37; } .skin-purchase .hidden { display: none; } .skin-carousel-component .gem-overlay { display: flex; justify-content: center; align-items: flex-end; pointer-events: none; position: absolute; bottom: 1px; } .skin-carousel-component .gem-overlay img { width: 100%; } .skin-carousel-component .skins-carousel { height: 77px; position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; } .skin-carousel-component .carousel-track-container { overflow: hidden; height: 91px; margin-top: 15px; padding-top: 14px; } .skin-carousel-component .carousel-track { display: flex; transform: translateX(-198px); transition: 0.7s cubic-bezier(0, 0, 0, 1); } .skin-carousel-component .thumbnail-wrapper { background: #3c3c41; margin: 8px 5px; position: relative; width: 87px; height: 49px; animation: thumbnail-wrapper-shrink-1 70ms cubic-bezier(1, 0, 1, 1), thumbnail-wrapper-shrink-2 400ms 70ms cubic-bezier(0, 0, 0, 1); } .skin-carousel-component .thumbnail-wrapper:hover { background: linear-gradient(to top, #c89b3c, #f0e6d2); } .skin-carousel-component .thumbnail-wrapper:hover .skin-thumbnail-img { -webkit-filter: grayscale(25%) brightness(125%); } .skin-carousel-component .thumbnail-wrapper.unowned:after { content: ''; background: url("/fe/lol-collections/images/skins-viewer/skin-carousel/skin-carousel-locked.png"); background-size: contain; width: 30px; height: 30px; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); pointer-events: none; -webkit-filter: grayscale(100%) brightness(50%); } .skin-carousel-component .thumbnail-wrapper.unowned:hover { background: #3c3c41; } .skin-carousel-component .thumbnail-wrapper.unowned:hover .skin-thumbnail-img { -webkit-filter: grayscale(25%) brightness(100%); } .skin-carousel-component .thumbnail-wrapper.unowned .skin-thumbnail-img { -webkit-filter: grayscale(50%) brightness(25%); margin: 2px; padding: 1px; } .skin-carousel-component .thumbnail-wrapper.purchase-available.unowned .skin-thumbnail-img { -webkit-filter: grayscale(50%); } .skin-carousel-component .thumbnail-wrapper.purchase-available.unowned:after { -webkit-filter: brightness(100%); } .skin-carousel-component .thumbnail-wrapper.purchase-available.unowned:hover:after { content: ''; background: url("/fe/lol-collections/images/skins-viewer/skin-carousel/skin-carousel-locked-hover.png"); background-size: contain; width: 30px; height: 30px; } .skin-carousel-component .thumbnail-wrapper.purchase-available.unowned:hover .skin-thumbnail-img { -webkit-filter: grayscale(25%) brightness(125%); } .skin-carousel-component .thumbnail-wrapper.active-skin { background: linear-gradient(to top, #c8aa6e 0%, #c89b3c 44%, #a07b32 59%, #785a28 100%); margin: 0 5px; width: 115px; height: 65px; animation: thumbnail-wrapper-expand-1 70ms cubic-bezier(1, 0, 1, 1), thumbnail-wrapper-expand-2 400ms 70ms cubic-bezier(0, 0, 0, 1); } .skin-carousel-component .thumbnail-wrapper.active-skin .skin-thumbnail-img { width: 109px; height: 59px; margin: 3px; padding: 0; } .skin-carousel-component .thumbnail-wrapper.active-skin:hover { background: linear-gradient(to top, #c89b3c, #f0e6d2); } .skin-carousel-component .thumbnail-wrapper.active-skin.unowned:after { width: 80px; height: 80px; top: -7px; } .skin-carousel-component .thumbnail-wrapper.active-skin.unowned:hover:after { width: 80px; height: 80px; top: -7px; } .skin-carousel-component .thumbnail-wrapper .skin-thumbnail-img { width: 81px; height: 43px; min-width: 81px; min-height: 43px; background-position: 50% 40%; background-size: cover; margin: 3px; outline: 1px solid #000; outline-offset: -1px; cursor: pointer; background-color: #010a13; } .skin-carousel-component .no-transition { transition: none !important; } .skin-carousel-component .next-button, .skin-carousel-component .prev-button { height: 36px; margin: 0 5px; } @-moz-keyframes thumbnail-wrapper-expand-1 { 0% { transform: scale(0.75652); margin: 0 -9px; } 100% { transform: scale(0.97565); margin: 0 5px; } } @-webkit-keyframes thumbnail-wrapper-expand-1 { 0% { transform: scale(0.75652); margin: 0 -9px; } 100% { transform: scale(0.97565); margin: 0 5px; } } @-o-keyframes thumbnail-wrapper-expand-1 { 0% { transform: scale(0.75652); margin: 0 -9px; } 100% { transform: scale(0.97565); margin: 0 5px; } } @keyframes thumbnail-wrapper-expand-1 { 0% { transform: scale(0.75652); margin: 0 -9px; } 100% { transform: scale(0.97565); margin: 0 5px; } } @-moz-keyframes thumbnail-wrapper-expand-2 { 0% { transform: scale(0.97565); margin: 0 5px; } 100% { transform: scale(1); margin: 0 5px; } } @-webkit-keyframes thumbnail-wrapper-expand-2 { 0% { transform: scale(0.97565); margin: 0 5px; } 100% { transform: scale(1); margin: 0 5px; } } @-o-keyframes thumbnail-wrapper-expand-2 { 0% { transform: scale(0.97565); margin: 0 5px; } 100% { transform: scale(1); margin: 0 5px; } } @keyframes thumbnail-wrapper-expand-2 { 0% { transform: scale(0.97565); margin: 0 5px; } 100% { transform: scale(1); margin: 0 5px; } } @-moz-keyframes thumbnail-wrapper-shrink-1 { 0% { transform: scale(1.32184); margin: 8px 19px; } 100% { transform: scale(1.03218); margin: 8px 5px; } } @-webkit-keyframes thumbnail-wrapper-shrink-1 { 0% { transform: scale(1.32184); margin: 8px 19px; } 100% { transform: scale(1.03218); margin: 8px 5px; } } @-o-keyframes thumbnail-wrapper-shrink-1 { 0% { transform: scale(1.32184); margin: 8px 19px; } 100% { transform: scale(1.03218); margin: 8px 5px; } } @keyframes thumbnail-wrapper-shrink-1 { 0% { transform: scale(1.32184); margin: 8px 19px; } 100% { transform: scale(1.03218); margin: 8px 5px; } } @-moz-keyframes thumbnail-wrapper-shrink-2 { 0% { transform: scale(1.03218); margin: 8px 5px; } 100% { transform: scale(1); margin: 8px 5px; } } @-webkit-keyframes thumbnail-wrapper-shrink-2 { 0% { transform: scale(1.03218); margin: 8px 5px; } 100% { transform: scale(1); margin: 8px 5px; } } @-o-keyframes thumbnail-wrapper-shrink-2 { 0% { transform: scale(1.03218); margin: 8px 5px; } 100% { transform: scale(1); margin: 8px 5px; } } @keyframes thumbnail-wrapper-shrink-2 { 0% { transform: scale(1.03218); margin: 8px 5px; } 100% { transform: scale(1); margin: 8px 5px; } } .skin-line-flyout .skinline-head .skinline-name { font-family: var(--font-display); } .skin-line-flyout .skinline-head .skinline-name { font-family: var(--font-display); } .skin-line-flyout .skinline-head .skinline-name { -webkit-user-select: none; } .skin-line-flyout .skinline-head .skinline-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .skin-line-flyout .skinline-head .skinline-name { text-transform: uppercase; } .skin-line-flyout .skinline-head .skinline-name:lang(ko-kr), .skin-line-flyout .skinline-head .skinline-name:lang(ja-jp), .skin-line-flyout .skinline-head .skinline-name:lang(tr-tr), .skin-line-flyout .skinline-head .skinline-name:lang(el-gr), .skin-line-flyout .skinline-head .skinline-name:lang(th-th), .skin-line-flyout .skinline-head .skinline-name:lang(zh-tw) { text-transform: none; } .skin-line-flyout .skinline-head .skinline-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .skin-line-flyout .skinline-head .skinline-name:lang(ar-ae) { letter-spacing: 0; } .skin-line-flyout .flyout .skinline-skin .skin-image-wrapper { display: inline-block; border: thin solid #3c3c41; border-image-slice: 1; border-image-repeat: stretch; box-shadow: 0 0 0 1px rgba(1,10,19,0.85); -webkit-filter: none; box-sizing: border-box; position: relative; overflow: hidden; } .skin-line-flyout .flyout .skinline-skin .skin-image-wrapper::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: 0 0 0 1px rgba(1,10,19,0.8) inset; } .skin-line-flyout .flyout .skinline-skin .skin-image-wrapper:not([disabled]):hover { border-image-source: linear-gradient(to bottom, #f0e6d2 4%, #c89b3c 100%); } .skin-line-flyout .flyout .skinline-skin .skin-image-wrapper:not([disabled]):hover > * { -webkit-filter: brightness(1.25); } .skin-line-flyout .flyout .skinline-skin .skin-image-wrapper:not([disabled]):active { border-image-source: linear-gradient(to bottom, #463714 0%, #695625 100%); } .skin-line-flyout .flyout .skinline-skin .skin-image-wrapper[disabled] > * { -webkit-filter: grayscale(1); } .skin-line-flyout .skinline-head .skinline-name { font-family: var(--font-display); } .skin-line-flyout .skinline-head .skinline-name { -webkit-user-select: none; } .skin-line-flyout .skinline-head .skinline-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .skin-line-flyout .skinline-head .skinline-name { text-transform: uppercase; } .skin-line-flyout .skinline-head .skinline-name:lang(ko-kr), .skin-line-flyout .skinline-head .skinline-name:lang(ja-jp), .skin-line-flyout .skinline-head .skinline-name:lang(tr-tr), .skin-line-flyout .skinline-head .skinline-name:lang(el-gr), .skin-line-flyout .skinline-head .skinline-name:lang(th-th), .skin-line-flyout .skinline-head .skinline-name:lang(zh-tw) { text-transform: none; } .skin-line-flyout .skinline-head .skinline-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .skin-line-flyout .skinline-head .skinline-name:lang(ar-ae) { letter-spacing: 0; } .skin-line-flyout .skinline-head { height: 30px; width: 100%; border-bottom: solid 1px #463714; display: flex; justify-content: center; align-items: center; } .skin-line-flyout .flyout { max-width: 343px; max-height: 290px; padding-top: 20px; padding-right: 9px; display: flex; flex-wrap: wrap; justify-content: flex-start; } .skin-line-flyout .flyout .skinline-skin { position: relative; display: inline-block; margin-left: 20px; margin-bottom: 20px; cursor: pointer; } .skin-line-flyout .flyout .skinline-skin .skin-image-wrapper { width: 63px; height: 63px; } .skin-line-flyout .flyout .skinline-skin .skin-image-wrapper .skin-image { max-width: 100%; } .skin-line-flyout .flyout .skinline-skin .skin-image-wrapper.disabled .skin-image { -webkit-filter: brightness(0.3); } .skin-line-flyout .flyout .skinline-skin .skin-image-wrapper.disabled:hover .skin-image { -webkit-filter: brightness(1); } .skin-line-flyout .flyout .skinline-skin .locked { width: 20px; height: 20px; position: absolute; bottom: -6px; left: 50%; margin-left: -10px; background-image: url("/fe/lol-collections/images/skins-viewer/purchase/icon-lock-large.png"); background-size: contain; } .skin-line-flyout .flyout .skinline-skin .locked.hidden { display: none; } .chroma-flyout .chroma-head .chroma-label { font-family: var(--font-display); } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-label-wrapper .chroma-bundle-label { font-family: var(--font-body); } .chroma-flyout .chroma-head .chroma-label, .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-label-wrapper .chroma-bundle-label { -webkit-user-select: none; } .chroma-flyout .chroma-head .chroma-label, .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-label-wrapper .chroma-bundle-label { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .chroma-flyout .chroma-head .chroma-label { text-transform: uppercase; } .chroma-flyout .chroma-head .chroma-label:lang(ko-kr), .chroma-flyout .chroma-head .chroma-label:lang(ja-jp), .chroma-flyout .chroma-head .chroma-label:lang(tr-tr), .chroma-flyout .chroma-head .chroma-label:lang(el-gr), .chroma-flyout .chroma-head .chroma-label:lang(th-th), .chroma-flyout .chroma-head .chroma-label:lang(zh-tw) { text-transform: none; } .chroma-flyout .chroma-head .chroma-label { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .chroma-flyout .chroma-head .chroma-label:lang(ar-ae) { letter-spacing: 0; } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-label-wrapper .chroma-bundle-label { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-label-wrapper .chroma-bundle-label:lang(ar-ae) { letter-spacing: 0; } .chroma-flyout .chroma-head .chroma-label { font-family: var(--font-display); } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-label-wrapper .chroma-bundle-label { font-family: var(--font-body); } .chroma-flyout .chroma-head .chroma-label { font-family: var(--font-display); } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-label-wrapper .chroma-bundle-label { font-family: var(--font-body); } .chroma-flyout .chroma-head .chroma-label, .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-label-wrapper .chroma-bundle-label { -webkit-user-select: none; } .chroma-flyout .chroma-head .chroma-label, .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-label-wrapper .chroma-bundle-label { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .chroma-flyout .chroma-head .chroma-label { text-transform: uppercase; } .chroma-flyout .chroma-head .chroma-label:lang(ko-kr), .chroma-flyout .chroma-head .chroma-label:lang(ja-jp), .chroma-flyout .chroma-head .chroma-label:lang(tr-tr), .chroma-flyout .chroma-head .chroma-label:lang(el-gr), .chroma-flyout .chroma-head .chroma-label:lang(th-th), .chroma-flyout .chroma-head .chroma-label:lang(zh-tw) { text-transform: none; } .chroma-flyout .chroma-head .chroma-label { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .chroma-flyout .chroma-head .chroma-label:lang(ar-ae) { letter-spacing: 0; } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-label-wrapper .chroma-bundle-label { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-label-wrapper .chroma-bundle-label:lang(ar-ae) { letter-spacing: 0; } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-image-wrapper, .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block .chroma-popup-image { display: inline-block; border: thin solid #3c3c41; border-image-slice: 1; border-image-repeat: stretch; box-shadow: 0 0 0 1px rgba(1,10,19,0.85); -webkit-filter: none; box-sizing: border-box; position: relative; overflow: hidden; } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-image-wrapper::after, .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block .chroma-popup-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: 0 0 0 1px rgba(1,10,19,0.8) inset; } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-image-wrapper:not([disabled]):hover, .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block .chroma-popup-image:not([disabled]):hover { border-image-source: linear-gradient(to bottom, #f0e6d2 4%, #c89b3c 100%); } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-image-wrapper:not([disabled]):hover > *, .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block .chroma-popup-image:not([disabled]):hover > * { -webkit-filter: brightness(1.25); } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-image-wrapper:not([disabled]):active, .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block .chroma-popup-image:not([disabled]):active { border-image-source: linear-gradient(to bottom, #463714 0%, #695625 100%); } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-image-wrapper[disabled] > *, .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block .chroma-popup-image[disabled] > * { -webkit-filter: grayscale(1); } .chroma-flyout { direction: ltr; max-height: 350px; max-width: 610px; } .chroma-flyout .chroma-head { height: 30px; width: 100%; border-bottom: solid 1px #463714; display: flex; justify-content: center; align-items: center; } .chroma-flyout .chroma-popup-content { width: 100%; display: flex; padding-top: 14px; max-height: 300px; } .chroma-flyout .chroma-popup-content .chroma-bundle-block { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 0 0 18px ; max-width: 125px; } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-image-wrapper { display: flex; justify-content: center; align-items: center; width: 106px; height: 106px; } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-image-wrapper .chroma-popup-bundle-image { width: 80px; height: 80px; border-radius: 50%; background-size: contain; } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-image-wrapper:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/fe/lol-collections/images/skins-viewer/chroma-bundle.png") 0 0 no-repeat; background-size: 115%; background-position-y: 7px; background-position-x: -9px; } .chroma-flyout .chroma-popup-content .chroma-bundle-block .chroma-bundle-label-wrapper { display: flex; justify-content: center; align-content: flex-start; width: 100%; margin-top: 10px; margin-bottom: 6px; } .chroma-flyout .chroma-popup-content .chroma-details-block { display: flex; flex-wrap: wrap; justify-content: flex-start; max-height: 300px; max-width: 455px; margin-left: 18px; padding-right: 13px; } .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block { position: relative; z-index: 0; display: inline-block; height: 106px; width: 106px; margin: 0 5px 18px 0 ; } .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block:before { position: absolute; width: 100%; height: 100%; content: ''; background: url("/fe/lol-collections/images/skins-viewer/chroma-popup/bg-chroma-card.jpg") 0 0 no-repeat; background-size: contain; } .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block .chroma-popup-image { width: 106px; height: 106px; background-size: contain; background-repeat: no-repeat; background-position: 50%; overflow: visible; display: flex; justify-content: center; align-items: center; } .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block .chroma-popup-image .chroma-img { max-width: 100%; max-height: 100%; } .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block .skin-lock-icon-hidden { display: none; } .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block .skin-lock-icon { position: absolute; z-index: 1; left: 50%; margin-left: -12.5px; bottom: -12.5px; display: inline-block; width: 25px; height: 25px; background: url("/fe/lol-collections/images/skins-viewer/purchase/icon-lock-large.png") 0 0 no-repeat; background-size: contain; } .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block.disabled:before { -webkit-filter: brightness(0.8); } .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block.disabled .chroma-popup-image .chroma-img { -webkit-filter: brightness(0.6); } .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block.disabled:hover:before { -webkit-filter: brightness(1); } .chroma-flyout .chroma-popup-content .chroma-details-block .chroma-block.disabled:hover .chroma-popup-image .chroma-img { -webkit-filter: brightness(1); } .chroma-flyout .chroma-popup-content .purchasable { cursor: pointer; }