.lol-tooltip-component { display: none; } .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, .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, .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, .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, .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, .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), .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), .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), .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), .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), .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), .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 { 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) { 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) { 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, .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), .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), .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%; } .collections-application .champions-route .no-matching-champions.shown { display: flex; } .collections-application .champions-route .no-matching-champions.hidden { display: none; } .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%; } .collections-application .chromas-route .no-matching-chromas.shown { display: flex; } .collections-application .chromas-route .no-matching-chromas.hidden { display: none; } .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%; } .collections-application .skins-route .no-matching-skins.shown { display: flex; } .collections-application .skins-route .no-matching-skins.hidden { display: none; } .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%; } .collections-application .summoner-icons-route .no-matching-summoner-icons.shown { display: flex; } .collections-application .summoner-icons-route .no-matching-summoner-icons.hidden { display: none; } .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%; } .collections-application .wards-route .no-matching-wards.shown { display: flex; } .collections-application .wards-route .no-matching-wards.hidden { display: none; } .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: 2px; width: 170px; } .rcp-fe-lol-collections-chroma-item .gem-wrapper .gem.rare { width: 22px; height: 22px; } .rcp-fe-lol-collections-chroma-item .gem-wrapper .gem.epic { width: 29px; height: 23px; } .rcp-fe-lol-collections-chroma-item .gem-wrapper .gem.legendary { width: 29px; height: 29px; } .rcp-fe-lol-collections-chroma-item .gem-wrapper .gem.mythic { width: 26px; height: 26px; } .rcp-fe-lol-collections-chroma-item .gem-wrapper .gem.ultimate { width: 26px; height: 26px; } .rcp-fe-lol-collections-chroma-item .linger-video-wrapper { top: -20px; left: -21px; } .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; } .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; } .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 { width: 40px; height: 40px; background-image: url("/fe/lol-collections/images/spells/spinner.png"); background-size: 40px; animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; margin: auto 508px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .summoner-spells-root-component .loading-fade-in { -webkit-animation: fade-in 0.5s forwards; } .summoner-spells-root-component .loading-fade-out { -webkit-animation: spin 4000ms infinite linear, fade-out 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: 440px; 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; } .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; } @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } .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; } .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-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: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; bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .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-add-page-button-border, .inventory-mass-delete-button-border { --border-width: 2px; bottom: -7px; left: -20px; position: absolute; right: -20px; top: -7px; } .inventory-mass-delete-button { display: block; margin: 0 0 0 10px; } .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; } .ember-application-factory.PerksPanel.ember-application, .ember-application-factory.PerksPanel.ember-application > .application_view, .ember-application-factory.PerksPanel.ember-application > .application_view > .fake_application_view { height: 100%; } /** * 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; } .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 lol-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-collections/images/skins-viewer/showcase/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-collections/images/skins-viewer/showcase/icon-chroma-hover.png"); } .showcase-view-root-component .section-controller .showcase-section .showcase-wrapper .bottom-part .related .skinline { background: url("/fe/lol-collections/images/skins-viewer/showcase/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-collections/images/skins-viewer/showcase/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% 18%; background-size: 250%; 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; }