.collections-viewport .perks-body-content { padding-top: 0px; padding-left: 0px; } .summoner-spells-root-component .collection-spell-name, .summoner-spells-root-component .collection-spell-level { 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 .collection-spell-name, .summoner-spells-root-component .collection-spell-level { 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 .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 { -webkit-user-select: none; } .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 { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .summoner-spells-root-component .collection-spell-name, .summoner-spells-root-component .collection-spell-level { text-transform: uppercase; } .summoner-spells-root-component .collection-spell-name:lang(ko-kr), .summoner-spells-root-component .collection-spell-level:lang(ko-kr), .summoner-spells-root-component .collection-spell-name:lang(ja-jp), .summoner-spells-root-component .collection-spell-level:lang(ja-jp), .summoner-spells-root-component .collection-spell-name:lang(tr-tr), .summoner-spells-root-component .collection-spell-level:lang(tr-tr), .summoner-spells-root-component .collection-spell-name:lang(el-gr), .summoner-spells-root-component .collection-spell-level:lang(el-gr), .summoner-spells-root-component .collection-spell-name:lang(th-th), .summoner-spells-root-component .collection-spell-level:lang(th-th), .summoner-spells-root-component .collection-spell-name:lang(zh-tw), .summoner-spells-root-component .collection-spell-level:lang(zh-tw) { text-transform: none; } .summoner-spells-root-component .collection-spell-name { 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) { letter-spacing: 0; } .summoner-spells-root-component .collection-spell-level { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .summoner-spells-root-component .collection-spell-level:lang(ar-ae) { letter-spacing: 0; } .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; } .summoner-spells-root-component .collection-spell-gametypes:lang(ja-jp), .summoner-spells-root-component .collection-spell-desc:lang(ja-jp) { font-size: 13px; } .summoner-spells-root-component .collection-spell-gametypes:lang(ar-ae), .summoner-spells-root-component .collection-spell-desc:lang(ar-ae) { letter-spacing: 0; } .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; } .summoner-spells-root-component .collection-spell-icon-label:lang(ja-jp) { font-size: 13px; } .summoner-spells-root-component .collection-spell-icon-label:lang(ar-ae) { letter-spacing: 0; } .summoner-spells-root-component .loading-spinner { width: 40px; height: 40px; background-image: url(/fe/lol-collections/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/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; } .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/button-replay-normal.png), url(/fe/lol-collections/button-replay-hover.png), url(/fe/lol-collections/button-replay-click.png), url(/fe/lol-collections/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/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/button-replay-hover.png); } .summoner-spells-root-component .replay-button .replay-button-container .enabled.replay-button-img:active { background-image: url(/fe/lol-collections/button-replay-click.png); } .summoner-spells-root-component .replay-button .replay-button-container .disabled.replay-button-img { background-image: url(/fe/lol-collections/button-replay-disabled.png); cursor: default; } .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; } } .lol-tooltip-component { display: none; } .lol-tooltip-component { display: none; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm { text-transform: uppercase; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(ko-kr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(ja-jp), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(tr-tr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(el-gr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(th-th), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(zh-tw) { text-transform: none; } .decorated-footer { width: 100%; display: flex; flex-direction: row; justify-content: center; padding: 0 0 1px; height: 50px; box-sizing: border-box; } .decorated-footer .confirm-button-container { position: relative; display: flex; flex-direction: row; justify-content: center; padding-bottom: 15px; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm { display: flex; min-width: 160px; pointer-events: auto; } .decorated-footer .button-img { width: 30px; height: 30px; background-size: contain; background-color: transparent; border: 0px; outline: 0px; } .decorated-footer .button-img.close { background-image: url(/fe/lol-collections/button_close.png); } .decorated-footer .button-img.close:hover { background-image: url(/fe/lol-collections/button_close_hover.png); } .decorated-footer .button-img.close:active { background-image: url(/fe/lol-collections/button_close_click.png); } .decorated-footer .button-img.close:disabled { background-image: url(/fe/lol-collections/button_close_inactive.png); } .decorated-footer .decorated-footer-decoration { display: flex; position: relative; flex: 1 1 auto; height: 34px; margin-top: 15px; } .decorated-footer .decorated-footer-decoration.decorated-footer-left .button { position: absolute; top: -13px; right: 2px; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { font-family: var(--font-display); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { -webkit-user-select: none; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { text-transform: uppercase; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(ko-kr), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(ja-jp), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(tr-tr), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(el-gr), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(th-th), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(zh-tw) { text-transform: none; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { color: #c8aa6e; font-size: 14px; font-weight: 700; letter-spacing: 0.0325em; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(ar-ae) { letter-spacing: 0; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover { color: #f0e6d2; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:disabled, .arrow-footer[version="7.13"] .confirm-button-container button.confirm:disabled:hover, .arrow-footer[version="7.13"] .confirm-button-container button.confirm[disabled='true'], .arrow-footer[version="7.13"] .confirm-button-container button.confirm[disabled='true']:hover { color: #5c5b57; cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active { color: #785a28; } .arrow-footer[version="7.13"] { width: 100%; display: flex; flex-direction: row; justify-content: center; padding: 0 0 1px; height: 51px; box-sizing: border-box; } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm { margin-left: 0px; } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm .left-confirm { background-image: url(/fe/lol-collections/LeftStraightDefault.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm:hover .left-confirm { background-image: url(/fe/lol-collections/LeftStraightHover.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm:active .left-confirm { background-image: url(/fe/lol-collections/LeftStraightClick.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm.disabled .left-confirm { background-image: url(/fe/lol-collections/LeftStraightDisabled.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm.completed .left-confirm { background-image: url(/fe/lol-collections/LeftStraightCompleted.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.close { display: none; } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container .border-bg .left-border-bg { background-image: url(/fe/lol-collections/BGLeftStraight.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container .border-bg .middle-border-bg { margin: 0 7px; } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration { flex-direction: column; justify-content: center; } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration .arrow-footer-decoration-child { background-size: 100% 100%; width: 256px; height: 8px; } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration .arrow-footer-decoration-child.arrow-footer-decoration-left { margin-right: 50px; align-self: flex-end; background-image: url(/fe/lol-collections/FooterMetalDecorationLeft.png); } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration .arrow-footer-decoration-child.arrow-footer-decoration-right { margin-left: 50px; align-self: flex-start; background-image: url(/fe/lol-collections/FooterMetalDecorationRight.png); } .arrow-footer[version="7.13"] .confirm-button-container { position: relative; display: flex; flex-direction: row; justify-content: center; } .arrow-footer[version="7.13"] .confirm-button-container .border-bg { position: absolute; width: 100%; height: 44px; display: flex; top: -5px; } .arrow-footer[version="7.13"] .confirm-button-container .border-bg .left-border-bg { height: 44px; width: 29px; position: absolute; top: 0px; left: -6px; background-size: 100% 100%; background-image: url(/fe/lol-collections/BGLeft.png); } .arrow-footer[version="7.13"] .confirm-button-container .border-bg .middle-border-bg { flex-grow: 1; height: 44px; margin: 0px 12px; background-size: contain; background-image: url(/fe/lol-collections/BGMid.png); } .arrow-footer[version="7.13"] .confirm-button-container .border-bg .right-border-bg { height: 44px; width: 26px; position: absolute; top: 0; right: -6px; background-size: 100% 100%; background-image: url(/fe/lol-collections/BGRight.png); } .arrow-footer[version="7.13"] .confirm-button-container button { border: 0; outline: 0; padding: 0; background-color: transparent; cursor: pointer; } .arrow-footer[version="7.13"] .confirm-button-container button.disabled { cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { height: 34px; min-width: 170px; margin-left: 29px; padding-right: 1px; color: #a3c7c7; position: relative; display: flex; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm > div { background-size: 100% 100%; height: 34px; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .left-confirm { width: 12px; background-image: url(/fe/lol-collections/LeftDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .middle-confirm { display: flex; justify-content: center; align-items: center; flex-grow: 1; padding: 0px 10px; background-repeat: repeat-x; background-image: url(/fe/lol-collections/MidDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .middle-confirm:lang(ar-ae) { direction: ltr; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .right-confirm { width: 17px; background-image: url(/fe/lol-collections/RightDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .left-confirm { background-image: url(/fe/lol-collections/LeftHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .middle-confirm { background-image: url(/fe/lol-collections/MidHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .right-confirm { background-image: url(/fe/lol-collections/RightHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active { color: #005a82; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .left-confirm { background-image: url(/fe/lol-collections/LeftClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .middle-confirm { background-image: url(/fe/lol-collections/MidClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .right-confirm { background-image: url(/fe/lol-collections/RightClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled { color: #5c5b57; cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .left-confirm { background-image: url(/fe/lol-collections/LeftDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .middle-confirm { background-image: url(/fe/lol-collections/MidDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .right-confirm { background-image: url(/fe/lol-collections/RightDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed { color: #c89b3c; cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .left-confirm { background-image: url(/fe/lol-collections/LeftCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .middle-confirm { background-image: url(/fe/lol-collections/MidCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .right-confirm { background-image: url(/fe/lol-collections/RightCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close { width: 34px; height: 34px; background-size: contain; position: absolute; left: 0px; background-image: url(/fe/lol-collections/Normal.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close .close-icon { height: 34px; width: 34px; background-size: 18px; background-repeat: no-repeat; background-position: center; background-image: url(/fe/lol-collections/Exit_Default.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close[type="back"] .close-icon { background-image: url(/fe/lol-collections/Back_default.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover { background-image: url(/fe/lol-collections/Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover .close-icon { background-image: url(/fe/lol-collections/Exit_Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover[type="back"] .close-icon { background-image: url(/fe/lol-collections/Back_Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active { background-image: url(/fe/lol-collections/Clicked.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active .close-icon { background-image: url(/fe/lol-collections/Exit_Click.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active[type="back"] .close-icon { background-image: url(/fe/lol-collections/Back_click.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled { background-image: url(/fe/lol-collections/Disabled.png); cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled .close-icon { background-image: url(/fe/lol-collections/Exit_Disabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled[type="back"] .close-icon { background-image: url(/fe/lol-collections/Back_Disabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed { cursor: default; background-image: url(/fe/lol-collections/Completed.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed .close-icon { background-image: url(/fe/lol-collections/Checkmark.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed[type="back"] .close-icon { background-image: url(/fe/lol-collections/Checkmark.png); } .arrow-footer[version="7.13"] .arrow-footer-decoration { display: flex; position: relative; flex: 1 1 auto; height: 34px; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button, .basic-footer .confirm-button-container lol-uikit-flat-button { text-transform: uppercase; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(ko-kr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(ko-kr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(ja-jp), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(ja-jp), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(tr-tr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(tr-tr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(el-gr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(el-gr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(th-th), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(th-th), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(zh-tw), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(zh-tw) { text-transform: none; } .basic-footer { padding-left: 34px; padding-right: 35px; } .basic-footer { width: 100%; display: flex; flex-direction: row; justify-content: center; height: 48px; box-sizing: border-box; } .basic-footer .confirm-button-container { position: relative; display: flex; flex-direction: row; justify-content: center; flex-grow: 1; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button, .basic-footer .confirm-button-container lol-uikit-flat-button { display: flex; min-width: 160px; pointer-events: auto; margin-left: 10px; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button:last-child, .basic-footer .confirm-button-container lol-uikit-flat-button:last-child { margin-right: 10px; } .basic-footer .confirm-button-container::after, .basic-footer .confirm-button-container::before { display: flex; border-top: thin solid #785a28; margin-top: 16px; height: 1px; flex-grow: 1; content: " "; } .media-fader { position: absolute; top: 0; } .media-fader .media-fader-asset { -webkit-user-drag: none; } .media-swapper { position: relative; } .collectibles-grid-component .no-owned-collectible .message-container .message, .collectibles-grid-component .no-matching-collectibles .message, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-subtitle, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title { font-family: var(--font-display); } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .esports-name, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-subtitle-wrapper .esports-subtitle { font-family: var(--font-body); } .collectibles-grid-component .no-owned-collectible .message-container .message, .collectibles-grid-component .no-matching-collectibles .message, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-subtitle, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .esports-name, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-subtitle-wrapper .esports-subtitle { -webkit-user-select: none; } .collectibles-grid-component .no-owned-collectible .message-container .message, .collectibles-grid-component .no-matching-collectibles .message, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-subtitle, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .esports-name, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-subtitle-wrapper .esports-subtitle { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .collectibles-grid-component .no-owned-collectible .message-container .message, .collectibles-grid-component .no-matching-collectibles .message, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title { text-transform: uppercase; } .collectibles-grid-component .no-owned-collectible .message-container .message:lang(ko-kr), .collectibles-grid-component .no-matching-collectibles .message:lang(ko-kr), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title:lang(ko-kr), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(ko-kr), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title:lang(ko-kr), .collectibles-grid-component .no-owned-collectible .message-container .message:lang(ja-jp), .collectibles-grid-component .no-matching-collectibles .message:lang(ja-jp), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title:lang(ja-jp), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(ja-jp), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title:lang(ja-jp), .collectibles-grid-component .no-owned-collectible .message-container .message:lang(tr-tr), .collectibles-grid-component .no-matching-collectibles .message:lang(tr-tr), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title:lang(tr-tr), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(tr-tr), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title:lang(tr-tr), .collectibles-grid-component .no-owned-collectible .message-container .message:lang(el-gr), .collectibles-grid-component .no-matching-collectibles .message:lang(el-gr), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title:lang(el-gr), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(el-gr), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title:lang(el-gr), .collectibles-grid-component .no-owned-collectible .message-container .message:lang(th-th), .collectibles-grid-component .no-matching-collectibles .message:lang(th-th), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title:lang(th-th), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(th-th), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title:lang(th-th), .collectibles-grid-component .no-owned-collectible .message-container .message:lang(zh-tw), .collectibles-grid-component .no-matching-collectibles .message:lang(zh-tw), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title:lang(zh-tw), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(zh-tw), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title:lang(zh-tw) { text-transform: none; } .collectibles-grid-component .no-owned-collectible .message-container .message, .collectibles-grid-component .no-matching-collectibles .message { text-transform: none; } .collectibles-grid-component .no-owned-collectible .message-container .message, .collectibles-grid-component .no-matching-collectibles .message, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .collectibles-grid-component .no-owned-collectible .message-container .message:lang(ar-ae), .collectibles-grid-component .no-matching-collectibles .message:lang(ar-ae), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title:lang(ar-ae), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title:lang(ar-ae) { letter-spacing: 0; } .collectibles-grid-component .no-owned-collectible .message-container .message, .collectibles-grid-component .no-matching-collectibles .message { letter-spacing: 0.025em; } .collectibles-grid-component .no-owned-collectible .message-container .message:lang(ar-ae), .collectibles-grid-component .no-matching-collectibles .message:lang(ar-ae) { letter-spacing: 0; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(ar-ae) { letter-spacing: 0; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .esports-name, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-subtitle-wrapper .esports-subtitle { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .esports-name:lang(ja-jp), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-subtitle-wrapper .esports-subtitle:lang(ja-jp) { font-size: 13px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .esports-name:lang(ar-ae), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-subtitle-wrapper .esports-subtitle:lang(ar-ae) { letter-spacing: 0; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-subtitle, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-subtitle, .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count { font-size: 16px; font-weight: 700; font-style: italic; letter-spacing: 0.075em; -webkit-font-smoothing: subpixel-antialiased; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-subtitle:lang(ar-ae), .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count:lang(ar-ae) { letter-spacing: 0; } .collectibles-grid-component { position: relative; width: 774px; height: 100%; display: flex; flex-direction: column; justify-content: center; } .collectibles-grid-component .no-owned-collectible { display: flex; flex-direction: column; align-items: center; } .collectibles-grid-component .no-owned-collectible .illustration { max-width: 102px; } .collectibles-grid-component .no-owned-collectible .message-container { display: flex; flex-direction: column; align-items: center; margin-top: 10px; margin-bottom: 10px; } .collectibles-grid-component .no-owned-collectible.hidden { display: none; } .collectibles-grid-component .no-matching-collectibles { display: flex; align-items: flex-start; justify-content: center; } .collectibles-grid-component .no-matching-collectibles.hidden { display: none; } .collectibles-grid-component .page-view-wrapper { height: 100%; } .collectibles-grid-component .page-view-wrapper.hidden { display: none; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper { display: flex; position: relative; padding: 10px 0 0 17px ; overflow-y: auto; overflow-x: hidden; flex-direction: row; flex-wrap: wrap; flex-grow: 1; justify-content: flex-start; align-items: flex-start; height: 100%; will-change: auto; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper { display: flex; margin-bottom: 15px; flex-basis: 100%; align-items: flex-end; width: 750px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.hidden { opacity: 0; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-owned-count { padding: 0 ; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-complete-icon-wrapper { display: inline-flex; width: 29px; height: 26px; margin-left: 10px; transition: none; overflow: hidden; position: relative; justify-content: center; align-items: center; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-complete-icon-wrapper.show { margin-right: 12px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-complete-icon-wrapper.show .group-complete-icon { width: 29px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-complete-icon-wrapper.hidden { display: none; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-complete-icon-wrapper .group-complete-icon { bottom: -3px; width: 0px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-complete-icon-wrapper.animate { transition: 250ms ease, margin-right 250ms 300ms ease; margin-right: 12px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-complete-icon-wrapper.animate .group-complete-icon { transition: 400ms ease; width: 29px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title { display: inline; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-subtitle { display: inline; margin: 0 0 0 25px ; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count { display: inline; margin: 0 0 0 25px ; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count .group-total-count { margin: 0 0 0 10px ; font-size: 14px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .complete-set-video-wrapper { position: absolute; left: -27px; top: -26px; width: 100%; height: 82px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .complete-set-video-wrapper.hidden { display: none; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .complete-set-video-wrapper .complete-set-video { height: 100%; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title-inline-separator-wrapper { display: flex; flex-grow: 1; margin-left: 10px; margin-right: 10px; height: 18px; justify-content: center; align-items: center; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title-inline-separator-wrapper .group-title-inline-separator { display: inline-block; border: solid #1b292a; border-width: 1px 0 0 0; width: 100%; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .esports-name { display: inline-block; text-transform: uppercase; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .hidden { display: none; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-subtitle { font-size: 14px; margin-left: 12px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-count { font-size: 14px; margin-left: 12px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper { width: 760px; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 0; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title { display: flex; height: 32px; justify-content: center; align-items: center; margin-top: 28px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title .icon { max-height: 16px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-title span { margin-left: 12px; margin-right: 12px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-subtitle-wrapper { height: 50px; width: 100%; display: flex; justify-content: center; align-items: center; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper .esports-background { position: absolute; width: 100%; top: 0; z-index: -1; opacity: 1; height: 270px; background-size: cover; display: none; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-title-wrapper.first-title .esports-title { margin-top: 0px; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .esports-separator { width: 750px; border: solid #3c3732; border-width: 1px 0 0 0; margin: 10px 0 0 0; } .collectibles-grid-component .page-view-wrapper .collectibles-grid-wrapper .group-separator { width: 750px; border: solid #1b292a; border-width: 1px 0 0 0; margin-bottom: 10px; } .collectibles-grid-tooltip lol-uikit-tooltip { width: 300px; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container { width: 100%; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .top-content { display: flex; justify-content: center; align-items: center; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .top-content .collectible-name { flex-grow: 1; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .gem { display: inline-block; width: 20px; height: 20px; margin-left: 6px; margin-right: 6px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .name { display: inline; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .hidden { display: none; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 12px; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container.separator { border-top: thin solid #785a28; padding-top: 16px; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .row { margin-top: 8px; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .description p { font-size: 13px; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .icon { height: 20px; width: 20px; margin: 0 4px 0 0 ; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .bottom-row { margin-top: 12px; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .legacy-info { display: inline-flex; align-items: center; margin: 0 20px 0 0 ; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .legacy-info .legacy-icon { background-image: url("/fe/lol-collections/images/control-panel/icon-legacy.png"); } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .legacy-info .label { margin: 0 0 0 5px ; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .price { display: inline-flex; align-items: center; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .price .initial-cost { color: #dd2d38; text-decoration: line-through; margin: 0 5px; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .price .cost { margin: 0 5px; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .price .cost.IP { margin: 0 20px 0 0 ; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .price .currency.RP { background: url("/fe/lol-static-assets/images/icon-rp-24.png"); background-size: contain; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .price .currency.IP { background-image: url("/fe/lol-collections/images/currencies/icon-blue-essence.png"); margin: 0 1px 0 0 ; } .collectibles-grid-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .gold-text { color: #c89b3c; } .collectibles-root { position: relative; height: 575px; width: 1029px; overflow: hidden; } .collectibles-container { display: flex; flex-direction: row; margin-top: 3px; padding: 0; position: relative; height: 100%; width: 100%; } .collectibles-container .control-panel { position: relative; width: 194px; height: 100%; margin-right: 35px; } .collectibles-container .collectibles-grid { position: relative; display: flex; width: 774px; height: 100%; justify-content: center; } .spinner-wrapper { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; } .spinner-wrapper .loading-spinner { width: 40px; height: 40px; background-image: url("/fe/lol-collections/images/spinner.png"); background-size: 40px; animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; } .spinner-wrapper.hidden { display: none; } .loading-fade-in { -webkit-animation: fade-in 0.5s forwards; } .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; } } .loading-hidden { opacity: 0; } .collectibles-container .collectibles-grid .summoner-icons-row .summoner-icon-wrapper { margin: 0 19px 0 0 ; } .collectibles-container .collectibles-grid .summoner-icons-row .summoner-icon-wrapper:last-child { margin: 0; } .collectibles-container .collectibles-grid .summoner-icons-row .summoner-icon-wrapper .summoner-icon-img { display: block; width: 90px; } .collectibles-container .save-summoner-icon-button { position: absolute; right: 25px ; left: auto ; top: 0; } .collectibles-container .display-on-boarding-button { position: absolute; right: 110px; top: 0; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-champion-total-label, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-owned, .collectible-control-panel .collectibles-feature-description { font-family: var(--font-display); } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .count, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .legacy-count, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-breakdown .item .count, .collectible-control-panel .collectibles-collection-search-panel .collectibles-collection-text-filter .collectibles-collection-search-text, .collectible-control-panel .collectibles-feature-description { font-family: var(--font-body); } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-champion-total-label, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-owned, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .count, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .legacy-count, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-breakdown .item .count, .collectible-control-panel .collectibles-collection-search-panel .collectibles-collection-text-filter .collectibles-collection-search-text, .collectible-control-panel .collectibles-feature-description { -webkit-user-select: none; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-champion-total-label, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-owned, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .count, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .legacy-count, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-breakdown .item .count, .collectible-control-panel .collectibles-collection-search-panel .collectibles-collection-text-filter .collectibles-collection-search-text, .collectible-control-panel .collectibles-feature-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-champion-total-label, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-owned { text-transform: uppercase; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned:lang(ko-kr), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label:lang(ko-kr), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-champion-total-label:lang(ko-kr), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-owned:lang(ko-kr), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned:lang(ja-jp), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label:lang(ja-jp), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-champion-total-label:lang(ja-jp), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-owned:lang(ja-jp), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned:lang(tr-tr), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label:lang(tr-tr), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-champion-total-label:lang(tr-tr), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-owned:lang(tr-tr), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned:lang(el-gr), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label:lang(el-gr), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-champion-total-label:lang(el-gr), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-owned:lang(el-gr), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned:lang(th-th), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label:lang(th-th), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-champion-total-label:lang(th-th), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-owned:lang(th-th), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned:lang(zh-tw), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label:lang(zh-tw), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-champion-total-label:lang(zh-tw), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-owned:lang(zh-tw) { text-transform: none; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-owned { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned:lang(ar-ae), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-owned:lang(ar-ae) { letter-spacing: 0; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-champion-total-label { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label:lang(ja-jp), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-champion-total-label:lang(ja-jp) { font-size: 13px; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label:lang(ar-ae), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-champion-total-label:lang(ar-ae) { letter-spacing: 0; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-champion-total-label { color: #a09b8c; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .count, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .legacy-count, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-breakdown .item .count, .collectible-control-panel .collectibles-collection-search-panel .collectibles-collection-text-filter .collectibles-collection-search-text, .collectible-control-panel .collectibles-feature-description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .count:lang(ja-jp), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .legacy-count:lang(ja-jp), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-breakdown .item .count:lang(ja-jp), .collectible-control-panel .collectibles-collection-search-panel .collectibles-collection-text-filter .collectibles-collection-search-text:lang(ja-jp), .collectible-control-panel .collectibles-feature-description:lang(ja-jp) { font-size: 13px; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .count:lang(ar-ae), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .legacy-count:lang(ar-ae), .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-breakdown .item .count:lang(ar-ae), .collectible-control-panel .collectibles-collection-search-panel .collectibles-collection-text-filter .collectibles-collection-search-text:lang(ar-ae), .collectible-control-panel .collectibles-feature-description:lang(ar-ae) { letter-spacing: 0; } .collectible-control-panel .collectibles-feature-description { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .collectible-control-panel .collectibles-feature-description:lang(ar-ae) { letter-spacing: 0; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned, .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-owned { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .collectible-control-panel { width: 194px; margin-right: 35px; } .collectible-control-panel .separator { border-style: solid; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-color: #1b292a; margin-top: 5px; margin-bottom: 5px; width: 168px; margin-bottom: 0; } .collectible-control-panel .collectibles-collection-details-wrapper { cursor: default; } .collectible-control-panel .collectibles-collection-details-wrapper .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; } .collectible-control-panel .collectibles-collection-details-wrapper .top-frame.champions-frame { height: 18px; background-image: url("/fe/lol-collections/images/control-panel/square-hextech-frame-top.png"); } .collectible-control-panel .collectibles-collection-details-wrapper .bottom-frame { background-image: url("/fe/lol-collections/images/control-panel/control-panel-frame-bot.png"); background-repeat: no-repeat; background-size: contain; height: 14px; } .collectible-control-panel .collectibles-collection-details-wrapper .bottom-frame.champions-frame { height: 18px; background-image: url("/fe/lol-collections/images/control-panel/square-hextech-frame-bot.png"); } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper { position: absolute; display: flex; justify-content: center; top: 34px; width: 194px; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary { display: flex; flex-direction: column; align-items: center; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-owned-summary-wrapper .collectibles-collection-owned-summary .collectibles-collection-total-owned-label { text-transform: uppercase; margin-top: 5px; max-width: 100px; text-align: center; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper { padding: 0px 10px; text-align: center; background-image: url("/fe/lol-collections/images/control-panel/square-hextech-frame-mid.png"); background-size: contain; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-champion-total-wrapper .collectibles-collection-total-owned.eternals-count { margin-top: 15px; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-sets-and-breakdown { background-image: url("/fe/lol-collections/images/control-panel/control-panel-frame-mid.png"); background-size: contain; display: flex; flex-direction: column; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets { display: flex; justify-content: center; margin: 8px 20px 0px 20px; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set { display: flex; justify-content: space-between; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set { display: flex; flex-direction: column; min-width: 40px; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .icon-wrapper { display: flex; justify-content: center; align-items: center; width: 40px; height: 26px; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .icon-wrapper .icon { width: 20px; height: 20px; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .icon-wrapper .icon-legacy { width: 23px; height: 23px; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .count { margin-top: 5px; margin-bottom: 0; text-align: center; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-total-sets .top-icon-set .set .legacy-count { margin-top: 5px; margin-bottom: 0; text-align: center; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-breakdown { display: flex; flex-wrap: wrap; padding: 0 5px; justify-content: center; margin: 8px 5px 5px 5px; min-height: 50px; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-breakdown .item { display: flex; width: 34px; flex-direction: column; align-items: center; text-align: center; margin-top: 7px; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-breakdown .item .count { margin-bottom: 0px; margin-top: 8px; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-breakdown .item .icon-wrapper { display: flex; align-items: center; text-align: center; height: 20px; width: 20px; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-breakdown .item .icon-wrapper .icon { max-height: 20px; max-width: 20px; } .collectible-control-panel .collectibles-collection-details-wrapper .collectibles-collection-breakdown .item .clickable-icon { cursor: pointer; } .collectible-control-panel .collectibles-collection-search-panel { margin-top: 18px; } .collectible-control-panel .collectibles-collection-search-panel .collectibles-collection-text-filter .collectibles-collection-search-text { width: 100%; padding: 0 0 0 27px ; height: 30px; line-height: 30px; } .collectible-control-panel .collectibles-collection-search-panel .collectibles-collection-ownership-filter { margin-top: 12px; } .collectible-control-panel .collectibles-collection-search-panel .collectibles-collection-ownership-filter.invisible { visibility: hidden; } .collectible-control-panel .collectibles-collection-search-panel .collectibles-collection-availability-filter { margin-top: 12px; } .collectible-control-panel .collectibles-collection-search-panel .collectibles-collection-availability-filter.invisible { visibility: hidden; } .collectible-control-panel .collectibles-collection-search-panel .collectibles-collection-checkbox-label { margin-left: 12px; } .collectible-control-panel .collectibles-collection-search-panel .collectibles-collection-grouping-options { margin-top: 12px; } .collectible-control-panel .collectibles-collection-search-panel .collectibles-collection-sort-options { margin-top: 12px; } .collectible-control-panel .collectibles-collection-search-panel lol-uikit-framed-dropdown { --framed-dropdown-scrollable-max-height: 200px; } .collectible-control-panel .collectibles-feature-description { margin-top: 12px; } .collectibles-grid .ward-skins-row { display: flex; } .collectibles-grid .ward-skins-row .ward-skin-wrapper { margin: 0 34px 0 0 ; } .collectibles-grid .ward-skins-row .ward-skin-wrapper:last-child { margin: 0; } .collectibles-grid .ward-skins-row .ward-skin-wrapper .ward-skin-background { display: flex; width: 123px; background-image: url("/fe/lol-collections/images/summoner-rift-background.jpg"); background-size: contain; background-repeat: no-repeat; justify-content: center; } .collectibles-grid .ward-skins-row .ward-skin-wrapper .ward-skin-background .ward-skin-img-container .ward-skin-img { max-width: 100px; } .collectibles-grid .chromas-row { display: flex; } .collectibles-grid .chromas-row .chroma-wrapper { margin: 0 25px 0 0 ; } .collectibles-grid .chromas-row .chroma-wrapper:last-child { margin: 0; } .collectibles-grid .chromas-row .chroma-wrapper .chroma-background { display: flex; width: 170px; background-image: url("/fe/lol-collections/images/summoner-rift-background.jpg"); background-size: contain; background-repeat: no-repeat; justify-content: center; } .collectibles-grid .chromas-row .chroma-wrapper .chroma-background .chroma-img-container .chroma-img { max-height: 158px; margin-top: 5px; } .collectibles-grid .champion-row .champion-wrapper .champion-name { font-family: var(--font-body); } .collectibles-grid .champion-row .champion-wrapper .champion-name { -webkit-user-select: none; } .collectibles-grid .champion-row .champion-wrapper .champion-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .collectibles-grid .champion-row .champion-wrapper .champion-name { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .collectibles-grid .champion-row .champion-wrapper .champion-name:lang(ja-jp) { font-size: 13px; } .collectibles-grid .champion-row .champion-wrapper .champion-name:lang(ar-ae) { letter-spacing: 0; } .collectibles-grid .champion-row { display: flex; } .collectibles-grid .champion-row .champion-wrapper { margin-right: 18px; } .collectibles-grid .champion-row .champion-wrapper:last-child { margin-right: 0 ; } .collectibles-grid .champion-row .champion-wrapper:first-child { margin-right: 18px ; } .collectibles-grid .champion-row .champion-wrapper .item-image .champion-img-container { width: 100%; height: 188px; overflow: hidden; position: relative; } .collectibles-grid .champion-row .champion-wrapper .item-image .champion-img-container .champion-img { position: absolute; width: 145px; height: 261px; top: -8px; left: -8px; } .collectibles-grid .champion-row .champion-wrapper .champion-name { font-size: 13px; padding-top: 16px; text-align: center; } .collectibles-grid .champion-row .champion-wrapper[dimmed] .champion-name { color: #5b5a56; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container { font-family: var(--font-body); } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container { -webkit-user-select: none; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container:lang(ja-jp) { font-size: 13px; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container:lang(ar-ae) { letter-spacing: 0; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container { min-width: 210px; padding: 10px 14px; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .top-content .collectible-name { display: flex; justify-content: flex-start; align-items: center; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .top-content .collectible-name lol-uikit-radial-progress { width: 45px; height: 45px; margin: 0 10px 0 -2px ; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .top-content .collectible-name lol-uikit-radial-progress h4 { line-height: 44px; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .name { display: inline; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container { margin-top: 10px; border-top: thin solid #785a28; padding-top: 12px; text-align: left ; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .mastery-container { margin-bottom: 10px; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .mastery-container .mastery-score { display: flex; flex-direction: row; margin-bottom: 2px; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .mastery-container .mastery-score .mastery-icon { background-image: url(/fe/lol-collections/tooltip-champ-mastery.png); background-size: contain; width: 17px; height: 13px; margin: 0 5px 0 0 ; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .mastery-container .mastery-score .mastery-title { margin-left: auto; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .info-badge { display: flex; flex-direction: row; align-items: center; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .info-badge .info-badge-icon { background-size: contain; width: 22px; height: 22px; margin: 0 3px 0 0 ; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .info-badge .info-badge-icon.rental-icon { background-image: url(/fe/lol-collections/Rental.png); } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .info-badge .info-badge-icon.free-to-play-icon { background-image: url(/fe/lol-collections/Free-Rotation.png); } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .info-badge .info-badge-icon.chest-granted-icon { background-image: url(/fe/lol-collections/Hextech-Chest.png); } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .info-badge .info-badge-icon.loyalty-icon { background-image: url(/fe/lol-collections/Loyalty.png); } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .info-badge .info-badge-text { height: 14px; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .eternals-container { margin: 10px 0px; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .eternals-container h6 { margin-bottom: 6px; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .eternals-container .eternals-set { display: flex; justify-content: space-between; margin-bottom: 2px; align-items: center; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .eternals-container .eternals-set .eternals-set-lock { background-image: url(/fe/lol-collections/tooltip-lock.png); background-size: contain; width: 9px; height: 14px; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .eternals-container .eternals-set .eternals-set-icon { background-image: url(/fe/lol-collections/Eternal-Icon-Dark-Gold.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 14px; height: 14px; margin-right: 3px; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .eternals-container .eternals-set .eternals-set-icon.complete { background-image: url(/fe/lol-collections/Eternal-Icon-Dark-Gold.png); } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .eternals-container .eternals-set .eternals-set-icon.incomplete { background-image: url(/fe/lol-collections/Eternal-Icon-Gold.png); } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .eternals-container .eternals-set .set-complete { color: #cdbe91; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .eternals-container .eternals-set .eternals-set-complete-wrapper { display: flex; flex-direction: row; } .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .eternals-container .eternals-set .eternals-set-complete-wrapper .eternals-set-count, .champions-collectibles-tooltip lol-uikit-tooltip .collectibles-tooltip-container .info-container .eternals-container .eternals-set .eternals-set-complete-wrapper .set-complete { position: relative; top: 1px; } .on-boarding-wrapper .title p, .on-boarding-wrapper .slots .slot .title { font-family: var(--font-display); } .on-boarding-wrapper .description p, .on-boarding-wrapper .slots .slot.organize .label, .on-boarding-wrapper .slots .slot .description { font-family: var(--font-body); } .on-boarding-wrapper .title p, .on-boarding-wrapper .description p, .on-boarding-wrapper .slots .slot.organize .label, .on-boarding-wrapper .slots .slot .title, .on-boarding-wrapper .slots .slot .description { -webkit-user-select: none; } .on-boarding-wrapper .title p, .on-boarding-wrapper .description p, .on-boarding-wrapper .slots .slot.organize .label, .on-boarding-wrapper .slots .slot .title, .on-boarding-wrapper .slots .slot .description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .on-boarding-wrapper .title p, .on-boarding-wrapper .slots .slot .title { text-transform: uppercase; } .on-boarding-wrapper .title p:lang(ko-kr), .on-boarding-wrapper .slots .slot .title:lang(ko-kr), .on-boarding-wrapper .title p:lang(ja-jp), .on-boarding-wrapper .slots .slot .title:lang(ja-jp), .on-boarding-wrapper .title p:lang(tr-tr), .on-boarding-wrapper .slots .slot .title:lang(tr-tr), .on-boarding-wrapper .title p:lang(el-gr), .on-boarding-wrapper .slots .slot .title:lang(el-gr), .on-boarding-wrapper .title p:lang(th-th), .on-boarding-wrapper .slots .slot .title:lang(th-th), .on-boarding-wrapper .title p:lang(zh-tw), .on-boarding-wrapper .slots .slot .title:lang(zh-tw) { text-transform: none; } .on-boarding-wrapper .title p { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .on-boarding-wrapper .title p:lang(ar-ae) { letter-spacing: 0; } .on-boarding-wrapper .slots .slot .title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .on-boarding-wrapper .slots .slot .title:lang(ar-ae) { letter-spacing: 0; } .on-boarding-wrapper .description p { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .on-boarding-wrapper .description p:lang(ar-ae) { letter-spacing: 0; } .on-boarding-wrapper .slots .slot.organize .label, .on-boarding-wrapper .slots .slot .description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .on-boarding-wrapper .slots .slot.organize .label:lang(ja-jp), .on-boarding-wrapper .slots .slot .description:lang(ja-jp) { font-size: 13px; } .on-boarding-wrapper .slots .slot.organize .label:lang(ar-ae), .on-boarding-wrapper .slots .slot .description:lang(ar-ae) { letter-spacing: 0; } .on-boarding-wrapper { position: relative; height: 550px; width: 1100px; overflow: hidden; } .on-boarding-wrapper .title { display: flex; justify-content: center; } .on-boarding-wrapper .title p { margin-bottom: 0; } .on-boarding-wrapper .description { display: flex; justify-content: center; } .on-boarding-wrapper .description p { max-width: 300px; text-align: center; } .on-boarding-wrapper .slots { display: flex; justify-content: space-around; margin-top: 273px; } .on-boarding-wrapper .slots .slot { display: flex; flex-direction: column; position: relative; } .on-boarding-wrapper .slots .slot img { position: absolute; top: -365px; left: -87px; } .on-boarding-wrapper .slots .slot.organize .organize-img { content: url("/fe/lol-collections/images/on-boarding/organize-slot.png"); } .on-boarding-wrapper .slots .slot.organize .label { position: absolute; } .on-boarding-wrapper .slots .slot.organize .label.search { top: -210px; left: 10px; } .on-boarding-wrapper .slots .slot.organize .label.checkbox { top: -170px; left: 10px; } .on-boarding-wrapper .slots .slot.organize .label.first-dropdown { top: -105px; left: -5px; } .on-boarding-wrapper .slots .slot.organize .label.second-dropdown { top: -60px; left: -5px; } .on-boarding-wrapper .slots .slot .discover-img { content: url("/fe/lol-collections/images/on-boarding/discover-slot.png"); } .on-boarding-wrapper .slots .slot .collect-img { content: url("/fe/lol-collections/images/on-boarding/collect-slot.png"); } .on-boarding-wrapper .slots .slot .description { max-width: 200px; text-align: center; } .on-boarding-wrapper .button-light-wrapper { display: flex; justify-content: center; } .on-boarding-wrapper .button-light-wrapper .button-light { background: url("/fe/lol-collections/images/on-boarding/button-light.png") no-repeat; background-size: contain; height: 93px; width: 325px; } :host { display: inline-block; width: 146px; height: 218px; } :host .thumbnail-content { position: relative; display: inline-flex; width: 100%; height: 100%; pointer-events: none; justify-content: center; align-content: center; } :host .thumbnail-content:hover .skin-content { opacity: 1; } :host .thumbnail-content .skin-content { opacity: 0.8; overflow: hidden; width: 130px; height: 193px; position: relative; pointer-events: all; cursor: pointer; overflow: hidden; } :host .thumbnail-content .skin-content .content-wrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/fe/lol-collections/images/skins-viewer/card-background.png") no-repeat; background-size: contain; } :host .thumbnail-content .skin-content .content-wrapper .emblem { position: absolute; display: flex; justify-content: center; align-items: flex-start; left: 0; bottom: 10px; width: 100%; max-height: 74px; } :host .thumbnail-content .skin-content .content-wrapper .emblem .emblem-img { max-width: 100px; } :host .thumbnail-content .skin-content .content-wrapper .emblem.hidden { display: none; } :host .thumbnail-content .skin-content ::content lol-uikit-thumbnail { border: none; } :host .thumbnail-content .skin-content ::content lol-uikit-thumbnail img { max-width: 100%; } :host .thumbnail-content .skin-content .splash-video-wrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } :host .thumbnail-content .skin-content .splash-video-wrapper .splash-start-video { position: absolute; width: 130px; left: 0px; top: 0px; } :host .thumbnail-content .skin-content .splash-video-wrapper .splash-video { position: absolute; width: 130px; left: 0px; top: 0px; } :host .thumbnail-content .skin-content .hidden { display: none; } :host .thumbnail-content .skin-border-wrapper { position: absolute; display: flex; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; } :host .thumbnail-content .skin-border-wrapper .skin-border { background-size: contain; background-repeat: no-repeat; width: 132px; height: 227px; } :host .thumbnail-content .skin-border-wrapper .linger-video-wrapper { position: absolute; top: -5px; left: -5px; width: calc(100% + 10px); height: calc(100% - 14px); overflow: hidden; } :host .thumbnail-content .skin-border-wrapper .linger-video-wrapper .linger-video { position: absolute; left: -32.5px; top: -21px; width: 209px; height: 259px; backface-visibility: hidden; } :host .thumbnail-content .skin-border-wrapper .hidden { display: none; } :host .thumbnail-content.show-linger-effect:before { content: ''; position: absolute; width: 173px; height: 110%; top: -23px; left: -9px; background-image: url("/fe/lol-collections/images/skins-viewer/borders/linger-effect-background.png"); background-repeat: no-repeat; background-size: contain; } :host .thumbnail-content.show-linger-effect .skin-border-wrapper:after { content: ''; position: absolute; width: 4px; height: 127px; top: 39.5px; right: 8.5px; background: url("/fe/lol-collections/images/skins-viewer/borders/linger-effect-side.png") no-repeat; background-size: contain; } :host .thumbnail-content.show-linger-effect .skin-border-wrapper .skin-border:after { content: ''; position: absolute; width: 4px; height: 127px; top: 39.5px; left: 1px; transform: scaleX(-1); background: url("/fe/lol-collections/images/skins-viewer/borders/linger-effect-side.png") no-repeat; background-size: contain; } :host([owned]:not([owned='false'])) .thumbnail-content .skin-content { -webkit-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); margin-top: 5px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; } :host([owned]:not([owned='false'])) .thumbnail-content .skin-border { position: relative; } :host([owned]:not([owned='false'])) .thumbnail-content .skin-border .skin-gem { position: absolute; display: flex; justify-content: center; width: 100%; height: 33px; bottom: 0px; left: 0px; } :host([owned]:not([owned='false'])) .thumbnail-content .skin-border .skin-gem .gem { content: ''; width: 18px; background-size: contain; background-repeat: no-repeat; } :host([owned]:not([owned='false'])[rarity='ultimate']) .thumbnail-content :before { background-image: none; } :host([owned]:not([owned='false'])[rarity='ultimate']) .thumbnail-content .skin-border { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_ultimate.png"); } :host([owned]:not([owned='false'])[rarity='ultimate']) .thumbnail-content .skin-border .skin-gem { height: 40.75px; } :host([owned]:not([owned='false'])[rarity='ultimate']) .thumbnail-content .skin-border .skin-gem .gem { width: 17px; } :host([owned]:not([owned='false'])[rarity='ultimate']) .thumbnail-content:hover:before { display: none; } :host([owned]:not([owned='false'])[rarity='mythic']) .thumbnail-content .skin-border { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_mythic.png"); } :host([owned]:not([owned='false'])[rarity='mythic']) .thumbnail-content .skin-border .skin-gem { height: 40px; } :host([owned]:not([owned='false'])[rarity='mythic']) .thumbnail-content .skin-border .skin-gem .gem { width: 18px; } :host([owned]:not([owned='false'])[rarity='legendary']) .thumbnail-content .skin-border { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_legendary.png"); } :host([owned]:not([owned='false'])[rarity='legendary']) .thumbnail-content .skin-border .skin-gem { height: 40px; } :host([owned]:not([owned='false'])[rarity='legendary']) .thumbnail-content .skin-border .skin-gem .gem { width: 18px; } :host([owned]:not([owned='false'])[rarity='epic']) .thumbnail-content .skin-border { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_epic.png"); } :host([owned]:not([owned='false'])[rarity='epic']) .thumbnail-content .skin-border .skin-gem { height: 40.5px; } :host([owned]:not([owned='false'])[rarity='epic']) .thumbnail-content .skin-border .skin-gem .gem { width: 18px; } :host([owned]:not([owned='false'])[rarity='other']) .thumbnail-content .skin-border { background-image: url("/fe/lol-collections/images/skins-viewer/borders/borders_normal.png"); } :host(:not([owned])) .thumbnail-content:hover .skin-content .content-wrapper, :host([owned='false']) .thumbnail-content:hover .skin-content .content-wrapper { opacity: 1; } :host(:not([owned])) .thumbnail-content .skin-content, :host([owned='false']) .thumbnail-content .skin-content { border: thin solid #3c3c41; } :host(:not([owned])) .thumbnail-content .skin-content .content-wrapper, :host([owned='false']) .thumbnail-content .skin-content .content-wrapper { opacity: 0.3; } :host(:not([owned])) .thumbnail-content .skin-border, :host([owned='false']) .thumbnail-content .skin-border { background-image: none; } :host(:not([owned])) .thumbnail-content .skin-border .skin-gem:after, :host([owned='false']) .thumbnail-content .skin-border .skin-gem:after { background-image: none; } :host(:not([owned])) .thumbnail-content:hover .skin-content .skin-mask:before, :host([owned='false']) .thumbnail-content:hover .skin-content .skin-mask:before { background: none; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned, .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label { font-family: var(--font-display); } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .count, .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .legacy-count, .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-breakdown .item .count, .skins-collection-control-pane .skins-collection-search-panel .skins-collection-text-filter .skins-collection-search-text { font-family: var(--font-body); } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned, .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label, .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .count, .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .legacy-count, .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-breakdown .item .count, .skins-collection-control-pane .skins-collection-search-panel .skins-collection-text-filter .skins-collection-search-text { -webkit-user-select: none; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned, .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label, .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .count, .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .legacy-count, .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-breakdown .item .count, .skins-collection-control-pane .skins-collection-search-panel .skins-collection-text-filter .skins-collection-search-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned, .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label { text-transform: uppercase; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned:lang(ko-kr), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label:lang(ko-kr), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned:lang(ja-jp), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label:lang(ja-jp), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned:lang(tr-tr), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label:lang(tr-tr), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned:lang(el-gr), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label:lang(el-gr), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned:lang(th-th), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label:lang(th-th), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned:lang(zh-tw), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label:lang(zh-tw) { text-transform: none; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned:lang(ar-ae) { letter-spacing: 0; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label:lang(ja-jp) { font-size: 13px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label:lang(ar-ae) { letter-spacing: 0; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label { color: #a09b8c; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .count, .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .legacy-count, .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-breakdown .item .count, .skins-collection-control-pane .skins-collection-search-panel .skins-collection-text-filter .skins-collection-search-text { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .count:lang(ja-jp), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .legacy-count:lang(ja-jp), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-breakdown .item .count:lang(ja-jp), .skins-collection-control-pane .skins-collection-search-panel .skins-collection-text-filter .skins-collection-search-text:lang(ja-jp) { font-size: 13px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .count:lang(ar-ae), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .legacy-count:lang(ar-ae), .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-breakdown .item .count:lang(ar-ae), .skins-collection-control-pane .skins-collection-search-panel .skins-collection-text-filter .skins-collection-search-text:lang(ar-ae) { letter-spacing: 0; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .skins-collection-control-pane { width: 194px; margin-right: 35px; } .skins-collection-control-pane .separator { border-top-width: 1px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-color: #1b292a; margin-top: 8px; margin-bottom: 8px; width: 168px; margin-bottom: 0; } .skins-collection-control-pane .skin-collection-details-wrapper .top-frame { background-image: url("/fe/lol-collections/images/skins-viewer/control-pane/control-pane-frame-top.png"); background-repeat: no-repeat; background-size: contain; background-position-y: 1px; height: 145px; } .skins-collection-control-pane .skin-collection-details-wrapper .bottom-frame { background-image: url("/fe/lol-collections/images/skins-viewer/control-pane/control-pane-frame-bot.png"); background-repeat: no-repeat; background-size: contain; height: 14px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper { position: absolute; display: flex; justify-content: center; top: 34px; width: 194px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary { display: flex; flex-direction: column; align-items: center; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-owned-summary-wrapper .skins-collection-owned-summary .skins-collection-total-owned-label { text-transform: uppercase; margin-top: 5px; max-width: 100px; text-align: center; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-sets-and-breakdown { background-image: url("/fe/lol-collections/images/skins-viewer/control-pane/control-pane-frame-mid.png"); background-size: contain; display: flex; flex-direction: column; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets { display: flex; justify-content: center; margin: 12px 20px 0px 20px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set { display: flex; justify-content: space-between; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set { display: flex; flex-direction: column; min-width: 40px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .icon-wrapper { display: flex; justify-content: center; align-items: center; width: 40px; height: 26px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .icon-wrapper .icon { width: 20px; height: 20px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .icon-wrapper .icon-legacy { width: 23px; height: 23px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .icon-wrapper .icon-skinline-set { width: 29px; height: 26px; margin-left: 8px; margin-right: 3px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .icon-wrapper .icon-champion-set { width: 29px; height: 26px; margin-left: 4px; margin-right: 7px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .count { margin-top: 5px; margin-bottom: 0; text-align: center; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-total-sets .top-icon-set .set .legacy-count { margin-top: 5px; margin-bottom: 0; text-align: center; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-breakdown { display: flex; flex-wrap: wrap; padding: 0 10px; justify-content: center; margin: 8px 5px 5px 5px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-breakdown .item { display: flex; width: 36px; flex-direction: column; align-items: center; text-align: center; margin-top: 7px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-breakdown .item .count { margin-bottom: 0px; margin-top: 8px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-breakdown .item .icon-wrapper { display: flex; align-items: center; text-align: center; height: 20px; width: 20px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-breakdown .item .icon-wrapper .icon { max-height: 20px; max-width: 20px; } .skins-collection-control-pane .skin-collection-details-wrapper .skins-collection-breakdown .item .clickable-icon { cursor: pointer; } .skins-collection-control-pane .skins-collection-search-panel .skins-collection-text-filter .skins-collection-search-text { margin-top: 18px; width: 100%; padding: 0 0 0 27px ; height: 30px; line-height: 30px; } .skins-collection-control-pane .skins-collection-search-panel .skins-collection-ownership-filter { margin-top: 12px; } .skins-collection-control-pane .skins-collection-search-panel .skins-collection-ownership-filter.invisible { visibility: hidden; } .skins-collection-control-pane .skins-collection-search-panel .skins-collection-checkbox-label { margin-left: 12px; } .skins-collection-control-pane .skins-collection-search-panel .skins-collection-grouping-options { margin-top: 40px; } .skins-collection-control-pane .skins-collection-search-panel .skins-collection-sort-options { margin-top: 12px; } .skins-collection-control-pane .skins-collection-search-panel lol-uikit-framed-dropdown { --framed-dropdown-scrollable-max-height: 200px; } .skin-grid-component .no-owned-skin .message-container .message, .skin-grid-component .no-owned-collectible .message-container .message, .skin-grid-component .no-matching-skin .message, .skin-grid-component .no-owned-collectibles .message, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-subtitle, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-count, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper.subtitle .group-title, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title { font-family: var(--font-display); } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .universe-name, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-subtitle-wrapper .universe-subtitle { font-family: var(--font-body); } .skin-grid-component .no-owned-skin .message-container .message, .skin-grid-component .no-owned-collectible .message-container .message, .skin-grid-component .no-matching-skin .message, .skin-grid-component .no-owned-collectibles .message, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-subtitle, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-count, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .universe-name, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper.subtitle .group-title, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-subtitle-wrapper .universe-subtitle { -webkit-user-select: none; } .skin-grid-component .no-owned-skin .message-container .message, .skin-grid-component .no-owned-collectible .message-container .message, .skin-grid-component .no-matching-skin .message, .skin-grid-component .no-owned-collectibles .message, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-subtitle, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-count, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .universe-name, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper.subtitle .group-title, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-subtitle-wrapper .universe-subtitle { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .skin-grid-component .no-owned-skin .message-container .message, .skin-grid-component .no-owned-collectible .message-container .message, .skin-grid-component .no-matching-skin .message, .skin-grid-component .no-owned-collectibles .message, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper.subtitle .group-title, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title { text-transform: uppercase; } .skin-grid-component .no-owned-skin .message-container .message:lang(ko-kr), .skin-grid-component .no-owned-collectible .message-container .message:lang(ko-kr), .skin-grid-component .no-matching-skin .message:lang(ko-kr), .skin-grid-component .no-owned-collectibles .message:lang(ko-kr), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title:lang(ko-kr), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(ko-kr), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title:lang(ko-kr), .skin-grid-component .no-owned-skin .message-container .message:lang(ja-jp), .skin-grid-component .no-owned-collectible .message-container .message:lang(ja-jp), .skin-grid-component .no-matching-skin .message:lang(ja-jp), .skin-grid-component .no-owned-collectibles .message:lang(ja-jp), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title:lang(ja-jp), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(ja-jp), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title:lang(ja-jp), .skin-grid-component .no-owned-skin .message-container .message:lang(tr-tr), .skin-grid-component .no-owned-collectible .message-container .message:lang(tr-tr), .skin-grid-component .no-matching-skin .message:lang(tr-tr), .skin-grid-component .no-owned-collectibles .message:lang(tr-tr), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title:lang(tr-tr), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(tr-tr), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title:lang(tr-tr), .skin-grid-component .no-owned-skin .message-container .message:lang(el-gr), .skin-grid-component .no-owned-collectible .message-container .message:lang(el-gr), .skin-grid-component .no-matching-skin .message:lang(el-gr), .skin-grid-component .no-owned-collectibles .message:lang(el-gr), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title:lang(el-gr), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(el-gr), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title:lang(el-gr), .skin-grid-component .no-owned-skin .message-container .message:lang(th-th), .skin-grid-component .no-owned-collectible .message-container .message:lang(th-th), .skin-grid-component .no-matching-skin .message:lang(th-th), .skin-grid-component .no-owned-collectibles .message:lang(th-th), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title:lang(th-th), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(th-th), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title:lang(th-th), .skin-grid-component .no-owned-skin .message-container .message:lang(zh-tw), .skin-grid-component .no-owned-collectible .message-container .message:lang(zh-tw), .skin-grid-component .no-matching-skin .message:lang(zh-tw), .skin-grid-component .no-owned-collectibles .message:lang(zh-tw), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title:lang(zh-tw), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(zh-tw), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title:lang(zh-tw) { text-transform: none; } .skin-grid-component .no-owned-skin .message-container .message, .skin-grid-component .no-owned-collectible .message-container .message, .skin-grid-component .no-matching-skin .message, .skin-grid-component .no-owned-collectibles .message { text-transform: none; } .skin-grid-component .no-owned-skin .message-container .message, .skin-grid-component .no-owned-collectible .message-container .message, .skin-grid-component .no-matching-skin .message, .skin-grid-component .no-owned-collectibles .message, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .skin-grid-component .no-owned-skin .message-container .message:lang(ar-ae), .skin-grid-component .no-owned-collectible .message-container .message:lang(ar-ae), .skin-grid-component .no-matching-skin .message:lang(ar-ae), .skin-grid-component .no-owned-collectibles .message:lang(ar-ae), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title:lang(ar-ae), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title:lang(ar-ae) { letter-spacing: 0; } .skin-grid-component .no-owned-skin .message-container .message, .skin-grid-component .no-owned-collectible .message-container .message, .skin-grid-component .no-matching-skin .message, .skin-grid-component .no-owned-collectibles .message { letter-spacing: 0.025em; } .skin-grid-component .no-owned-skin .message-container .message:lang(ar-ae), .skin-grid-component .no-owned-collectible .message-container .message:lang(ar-ae), .skin-grid-component .no-matching-skin .message:lang(ar-ae), .skin-grid-component .no-owned-collectibles .message:lang(ar-ae) { letter-spacing: 0; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper.subtitle .group-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(ar-ae) { letter-spacing: 0; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .universe-name, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-subtitle-wrapper .universe-subtitle { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .universe-name:lang(ja-jp), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-subtitle-wrapper .universe-subtitle:lang(ja-jp) { font-size: 13px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .universe-name:lang(ar-ae), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-subtitle-wrapper .universe-subtitle:lang(ar-ae) { letter-spacing: 0; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-subtitle, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-count { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-subtitle, .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-count { font-size: 16px; font-weight: 700; font-style: italic; letter-spacing: 0.075em; -webkit-font-smoothing: subpixel-antialiased; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-subtitle:lang(ar-ae), .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-count:lang(ar-ae) { letter-spacing: 0; } .skin-grid-component { position: relative; width: 774px; display: flex; flex-direction: column; justify-content: center; } .skin-grid-component .no-owned-skin, .skin-grid-component .no-owned-collectible { display: flex; flex-direction: column; align-items: center; } .skin-grid-component .no-owned-skin .illustration, .skin-grid-component .no-owned-collectible .illustration { max-width: 102px; } .skin-grid-component .no-owned-skin .message-container, .skin-grid-component .no-owned-collectible .message-container { display: flex; flex-direction: column; align-items: center; margin-top: 10px; margin-bottom: 10px; } .skin-grid-component .no-owned-skin.hidden, .skin-grid-component .no-owned-collectible.hidden { display: none; } .skin-grid-component .no-matching-skin, .skin-grid-component .no-owned-collectibles { display: flex; align-items: flex-start; justify-content: center; } .skin-grid-component .no-matching-skin.hidden, .skin-grid-component .no-owned-collectibles.hidden { display: none; } .skin-grid-component .page-view-wrapper.hidden { display: none; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper { display: flex; position: relative; margin-top: -8px; padding: 8px 0 0 17px ; overflow-y: auto; overflow-x: hidden; flex-direction: row; flex-wrap: wrap; flex-grow: 1; justify-content: flex-start; align-items: flex-start; height: 576px; will-change: auto; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .single-skin-wrapper { display: inline-block; position: relative; margin: 0 6px 10px 0 ; height: 220px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .single-skin-wrapper .thumbnail-image { display: inline-block; border: none; box-shadow: 0 0 0 1px rgba(1,10,19,0.85); -webkit-filter: none; box-sizing: border-box; position: relative; overflow: hidden; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .single-skin-wrapper .thumbnail-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; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .single-skin-wrapper .thumbnail-image .skin-image { max-width: 100%; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .single-skin-wrapper .purchase-button { position: absolute; left: 56px; top: 179px; width: 35px; height: 35px; background-size: contain; background-repeat: no-repeat; background-image: url("/fe/lol-collections/images/skins-viewer/purchase/icon-lock-large.png"); cursor: pointer; pointer-events: all; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .single-skin-wrapper .purchase-button:hover:not([disabled]) { background-image: url("/fe/lol-collections/images/skins-viewer/purchase/icon-lock-large-hover.png"); } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .single-skin-wrapper .purchase-button.disabled { background-image: url("/fe/lol-collections/images/skins-viewer/purchase/icon-lock-large-inactive.png"); pointer-events: none; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .single-skin-wrapper .purchase-button.hidden { display: none; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .single-skin-wrapper.hidden { display: none; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-skins-wrapper { width: 100%; display: flex; flex-wrap: wrap; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-skins-wrapper.hidden { display: none; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper { display: flex; margin-bottom: 15px; flex-basis: 100%; align-items: flex-end; width: 750px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper.hidden { opacity: 0; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-complete-icon-wrapper { display: inline-flex; width: 29px; height: 26px; margin-left: 10px; transition: none; overflow: hidden; position: relative; justify-content: center; align-items: center; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-complete-icon-wrapper.show { margin-right: 12px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-complete-icon-wrapper.show .group-complete-icon { width: 29px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-complete-icon-wrapper.hidden { display: none; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-complete-icon-wrapper .group-complete-icon { bottom: -3px; width: 0px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-complete-icon-wrapper.animate { transition: 250ms ease, margin-right 250ms 300ms ease; margin-right: 12px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-complete-icon-wrapper.animate .group-complete-icon { transition: 400ms ease; width: 29px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title { display: inline; padding: 0 ; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-subtitle { display: inline; margin: 0 0 0 25px ; padding: 0 ; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-count { display: inline; margin-left: 25px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-count .group-total-count { margin-left: 10px; font-size: 14px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .complete-set-video-wrapper { position: absolute; left: -27px; top: -26px; width: 100%; height: 82px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .complete-set-video-wrapper.hidden { display: none; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .complete-set-video-wrapper .complete-set-video { height: 100%; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title-inline-separator-wrapper { display: flex; flex-grow: 1; margin-left: 10px; margin-right: 10px; height: 18px; justify-content: center; align-items: center; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .group-title-inline-separator-wrapper .group-title-inline-separator { display: inline-block; border: solid #1b292a; border-width: 1px 0 0 0; width: 100%; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .universe-name { display: inline-block; text-transform: uppercase; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper .hidden { display: none; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-title-wrapper.subtitle .group-subtitle { font-size: 14px; margin-left: 12px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper { width: 760px; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 0; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title { display: flex; height: 32px; justify-content: center; align-items: center; margin-top: 28px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title .icon { max-height: 16px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-title span { margin-left: 12px; margin-right: 12px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-subtitle-wrapper { height: 50px; width: 100%; display: flex; justify-content: center; align-items: center; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper .universe-background { position: absolute; width: 100%; top: 0; z-index: -1; opacity: 1; height: 270px; background-size: cover; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-title-wrapper.first-title .universe-title { margin-top: 0px; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .universe-separator { width: 750px; border: solid #3c3732; border-width: 1px 0 0 0; margin: 10px 0 0 0; } .skin-grid-component .page-view-wrapper .skin-grid-wrapper .group-separator { width: 750px; border: solid #1b292a; border-width: 1px 0 0 0; margin-bottom: 10px; } .skin-grid-tooltip lol-uikit-tooltip { width: 270px; } .skin-grid-tooltip lol-uikit-tooltip .top-content { display: flex; justify-content: center; align-items: center; } .skin-grid-tooltip lol-uikit-tooltip .gem { display: inline-block; width: 20px; height: 20px; margin-left: 6px; margin-right: 6px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; } .skin-grid-tooltip lol-uikit-tooltip .name { display: inline; } .skin-grid-tooltip lol-uikit-tooltip .hidden { display: none; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container { display: flex; justify-content: center; align-items: center; padding-top: 16px; margin-top: 12px; border-top: thin solid #785a28; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .icon { height: 20px; width: 20px; margin: 0 4px 0 0 ; flex-shrink: 0; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .purchase-info-container { display: flex; justify-content: center; align-items: center; flex-grow: 1; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .purchase-info-container .purchase-info .price { display: flex; align-items: center; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .purchase-info-container .purchase-info .price .cost { margin-left: 2px; margin-right: 5px; margin-bottom: 0; line-height: 15px; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .purchase-info-container .purchase-info .price .currency.RP { background: url("/fe/lol-static-assets/images/icon-rp-32.png") no-repeat 0 0; background-size: contain; margin-left: 10px; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .purchase-info-container .purchase-info .price .currency.IP { background: url("/fe/lol-collections/images/skins-viewer/currencies/icon-blue-essence.png") no-repeat 0 0; background-size: contain; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .purchase-info-container .purchase-info .owned { display: flex; align-items: center; height: 20px; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .purchase-info-container .purchase-info .owned .label { color: #c89b3c; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .purchase-info-container .purchase-info .owned .icon { display: none; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .purchase-info-container .purchase-info .limited { display: flex; align-items: center; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .purchase-info-container .purchase-info .limited .icon { display: none; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .purchase-info-container .purchase-info .limited .label { margin-left: 5px; color: #c89b3c; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .purchase-info-container .purchase-info .legacy { display: flex; align-items: center; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .purchase-info-container .purchase-info .legacy .icon { background: url("/fe/lol-collections/images/skins-viewer/icon-legacy.png") no-repeat 0 0; background-size: contain; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .purchase-info-container .purchase-info .legacy .label { margin-left: 5px; } .skin-grid-tooltip lol-uikit-tooltip .tooltip-container .info-container .chroma-indicator { align-content: flex-end; background: url("/fe/lol-collections/images/skins-viewer/icon-chroma.png") no-repeat 0 0; background-size: contain; } .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; } .skin-viewer-root-component { position: relative; } .skin-viewer-root-component .skins-collection-container { padding: 0; height: calc(100% - 79px); display: flex; flex-direction: row; margin-top: 3px; } .skin-viewer-root-component .spinner-wrapper { width: 100%; height: 442px; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; } .skin-viewer-root-component .spinner-wrapper .loading-spinner { width: 40px; height: 40px; background-image: url("/fe/lol-collections/images/spinner.png"); background-size: 40px; animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; } .skin-viewer-root-component .spinner-wrapper.hidden { display: none; } .skin-viewer-root-component .loading-fade-in { -webkit-animation: fade-in 0.5s forwards; } .skin-viewer-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; } } .skin-viewer-root-component .loading-hidden { opacity: 0; } .collections-backdrop { width: 1055px; height: 718px; background-image: url(/fe/lol-collections/background.png); background-repeat: no-repeat; } .collections-viewport { margin-top: -718px; padding: 139px 0 0 35px; -webkit-user-select: none; } .collections-sub-nav-component { position: absolute; top: 89px; left: 35px; } lol-uikit-navigation-item.hidden { display: none; }