.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-parties/button_close.png); } .decorated-footer .button-img.close:hover { background-image: url(/fe/lol-parties/button_close_hover.png); } .decorated-footer .button-img.close:active { background-image: url(/fe/lol-parties/button_close_click.png); } .decorated-footer .button-img.close:disabled { background-image: url(/fe/lol-parties/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-parties/LeftStraightDefault.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm:hover .left-confirm { background-image: url(/fe/lol-parties/LeftStraightHover.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm:active .left-confirm { background-image: url(/fe/lol-parties/LeftStraightClick.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm.disabled .left-confirm { background-image: url(/fe/lol-parties/LeftStraightDisabled.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm.completed .left-confirm { background-image: url(/fe/lol-parties/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-parties/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-parties/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-parties/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-parties/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-parties/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-parties/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-parties/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-parties/MidDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .middle-confirm:lang(ar-ae) { direction: rtl; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .right-confirm { width: 17px; background-image: url(/fe/lol-parties/RightDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .left-confirm { background-image: url(/fe/lol-parties/LeftHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .middle-confirm { background-image: url(/fe/lol-parties/MidHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .right-confirm { background-image: url(/fe/lol-parties/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-parties/LeftClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .middle-confirm { background-image: url(/fe/lol-parties/MidClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .right-confirm { background-image: url(/fe/lol-parties/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-parties/LeftDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .middle-confirm { background-image: url(/fe/lol-parties/MidDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .right-confirm { background-image: url(/fe/lol-parties/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-parties/LeftCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .middle-confirm { background-image: url(/fe/lol-parties/MidCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .right-confirm { background-image: url(/fe/lol-parties/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-parties/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-parties/Exit_Default.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close[type="back"] .close-icon { background-image: url(/fe/lol-parties/Back_default.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover { background-image: url(/fe/lol-parties/Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover .close-icon { background-image: url(/fe/lol-parties/Exit_Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover[type="back"] .close-icon { background-image: url(/fe/lol-parties/Back_Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active { background-image: url(/fe/lol-parties/Clicked.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active .close-icon { background-image: url(/fe/lol-parties/Exit_Click.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active[type="back"] .close-icon { background-image: url(/fe/lol-parties/Back_click.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled { background-image: url(/fe/lol-parties/Disabled.png); cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled .close-icon { background-image: url(/fe/lol-parties/Exit_Disabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled[type="back"] .close-icon { background-image: url(/fe/lol-parties/Back_Disabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed { cursor: default; background-image: url(/fe/lol-parties/Completed.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed .close-icon { background-image: url(/fe/lol-parties/Checkmark.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed[type="back"] .close-icon { background-image: url(/fe/lol-parties/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; } .parties-view, .parties-view .parties-content { width: 100%; height: 100%; box-sizing: border-box; } .PartiesScreen, .PartiesScreen > .ember-view { width: 100%; height: 100%; } .parties-view { position: relative; -webkit-user-select: none; cursor: default; } .parties-view .parties-content { padding-top: 79px; position: absolute; top: 0; display: flex; flex-direction: column; } .parties-view .parties-content .basic-footer .confirm-button-container { height: 30px; flex-grow: 0; } .parties-view .parties-content .basic-footer .confirm-button-container::before { border: none; } .empty-header-spacer { min-height: 72px; width: 100%; } @-moz-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .parties-view .parties-background { position: relative; overflow: hidden; width: 100%; height: 100%; } .parties-view .parties-background lol-uikit-background-switcher { width: 1055px; height: 1433px; animation-duration: 1s; animation-delay: 0s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0.8; } .parties-view .parties-background.is-showing-party lol-uikit-background-switcher { transform: translate(0, -610px); } .parties-view .parties-background.parties-top-to-btm .bg-current { animation-name: parties-slide-down; } .parties-view .parties-background.parties-btm-to-top .bg-current { animation-name: parties-slide-up; } .parties-view .parties-background .parties-background-mask { position: absolute; width: 100%; height: 100%; top: 0; background: linear-gradient(to bottom, rgba(1,10,19,0.9) 0%, rgba(0,0,0,0) 50%, rgba(1,10,19,0.7) 100%); } .parties-view .parties-background.is-showing-party.is-custom-game .parties-background-mask { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 42%, rgba(0,0,0,0.65) 100%); } @-moz-keyframes parties-slide-down { 0% { transform: translate(0, 0); } 100% { transform: translate(0, -610px); } } @-webkit-keyframes parties-slide-down { 0% { transform: translate(0, 0); } 100% { transform: translate(0, -610px); } } @-o-keyframes parties-slide-down { 0% { transform: translate(0, 0); } 100% { transform: translate(0, -610px); } } @keyframes parties-slide-down { 0% { transform: translate(0, 0); } 100% { transform: translate(0, -610px); } } @-moz-keyframes parties-slide-up { 0% { transform: translate(0, -610px); } 100% { transform: translate(0, 0); } } @-webkit-keyframes parties-slide-up { 0% { transform: translate(0, -610px); } 100% { transform: translate(0, 0); } } @-o-keyframes parties-slide-up { 0% { transform: translate(0, -610px); } 100% { transform: translate(0, 0); } } @keyframes parties-slide-up { 0% { transform: translate(0, -610px); } 100% { transform: translate(0, 0); } } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details, .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-detail-regalia, .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia { font-family: var(--font-display); } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-game-type-details { font-family: var(--font-body); } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details, .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-game-type-details, .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-detail-regalia, .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia { -webkit-user-select: none; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details, .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-game-type-details, .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-detail-regalia, .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details, .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-detail.uppercase, .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-detail-regalia, .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia { text-transform: uppercase; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details:lang(ko-kr), .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-detail.uppercase:lang(ko-kr), .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-detail-regalia:lang(ko-kr), .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia:lang(ko-kr), .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details:lang(ja-jp), .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-detail.uppercase:lang(ja-jp), .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-detail-regalia:lang(ja-jp), .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia:lang(ja-jp), .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details:lang(tr-tr), .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-detail.uppercase:lang(tr-tr), .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-detail-regalia:lang(tr-tr), .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia:lang(tr-tr), .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details:lang(el-gr), .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-detail.uppercase:lang(el-gr), .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-detail-regalia:lang(el-gr), .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia:lang(el-gr), .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details:lang(th-th), .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-detail.uppercase:lang(th-th), .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-detail-regalia:lang(th-th), .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia:lang(th-th), .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details:lang(zh-tw), .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-detail.uppercase:lang(zh-tw), .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-detail-regalia:lang(zh-tw), .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia:lang(zh-tw) { text-transform: none; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details:lang(ar-ae) { letter-spacing: 0; } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-detail-regalia, .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-detail-regalia:lang(ar-ae), .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia:lang(ar-ae) { letter-spacing: 0; } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia { color: #a09b8c; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-game-type-details { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-game-type-details:lang(ja-jp) { font-size: 13px; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-game-type-details:lang(ar-ae) { letter-spacing: 0; } @-moz-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .parties-header-container .lobby-header-wrapper .lobby-header-map-icon { width: 34px; height: 32px; background-size: auto 64px; background-repeat: no-repeat; } .parties-header-container .lobby-header-wrapper .lobby-header-map-icon.game_map_howling_abyss { background-image: url(/fe/lol-parties/map_ha.png); } .parties-header-container .lobby-header-wrapper .lobby-header-map-icon.game_map_summoners_rift { background-image: url(/fe/lol-parties/map_sr.png); } .parties-header-container .lobby-header-wrapper .lobby-header-map-icon.game_map_twisted_treeline { background-image: url(/fe/lol-parties/map_tt.png); } .parties-header-container .lobby-header-wrapper .lobby-header-map-icon.game_map_rotating_game_mode { background-image: url(/fe/lol-parties/map_rgm.png); } .parties-header-container .lobby-header-wrapper .lobby-header-map-icon.game_map_21 { background-image: url(/fe/lol-parties/map_21.png); } .parties-header-container .lobby-header-wrapper .lobby-header-map-icon.game_map_22 { background-image: url(/fe/lol-parties/map_tft.png); } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-detail:after, .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-game-type-detail:after, .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-separator { content: ' '; display: block; background-color: #5b5a56; border: thin solid rgba(1,10,19,0.5); margin-left: 10px; width: 4px; height: 4px; border-radius: 1px; transform: rotate(45deg); float: right; } body[data-locale="de-DE"] .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details { font-size: 22px; } body[data-locale="es-AR"] .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details, body[data-locale="es-ES"] .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details, body[data-locale="es-MX"] .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details { font-size: 20px; } body[data-locale="ru-RU"] .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details { font-size: 18px; } .parties-header-container { overflow: hidden; position: absolute; top: 88px; left: 35px; right: 35px; height: 58px; pointer-events: none; } .parties-header-container.custom-header-container { margin-top: 14px; } .parties-header-container .lobby-header-wrapper { position: absolute; padding-bottom: 5px; display: flex; flex-direction: row; align-items: center; width: 100%; } .parties-header-container .lobby-header-wrapper.custom-header-wrapper { align-items: stretch; } .parties-header-container .lobby-header-wrapper .lobby-header-right { margin-left: 12px; pointer-events: auto; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-details { direction: rtl; text-align: left; color: #f0e6d2; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-detail { display: inline-block; margin-right: 5px; text-shadow: 0px 1px 2px rgba(1,10,19,0.5); max-width: 760px; height: 28px; text-overflow: ellipsis; overflow: hidden; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-detail.hidden { display: none; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-detail:after { font-size: 16px; margin-top: 12px; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-detail:last-child:after { display: none; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-game-type-detail { direction: rtl; text-align: left; display: inline-block; margin-right: 5px; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-game-type-detail:after { margin-top: 4px; } .parties-header-container .lobby-header-wrapper .lobby-header-right .lobby-header-game-type-detail:last-child:after { display: none; } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia { margin-left: 15px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center; text-overflow: ellipsis; overflow: hidden; pointer-events: none; } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-interactable { pointer-events: all; } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-details-container-regalia { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; max-width: 100%; } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-detail-regalia { direction: rtl; text-shadow: 0 1px 2px rgba(1,10,19,0.5); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-separator { flex-shrink: 0; margin-right: 11px; } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia { direction: rtl; text-shadow: 0 1px 2px rgba(1,10,19,0.5); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-sub-detail-regalia.small-spacing { margin-left: 8px; } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-golden-spatula-club-membership { height: 32px; width: 32px; background-image: url(/fe/lol-parties/golden-spatula-club-icon-disabled.png); background-size: contain; } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-golden-spatula-club-membership.enabled { background-image: url(/fe/lol-parties/golden-spatula-club-icon-enabled.png); } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-golden-spatula-club-membership.enabled:hover { background-image: url(/fe/lol-parties/golden-spatula-club-icon-hover.png); } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .show-tutorial-button { display: inline-block; height: 18px; width: 18px; margin-left: 15px; cursor: pointer; } .parties-header-container .lobby-header-wrapper .lobby-header-right-regalia .lobby-header-eligibility { margin-left: 15px; } .parties-debug-queues label { font-family: var(--font-display); } .parties-debug-queues label { -webkit-user-select: none; } .parties-debug-queues label { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .parties-debug-queues label, .parties-debug-queues .parties-debug-tip { text-transform: uppercase; } .parties-debug-queues label:lang(ko-kr), .parties-debug-queues .parties-debug-tip:lang(ko-kr), .parties-debug-queues label:lang(ja-jp), .parties-debug-queues .parties-debug-tip:lang(ja-jp), .parties-debug-queues label:lang(tr-tr), .parties-debug-queues .parties-debug-tip:lang(tr-tr), .parties-debug-queues label:lang(el-gr), .parties-debug-queues .parties-debug-tip:lang(el-gr), .parties-debug-queues label:lang(th-th), .parties-debug-queues .parties-debug-tip:lang(th-th), .parties-debug-queues label:lang(zh-tw), .parties-debug-queues .parties-debug-tip:lang(zh-tw) { text-transform: none; } .parties-debug-queues label { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .parties-debug-queues label:lang(ar-ae) { letter-spacing: 0; } .parties-debug-queues label { text-shadow: 0px 1px 2px rgba(1,10,19,0.5); } .parties-debug-queues { position: absolute; display: none; width: 330px; left: 355px; top: 130px; background-color: #000; border-radius: 6px; } .parties-debug-queues label { display: block; color: #f0e6d2; margin-bottom: 8px; padding-top: 5px; } .parties-debug-queues lol-uikit-flat-button { display: block; margin: 10px; padding-top: 10px; } .parties-debug-queues .parties-debug-title { font-size: 22px; margin: 10px; margin-bottom: 0px; color: #4169e1; } .parties-debug-queues .parties-debug-tip { font-size: 12px; padding-left: 10px; color: #3c3732; } .parties-debug-queues .parties-debug-tab-content { margin: 20px; } .parties-debug-custom-lobby .parties-debug-mode-disabled { color: #f00; } .parties-debug-custom-lobby .parties-debug-custom-game-config { max-height: 400px; } .parties-debug-custom-lobby .parties-debug-custom-lobby-error { color: #fff; height: 80px; padding-top: 10px; font-size: 12px; } .parties-debug-custom-lobby label[for=parties-debug-advanced-options] { cursor: pointer; text-decoration: underline; font-size: 10px; } .parties-debug-custom-lobby .parties-debug-advanced-options.hidden { display: none; } .parties-debug-queues .parties-debug-disabled { color: #f00; } .parties-debug-queues .parties-debug-tb { color: #4169e1; } .parties-debug-queues .parties-debug-selected-queue { display: block; font-size: 18px; margin: 10px; color: #4169e1; } .parties-footer-notifications .parties-beta-watermark { font-family: var(--font-display); } .parties-footer-notifications, lol-uikit-content-block.parties-footer-tooltip[type=tooltip-large] { font-family: var(--font-body); } .parties-footer-notifications, .parties-footer-notifications .parties-beta-watermark, lol-uikit-content-block.parties-footer-tooltip[type=tooltip-large] { -webkit-user-select: none; } .parties-footer-notifications, .parties-footer-notifications .parties-beta-watermark, lol-uikit-content-block.parties-footer-tooltip[type=tooltip-large] { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .parties-footer-notifications .parties-beta-watermark { text-transform: uppercase; } .parties-footer-notifications .parties-beta-watermark:lang(ko-kr), .parties-footer-notifications .parties-beta-watermark:lang(ja-jp), .parties-footer-notifications .parties-beta-watermark:lang(tr-tr), .parties-footer-notifications .parties-beta-watermark:lang(el-gr), .parties-footer-notifications .parties-beta-watermark:lang(th-th), .parties-footer-notifications .parties-beta-watermark:lang(zh-tw) { text-transform: none; } .parties-footer-notifications .parties-beta-watermark { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .parties-footer-notifications .parties-beta-watermark:lang(ja-jp) { font-size: 13px; } .parties-footer-notifications .parties-beta-watermark:lang(ar-ae) { letter-spacing: 0; } .parties-footer-notifications, lol-uikit-content-block.parties-footer-tooltip[type=tooltip-large] { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .parties-footer-notifications:lang(ar-ae), lol-uikit-content-block.parties-footer-tooltip[type=tooltip-large]:lang(ar-ae) { letter-spacing: 0; } .parties-footer-notifications .parties-footer-warning, .parties-footer-notifications .parties-queue-warning-error, .parties-footer-notifications .parties-restrictions-warning-error, .parties-footer-notifications .parties-ready-warning { display: flex; overflow: hidden; } .parties-footer-notifications .parties-notification-warning-icon, .parties-footer-notifications .parties-ready-warning-icon, .parties-footer-notifications .parties-autofill-warning-icon, .parties-footer-notifications .parties-autofill-protection-icon { flex-shrink: 0; display: inline-block; height: 18px; width: 18px; background-repeat: no-repeat; background-size: contain; vertical-align: middle; } .parties-footer-notifications { left: 0px; right: 0px; top: 442px; width: 300px; height: 62px; padding-left: 20px; padding-right: 20px; margin: auto; position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; } .parties-footer-notifications .parties-notification-warning-icon { background-image: url(/fe/lol-parties/icon-warning-grey.png); } .parties-footer-notifications .parties-notification-warning-icon.leader { background-image: url(/fe/lol-parties/icon-warning-red.png); } .parties-footer-notifications .parties-ready-warning-icon { background-image: url(/fe/lol-parties/icon-warning-grey.png); } .parties-footer-notifications .parties-autofill-warning-icon { background-image: url(/fe/lol-parties/icon-warning-blue.png); } .parties-footer-notifications .parties-autofill-protection-icon { background-image: url(/fe/lol-parties/autofill-protection-icon.png); } .parties-footer-notifications .parties-footer-warning { direction: rtl; color: #099eb1; } .parties-footer-notifications .parties-footer-error { text-align: center; font-size: 12px; } .parties-footer-notifications .parties-restrictions-warning-error { font-size: 12px; color: #a09b8c; } .parties-footer-notifications .parties-ready-warning { color: #a09b8c; } .parties-footer-notifications .parties-beta-watermark { margin-top: -60px; background-image: url(/fe/lol-parties/watermark.png); background-size: 64px; background-position: center top; background-repeat: no-repeat; padding-top: 67px; min-width: 70px; text-align: center; letter-spacing: 0.15em; color: #a09b8c; } lol-uikit-content-block.parties-footer-tooltip[type=tooltip-large] { max-width: 400px; text-align: right; } .in-matchmaking-search .parties-invite-info-panel { display: none; } .in-matchmaking-search .parties-point-eligibility { display: none; } .in-matchmaking-search .parties-party-rewards { display: none; } .parties-root { padding-top: 10px; height: 100%; display: flex; flex-direction: column; } .parties-root.parties-hide { display: none; } .parties-player-banners { direction: rtl; display: flex; flex: 1; align-items: center; justify-content: center; margin-top: 63px; max-height: 444px; } .upper-right-container { position: absolute; right: 0; display: flex; align-items: flex-end; flex-direction: column; margin-right: 35px; top: -15px; } .parties-chat-room { display: flex; flex-direction: column; position: fixed; left: 34px; top: 518px; height: 184px; width: 320px; border-radius: 2px; box-sizing: border-box; animation-name: invitePaneEntry; animation-duration: 0.5s; animation-delay: 0.5s; animation-fill-mode: both; } .header-text-gradient { position: absolute; top: 79px; height: 72px; width: 100%; background-image: linear-gradient(rgba(1,0,13,0.3), rgba(1,0,13,0)); pointer-events: none; } .parties-header-button-container { position: absolute; top: 93px; right: 35px; display: flex; align-items: center; } .parties-header-button-container .promotional-content-container { position: relative; margin-right: 10px; } .parties-header-button-container .back-button-container { position: relative; display: none; } .parties-header-button-container .back-button-container .eligibility-loading-spinner { display: none; position: absolute; background-image: url(/fe/lol-parties/spinner.png); background-size: 30px; background-position: center; background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: eligibility-loading-spin 4s linear infinite; } .parties-header-button-container .back-button-container.back-button-shown { display: block; } .parties-header-button-container .back-button-container.back-button-loading { display: block; } .parties-header-button-container .back-button-container.back-button-loading .eligibility-loading-spinner { display: block; } .parties-header-button-container .back-button-container.back-button-loading lol-uikit-flat-button { visibility: hidden; pointer-events: none; } .parties-header-button-container lol-uikit-flat-button { min-width: 130px; } body[data-locale="ja-JP"] .dialog-toast lol-uikit-content-block[type=notification].invite-eligibility { width: auto; } @-moz-keyframes invitePaneEntry { from { opacity: 0; bottom: 0; } to { opacity: 1; bottom: 16px; } } @-webkit-keyframes invitePaneEntry { from { opacity: 0; bottom: 0; } to { opacity: 1; bottom: 16px; } } @-o-keyframes invitePaneEntry { from { opacity: 0; bottom: 0; } to { opacity: 1; bottom: 16px; } } @keyframes invitePaneEntry { from { opacity: 0; bottom: 0; } to { opacity: 1; bottom: 16px; } } @-moz-keyframes eligibility-loading-spin { 100% { -webkit-transform: rotate(360deg); } } @-webkit-keyframes eligibility-loading-spin { 100% { -webkit-transform: rotate(360deg); } } @-o-keyframes eligibility-loading-spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes eligibility-loading-spin { 100% { -webkit-transform: rotate(360deg); } } lol-uikit-content-block.custom-games-error ul li, lol-uikit-content-block.custom-games-error div.custom-games-minor-restriction-details p a { font-family: var(--font-body); } lol-uikit-content-block.custom-games-error ul li, lol-uikit-content-block.custom-games-error div.custom-games-minor-restriction-details p a { -webkit-user-select: none; } lol-uikit-content-block.custom-games-error ul li, lol-uikit-content-block.custom-games-error div.custom-games-minor-restriction-details p a { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } lol-uikit-content-block.custom-games-error ul li { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } lol-uikit-content-block.custom-games-error ul li:lang(ja-jp) { font-size: 13px; } lol-uikit-content-block.custom-games-error ul li:lang(ar-ae) { letter-spacing: 0; } lol-uikit-content-block.custom-games-error div.custom-games-minor-restriction-details p a { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } lol-uikit-content-block.custom-games-error div.custom-games-minor-restriction-details p a:lang(ja-jp) { font-size: 13px; } lol-uikit-content-block.custom-games-error div.custom-games-minor-restriction-details p a:lang(ar-ae) { letter-spacing: 0; } lol-uikit-content-block.custom-games-error div.custom-games-minor-restriction-details p a { color: #0596aa; text-decoration: none; } lol-uikit-content-block.custom-games-error div.custom-games-minor-restriction-details p a:hover, lol-uikit-content-block.custom-games-error div.custom-games-minor-restriction-details p a.hover { color: #cdfafa; } lol-uikit-content-block.custom-games-error div.custom-games-minor-restriction-details p a:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-parties/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } lol-uikit-content-block.custom-games-error div.custom-games-minor-restriction-details p a:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } lol-uikit-content-block.custom-games-error div.custom-games-minor-restriction-details p a:hover:after { background-color: #cdfafa; } lol-uikit-content-block.custom-games-error { text-align: right; } lol-uikit-content-block.custom-games-error h5 { margin-bottom: 10px; } lol-uikit-content-block.custom-games-error ul { margin: 0; } lol-uikit-content-block.custom-games-error div.custom-games-minor-restriction-details p { margin-top: 8px; } .parties-invite-dropzone-tooltip { font-family: var(--font-body); } .parties-invite-dropzone-tooltip { -webkit-user-select: none; } .parties-invite-dropzone-tooltip { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .parties-invite-dropzone-tooltip { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .parties-invite-dropzone-tooltip:lang(ja-jp) { font-size: 13px; } .parties-invite-dropzone-tooltip:lang(ar-ae) { letter-spacing: 0; } .parties-lower-section { display: flex; flex-direction: column; flex: 1 0 0; position: relative; padding: 0 35px 0; opacity: 0; max-height: 558px; } .parties-lower-section.droppable-available .parties-point-eligibility { opacity: 0; } .parties-lower-section.droppable-available .parties-footer-section, .parties-lower-section.droppable-available .parties-party-rewards { opacity: 0; } .parties-lower-section.droppable-available .parties-invite-info-panel { animation-fill-mode: backwards; } .parties-lower-section.droppable-available .parties-invite-dropzone { display: flex; } .parties-lower-section.droppable-dropping .parties-invite-dropzone-icon { background-image: url(/fe/lol-parties/drop-arrow-hover.png); } .parties-lower-section.droppable-dropping .parties-header-separator { opacity: 0; } .parties-lower-section.droppable-dropping .parties-invite-dropzone-tooltip { color: #f0e6d2; } .parties-lower-section.droppable-dropping .parties-invite-dropzone { border-image-source: -webkit-linear-gradient(90deg, #f0e6d2 3%, #c89b3c 100%); } .parties-lower-section.droppable-dropping .parties-invite-dropzone::before { transform: scale(0.97, 0.95); opacity: 0.2; } .parties-lower-section.parties-lower-section-fade-in { animation: partiesLowerSectionAnimation 1s; opacity: 1; } .parties-lower-section.parties-lower-section-fade-in.animations-disabled { animation: none; } .parties-invite-dropzone { position: absolute; top: 0; right: 35px; bottom: 35px; left: 34px; display: none; flex-direction: column; align-items: center; justify-content: center; border-image: -webkit-linear-gradient(90deg, #c8aa6e 3%, #785a28 100%); border-style: solid; border-width: 2px; border-image-slice: 1; background: rgba(1,10,19,0.5); } .parties-invite-dropzone::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-image: -webkit-linear-gradient(90deg, #f0e6d2 3%, #c89b3c 100%); border-style: solid; border-width: 1px; border-image-slice: 1; opacity: 0; } .parties-invite-dropzone-icon { margin: 5px; background-image: url(/fe/lol-parties/drop-arrow.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 49px; height: 41px; animation: parties-dropzone-bounce 0.7s ease-in-out infinite alternate; } .parties-invite-dropzone-tooltip { color: #c89b3c; white-space: nowrap; } @-moz-keyframes partiesLowerSectionAnimation { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes partiesLowerSectionAnimation { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes partiesLowerSectionAnimation { from { opacity: 0; } to { opacity: 1; } } @keyframes partiesLowerSectionAnimation { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes parties-dropzone-drop-in { 0% { transform: translateY(-120px) scale(0.5); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @-webkit-keyframes parties-dropzone-drop-in { 0% { transform: translateY(-120px) scale(0.5); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @-o-keyframes parties-dropzone-drop-in { 0% { transform: translateY(-120px) scale(0.5); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes parties-dropzone-drop-in { 0% { transform: translateY(-120px) scale(0.5); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @-moz-keyframes parties-dropzone-bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } @-webkit-keyframes parties-dropzone-bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } @-o-keyframes parties-dropzone-bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } @keyframes parties-dropzone-bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } .parties-placeholder-banner:nth-of-type(1) { order: 20; } .parties-placeholder-banner:nth-of-type(2) { order: 40; } .parties-placeholder-banner:nth-of-type(3) { order: 10; } .parties-placeholder-banner:nth-of-type(4) { order: 50; } .parties-placeholder-banner { margin: 0 6px; position: relative; } .parties-placeholder-banner { transform: translate(0, -30px); transition: transform 0.5s cubic-bezier(0.2, 0.9, 0, 1), opacity 0.4s ease-out; top: -125px; width: 178px; height: 550px; } .placeholder-invite-button { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 30px; } .placeholder-invited-container { position: absolute; width: 100%; height: 100%; } .placeholder-invited-container .placeholder-invited-image { background-image: url(/fe/lol-parties/invited-banner.png); background-size: contain; background-repeat: no-repeat; background-position-y: -1px; width: 100%; height: 100%; } .placeholder-invited-container .placeholder-invited-video { width: 100%; height: 100%; opacity: 0; animation: 0.5s ease-in-out parties-invited-banner-fadein 0.5s 1 normal forwards; } .in-matchmaking-search .parties-placeholder-banner:nth-of-type(1) { transform: translate(5px, -40px); } .in-matchmaking-search .parties-placeholder-banner:nth-of-type(2) { transform: translate(-5px, -40px); } .in-matchmaking-search .parties-placeholder-banner:nth-of-type(3) { transform: translate(5px, -55px); } .in-matchmaking-search .parties-placeholder-banner:nth-of-type(4) { transform: translate(-5px, -55px); } .in-matchmaking-search .parties-placeholder-banner:nth-of-type(5) { display: none; } @-moz-keyframes parties-invited-banner-fadein { 0% { opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes parties-invited-banner-fadein { 0% { opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes parties-invited-banner-fadein { 0% { opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1; } } @keyframes parties-invited-banner-fadein { 0% { opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1; } } .parties-player-banner-main { order: 30; } .parties-player-banner:nth-of-type(1) { order: 20; } .parties-player-banner:nth-of-type(2) { order: 40; } .parties-player-banner:nth-of-type(3) { order: 10; } .parties-player-banner:nth-of-type(4) { order: 50; } .parties-player-banner, .parties-player-banner-main { margin: 0 6px; position: relative; } .parties-player-banner { transform: translate(0, -30px); transition: transform 0.5s cubic-bezier(0.2, 0.9, 0, 1), opacity 0.4s ease-out, -webkit-filter 250ms linear; top: -140px; } .parties-player-banner:hover { -webkit-filter: brightness(1.15); } .parties-player-banner-main { top: -145px; transition: transform 0.5s cubic-bezier(0.2, 0.9, 0, 1), opacity 0.4s ease-out; } .player-not-ready-container { position: absolute; width: 100%; height: 100%; top: 15px; } .player-not-ready-container .player-not-ready-image { background-image: url(/fe/lol-parties/invited-banner.png); background-size: contain; background-repeat: no-repeat; background-position-y: -1px; width: 100%; height: 100%; } .player-not-ready-container .player-not-ready-video { width: 100%; height: 100%; } .in-matchmaking-search .parties-player-banner:nth-of-type(1) { transform: translate(5px, -40px); } .in-matchmaking-search .parties-player-banner:nth-of-type(2) { transform: translate(-5px, -40px); } .in-matchmaking-search .parties-player-banner:nth-of-type(3) { transform: translate(5px, -55px); } .in-matchmaking-search .parties-player-banner:nth-of-type(4) { transform: translate(-5px, -55px); } .in-matchmaking-search .parties-player-banner:nth-of-type(5) { display: none; } .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { font-family: var(--font-display); } .player-party-controls .parties-player-labels-wrapper .club-tag-container { font-family: var(--font-body); } .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { -webkit-user-select: none; } .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { text-transform: uppercase; } .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ko-kr), .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ko-kr), .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ja-jp), .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ja-jp), .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(tr-tr), .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(tr-tr), .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(el-gr), .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(el-gr), .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(th-th), .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(th-th), .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(zh-tw), .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(zh-tw) { text-transform: none; } .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { text-transform: none; } .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ar-ae) { letter-spacing: 0; } .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { letter-spacing: 0.025em; } .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ar-ae) { letter-spacing: 0; } .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ar-ae) { letter-spacing: 0; } .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { letter-spacing: 0.025em; } .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ar-ae) { letter-spacing: 0; } .player-party-controls { position: absolute; width: 100%; height: 100%; left: 50%; transform: translateX(-50%); } .player-party-controls .parties-player-labels-wrapper { position: absolute; width: 100%; min-height: 50px; display: flex; flex-direction: column; justify-content: flex-start; } .player-party-controls .parties-player-labels-wrapper .parties-player-name-container { display: flex; flex-direction: row; justify-content: center; min-height: 25px; } .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-leader-icon { background-image: url(/fe/lol-parties/captain-icon-crown.png); background-size: contain; background-repeat: no-repeat; min-width: 18px; width: 18px; height: 18px; margin: 0 0 0 5px; background-position-y: 1px; } .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; } .player-party-controls .parties-player-labels-wrapper .club-tag-container { display: flex; flex-direction: column; align-items: center; font-size: 16px; } .player-party-controls .parties-player-labels-wrapper .club-tag-container .club-mark { display: none; } .player-party-controls .player-lobby-restrictions { position: absolute; width: 100%; background-image: url(/fe/lol-parties/icon-warning-grey.png); background-position: center; background-size: contain; background-repeat: no-repeat; } .player-party-controls .player-lobby-restrictions.leader { background-image: url(/fe/lol-parties/icon-warning-red.png); } .player-party-controls .parties-player-positions { position: absolute; left: 50%; } .player-party-controls.other-player-controls .player-party-tools { position: absolute; width: 100%; display: flex; top: 150px; justify-content: center; } .player-party-controls.other-player-controls .parties-player-labels-wrapper { top: 180px; } .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container { align-items: flex-start; } .player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { color: #a09b8c; max-width: 140px; } .player-party-controls.other-player-controls .lol-not-ready-loader { position: absolute; width: 100%; top: 385px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .player-party-controls.other-player-controls .lol-not-ready-loader .lol-not-ready-loader-segment { display: inline-block; width: 4px; height: 4px; background-color: #f0e6d2; border-radius: 2px; margin-left: 2px; margin-right: 2px; } .player-party-controls.other-player-controls .lol-not-ready-loader .lol-not-ready-loader-segment:nth-of-type(1) { animation: bounceLoader 1s -0.2s ease infinite; } .player-party-controls.other-player-controls .lol-not-ready-loader .lol-not-ready-loader-segment:nth-of-type(2) { animation: bounceLoader 1s -0.1s ease infinite; } .player-party-controls.other-player-controls .lol-not-ready-loader .lol-not-ready-loader-segment:nth-of-type(3) { animation: bounceLoader 1s 0s ease infinite; } .player-party-controls.other-player-controls .player-lobby-restrictions { width: auto; min-width: 18px; min-height: 18px; top: 390px; right: 30px; } .player-party-controls.other-player-controls .parties-player-positions { top: 420px; margin-left: 1px; cursor: default; } .player-party-controls.main-player-controls .parties-player-labels-wrapper { top: 170px; } .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container { align-items: center; } .player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { color: #fabe0a; max-width: 170px; } .player-party-controls.main-player-controls .player-lobby-restrictions { width: auto; min-width: 18px; min-height: 18px; top: 410px; right: 30px; } .player-party-controls.main-player-controls .parties-player-positions { top: 450px; } @-moz-keyframes bounceLoader { 0%, 60% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(1.4) scaleX(1.4); } } @-webkit-keyframes bounceLoader { 0%, 60% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(1.4) scaleX(1.4); } } @-o-keyframes bounceLoader { 0%, 60% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(1.4) scaleX(1.4); } } @keyframes bounceLoader { 0%, 60% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(1.4) scaleX(1.4); } } .position-tooltip h5 { font-family: var(--font-display); } .position-tooltip { font-family: var(--font-body); } .position-tooltip, .position-tooltip h5 { -webkit-user-select: none; } .position-tooltip, .position-tooltip h5 { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .position-tooltip h5 { text-transform: uppercase; } .position-tooltip h5:lang(ko-kr), .position-tooltip h5:lang(ja-jp), .position-tooltip h5:lang(tr-tr), .position-tooltip h5:lang(el-gr), .position-tooltip h5:lang(th-th), .position-tooltip h5:lang(zh-tw) { text-transform: none; } .position-tooltip h5 { text-transform: none; } .position-tooltip h5 { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .position-tooltip h5:lang(ar-ae) { letter-spacing: 0; } .position-tooltip h5 { letter-spacing: 0.0375em; } .position-tooltip h5:lang(ar-ae) { letter-spacing: 0; } .position-tooltip { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .position-tooltip:lang(ar-ae) { letter-spacing: 0; } .parties-player-positions { text-align: center; position: relative; cursor: pointer; width: auto; height: auto; } .parties-player-positions lol-parties-player-position { position: absolute; } .parties-player-positions lol-parties-player-position.primary { transition: 500ms cubic-bezier(0, 0, 0, 1); left: -70px; top: 4px; } .parties-player-positions lol-parties-player-position.secondary { left: 22px; top: 4px; transition: 500ms cubic-bezier(0, 0, 0, 1); } .parties-player-positions.single-selector lol-parties-player-position.primary { transform: translateX(46px) rotate(-45deg); } .parties-player-positions.single-selector lol-parties-player-position.secondary { transform: translateX(-45px) rotate(-45deg) scale(0.8); opacity: 0; } .parties-player-positions.is-member lol-parties-player-position.primary { left: -65px; top: 0px; } .parties-player-positions.is-member lol-parties-player-position.secondary { left: 10px; top: 0px; opacity: 1; } .parties-player-positions.is-member.single-selector lol-parties-player-position.primary { transform: translateX(39px) rotate(-45deg); } .parties-player-positions.is-member.single-selector lol-parties-player-position.secondary { transform: translateX(-39px) rotate(-45deg); opacity: 0; } .parties-player-positions.play-intro-animation.parties-player-positions:not(.single-selector) lol-parties-player-position.primary { animation: animatePrimaryIntro 0.3s 1; } .parties-player-positions.play-intro-animation.parties-player-positions:not(.single-selector) lol-parties-player-position.secondary { animation: animateSecondaryIntro 0.3s 1; } @-moz-keyframes animatePrimaryIntro { 0% { transform: translateX(45px) rotate(-45deg); } 100% { transform: translateX(0px) rotate(-45deg); } } @-webkit-keyframes animatePrimaryIntro { 0% { transform: translateX(45px) rotate(-45deg); } 100% { transform: translateX(0px) rotate(-45deg); } } @-o-keyframes animatePrimaryIntro { 0% { transform: translateX(45px) rotate(-45deg); } 100% { transform: translateX(0px) rotate(-45deg); } } @keyframes animatePrimaryIntro { 0% { transform: translateX(45px) rotate(-45deg); } 100% { transform: translateX(0px) rotate(-45deg); } } @-moz-keyframes animateSecondaryIntro { 0% { transform: translateX(-45px) rotate(-45deg); } 100% { transform: translateX(0px) rotate(-45deg); } } @-webkit-keyframes animateSecondaryIntro { 0% { transform: translateX(-45px) rotate(-45deg); } 100% { transform: translateX(0px) rotate(-45deg); } } @-o-keyframes animateSecondaryIntro { 0% { transform: translateX(-45px) rotate(-45deg); } 100% { transform: translateX(0px) rotate(-45deg); } } @keyframes animateSecondaryIntro { 0% { transform: translateX(-45px) rotate(-45deg); } 100% { transform: translateX(0px) rotate(-45deg); } } .custom-invite-header .custom-invite-header-text, .split-panel-header-title, .split-panel-header-left, .split-panel-header-right { font-family: var(--font-display); } .parties-invite-info-panel-list, .invite-privilege-tooltip-content { font-family: var(--font-body); } .custom-invite-header .custom-invite-header-text, .split-panel-header-title, .split-panel-header-left, .split-panel-header-right { font-family: var(--font-display); } .parties-invite-info-panel-list, .invite-privilege-tooltip-content { font-family: var(--font-body); } .parties-invite-info-panel-list, .custom-invite-header .custom-invite-header-text, .invite-privilege-tooltip-content, .split-panel-header-title, .split-panel-header-left, .split-panel-header-right { -webkit-user-select: none; } .parties-invite-info-panel-list, .custom-invite-header .custom-invite-header-text, .invite-privilege-tooltip-content, .split-panel-header-title, .split-panel-header-left, .split-panel-header-right { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .custom-invite-header .custom-invite-header-text, .split-panel-header-title, .split-panel-header-left, .split-panel-header-right { text-transform: uppercase; } .custom-invite-header .custom-invite-header-text:lang(ko-kr), .split-panel-header-title:lang(ko-kr), .split-panel-header-left:lang(ko-kr), .split-panel-header-right:lang(ko-kr), .custom-invite-header .custom-invite-header-text:lang(ja-jp), .split-panel-header-title:lang(ja-jp), .split-panel-header-left:lang(ja-jp), .split-panel-header-right:lang(ja-jp), .custom-invite-header .custom-invite-header-text:lang(tr-tr), .split-panel-header-title:lang(tr-tr), .split-panel-header-left:lang(tr-tr), .split-panel-header-right:lang(tr-tr), .custom-invite-header .custom-invite-header-text:lang(el-gr), .split-panel-header-title:lang(el-gr), .split-panel-header-left:lang(el-gr), .split-panel-header-right:lang(el-gr), .custom-invite-header .custom-invite-header-text:lang(th-th), .split-panel-header-title:lang(th-th), .split-panel-header-left:lang(th-th), .split-panel-header-right:lang(th-th), .custom-invite-header .custom-invite-header-text:lang(zh-tw), .split-panel-header-title:lang(zh-tw), .split-panel-header-left:lang(zh-tw), .split-panel-header-right:lang(zh-tw) { text-transform: none; } .custom-invite-header .custom-invite-header-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .custom-invite-header .custom-invite-header-text:lang(ar-ae) { letter-spacing: 0; } .custom-invite-header .custom-invite-header-text { color: #a09b8c; } .split-panel-header-title, .split-panel-header-left, .split-panel-header-right { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .split-panel-header-title:lang(ja-jp), .split-panel-header-left:lang(ja-jp), .split-panel-header-right:lang(ja-jp) { font-size: 13px; } .split-panel-header-title:lang(ar-ae), .split-panel-header-left:lang(ar-ae), .split-panel-header-right:lang(ar-ae) { letter-spacing: 0; } .split-panel-header-title, .split-panel-header-left, .split-panel-header-right { color: #a09b8c; } .parties-invite-info-panel-list { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .parties-invite-info-panel-list:lang(ar-ae) { letter-spacing: 0; } .invite-privilege-tooltip-content { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .invite-privilege-tooltip-content:lang(ja-jp) { font-size: 13px; } .invite-privilege-tooltip-content:lang(ar-ae) { letter-spacing: 0; } .parties-invite-info-panel-body::-webkit-scrollbar, .parties-invite-info-panel-body ::-webkit-scrollbar { width: 11px; background-color: transparent; } .parties-invite-info-panel-body::-webkit-scrollbar-thumb, .parties-invite-info-panel-body ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 6px; background-clip: padding-box; min-height: 32px; background-color: #785a28; } .parties-invite-info-panel-body::-webkit-scrollbar-thumb:hover, .parties-invite-info-panel-body ::-webkit-scrollbar-thumb:hover { background-color: #c8aa6e; } .parties-invite-info-panel-body::-webkit-scrollbar-thumb:active, .parties-invite-info-panel-body ::-webkit-scrollbar-thumb:active { background-color: #463714; } .parties-invite-info-panel-body::-webkit-scrollbar-thumb:disabled, .parties-invite-info-panel-body ::-webkit-scrollbar-thumb:disabled { background-color: #a09b8c; } .custom-invite-header .custom-invite-header-text, .split-panel-header-title, .split-panel-header-left, .split-panel-header-right { font-family: var(--font-display); } .parties-invite-info-panel-list, .invite-privilege-tooltip-content { font-family: var(--font-body); } .parties-invite-info-panel-list, .custom-invite-header .custom-invite-header-text, .invite-privilege-tooltip-content, .split-panel-header-title, .split-panel-header-left, .split-panel-header-right { -webkit-user-select: none; } .parties-invite-info-panel-list, .custom-invite-header .custom-invite-header-text, .invite-privilege-tooltip-content, .split-panel-header-title, .split-panel-header-left, .split-panel-header-right { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .custom-invite-header .custom-invite-header-text, .split-panel-header-title, .split-panel-header-left, .split-panel-header-right { text-transform: uppercase; } .custom-invite-header .custom-invite-header-text:lang(ko-kr), .split-panel-header-title:lang(ko-kr), .split-panel-header-left:lang(ko-kr), .split-panel-header-right:lang(ko-kr), .custom-invite-header .custom-invite-header-text:lang(ja-jp), .split-panel-header-title:lang(ja-jp), .split-panel-header-left:lang(ja-jp), .split-panel-header-right:lang(ja-jp), .custom-invite-header .custom-invite-header-text:lang(tr-tr), .split-panel-header-title:lang(tr-tr), .split-panel-header-left:lang(tr-tr), .split-panel-header-right:lang(tr-tr), .custom-invite-header .custom-invite-header-text:lang(el-gr), .split-panel-header-title:lang(el-gr), .split-panel-header-left:lang(el-gr), .split-panel-header-right:lang(el-gr), .custom-invite-header .custom-invite-header-text:lang(th-th), .split-panel-header-title:lang(th-th), .split-panel-header-left:lang(th-th), .split-panel-header-right:lang(th-th), .custom-invite-header .custom-invite-header-text:lang(zh-tw), .split-panel-header-title:lang(zh-tw), .split-panel-header-left:lang(zh-tw), .split-panel-header-right:lang(zh-tw) { text-transform: none; } .custom-invite-header .custom-invite-header-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .custom-invite-header .custom-invite-header-text:lang(ar-ae) { letter-spacing: 0; } .custom-invite-header .custom-invite-header-text { color: #a09b8c; } .split-panel-header-title, .split-panel-header-left, .split-panel-header-right { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .split-panel-header-title:lang(ja-jp), .split-panel-header-left:lang(ja-jp), .split-panel-header-right:lang(ja-jp) { font-size: 13px; } .split-panel-header-title:lang(ar-ae), .split-panel-header-left:lang(ar-ae), .split-panel-header-right:lang(ar-ae) { letter-spacing: 0; } .split-panel-header-title, .split-panel-header-left, .split-panel-header-right { color: #a09b8c; } .parties-invite-info-panel-list { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .parties-invite-info-panel-list:lang(ar-ae) { letter-spacing: 0; } .invite-privilege-tooltip-content { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .invite-privilege-tooltip-content:lang(ja-jp) { font-size: 13px; } .invite-privilege-tooltip-content:lang(ar-ae) { letter-spacing: 0; } .invite-privilege-tooltip-content { text-align: center; color: #a09b8c; margin: 15px; width: 110px; } .parties-invite-info-panel-body { overflow-y: auto; flex: 1 0 0; border-bottom: thin solid #785a28; transition: opacity 0.15s ease-in-out; } .parties-invite-info-panel-body.collapsed { opacity: 0; } .parties-invite-info-panel-list { direction: rtl; padding: 0; margin: 0; } .parties-invite-info-panel-list:not(.viewing-suggested) { display: flex; list-style-type: none; flex-flow: row wrap; margin-left: -7px; margin-top: 3px; } .parties-invite-info-panel-list:not(.viewing-suggested) .parties-invite-info-panel-player { line-height: 1.7em; display: flex; align-self: center; } .parties-invite-info-panel-list:not(.viewing-suggested) .parties-invite-info-panel-player:nth-child(odd) { width: 155px; } .parties-invite-info-panel-list:not(.viewing-suggested) .parties-invite-info-panel-player:nth-child(even) { width: 145px; } .parties-invite-info-panel-list:not(.viewing-suggested) .parties-invite-info-panel-player .invite-info-tag { display: none; } .parties-invite-info-panel-list.viewing-suggested .parties-invite-info-panel-player { display: flex; align-items: center; list-style-type: none; line-height: 1.7em; padding: 0 10px 0 0; } .parties-invite-info-panel-list.viewing-suggested .parties-invite-info-panel-player .invite-info-name { margin: 0 13px 0 0; flex: none; } .parties-invite-info-panel-list.parties-invite-info-is-custom .parties-invite-info-panel-player:nth-child(odd) { margin-left: 0px; } .parties-invite-info-panel { display: flex; flex-direction: column; position: absolute; right: 36px; bottom: 16px; height: 139px; width: 319px; border-radius: 2px; box-sizing: border-box; animation-name: invitePaneEntry; animation-duration: 0.5s; animation-delay: 0.5s; animation-fill-mode: both; transition: height 0.15s ease-in-out; } .parties-invite-info-panel.collapsed { height: 35px; } .custom-invite-header { display: flex; } .custom-invite-header .custom-invite-header-text { direction: rtl; color: #a09b8c; display: flex; flex-direction: row-reverse; position: relative; line-height: 32px; flex: 2 0 0; } .parties-invite-info-empty { display: flex; flex-direction: row-reverse; margin-left: 7px; width: 100%; } .parties-invite-info-empty .parties-invite-info-empty-text { color: #a09b8c; line-height: 2.7em; } .split-panel-header { display: flex; position: relative; margin-bottom: 2px; justify-content: space-between; align-items: center; border-bottom: 1px solid #3c3c41; flex: 0 0 31px; } .split-panel-header:hover { background: rgba(240,230,210,0.1); } .split-panel-header:after { content: ''; display: block; width: 50%; height: 3px; background: #785a28; position: absolute; bottom: -1px; left: 0; transition: left 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44); } .split-panel-header.left-tab-active:after { left: 0; } .split-panel-header.right-tab-active:after { left: 50%; } .split-panel-header-title { direction: rtl; color: #cdbe91; line-height: 10px; padding: 12px 0; flex-grow: 1; text-align: center; } .split-panel-header-title:hover { cursor: pointer; color: #f0e6d2; } .split-panel-header-title:active { color: #c8aa6e; } .split-panel-header-title.active { color: #cdbe91; } .split-panel-header-title.active:active, .split-panel-header-title.active:hover { cursor: default; color: #f0e6d2; } .split-panel-header-title.disabled { color: #3c3c41; cursor: default; } .split-panel-arrow { display: flex; justify-content: flex-end; align-items: center; padding: 0.25em 0.1em; cursor: pointer; transition: color 150ms ease-out; } .split-panel-arrow:hover::before { border-top-color: #f0e6d2; } .split-panel-arrow::before { content: ''; border-left: 5.196px solid transparent; border-right: 5.196px solid transparent; border-top: 6px solid #a09b8c; transform: rotate(0deg); margin: 6px 10px; transition: transform 0.2s cubic-bezier(0, 0, 0, 1); } .split-panel-arrow.collapsed::before { transform: rotate(90deg); } .parties-suggested-player { color: #cdbe91; } .parties-suggested-player .invite-info-name:hover { cursor: pointer; } .parties-suggested-player::before { content: ''; -webkit-mask: url(/fe/lol-parties/icon-add.png) no-repeat center; -webkit-mask-size: 18px; background-color: #c8aa6e; width: 18px; height: 18px; } .parties-suggested-player:hover { color: #f0e6d2; cursor: pointer; background-color: rgba(160,155,140,0.3); } .parties-suggested-player:hover .parties-remove-suggested-player { display: block; } .parties-suggested-player:hover::before { background-color: #f0e6d2; } .parties-suggested-player:active { color: #3c3c41; } .parties-suggested-player:active::before { background-color: #3c3c41; } .invite-info-name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 0 10px 0 0; } .invite-info-tag { margin: 1px 0 0 5px; } .parties-accepted-invite { color: #a09b8c; } .parties-accepted-invite:before { content: ''; background-image: url(/fe/lol-parties/invite-accepted-checkmark.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 72px; height: 72px; display: inline-block; margin: 0 6px; align-self: center; width: 18px; min-width: 18px; height: 18px; } .parties-declined-invite { color: #a09b8c; } .parties-declined-invite:before { content: ''; background-image: url(/fe/lol-parties/icon-x.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 72px; height: 72px; display: inline-block; margin: 0 6px; align-self: center; width: 18px; min-width: 18px; height: 18px; } .parties-declined-invite .invite-info-name { opacity: 0.6; } .parties-kicked-invite, .parties-error-invite { color: #a09b8c; } .parties-kicked-invite:before, .parties-error-invite:before { content: ''; background-image: url(/fe/lol-parties/icon-kicked.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 72px; height: 72px; display: inline-block; margin: 0 6px; align-self: center; width: 18px; min-width: 18px; height: 18px; } .parties-kicked-invite .invite-info-name, .parties-error-invite .invite-info-name { opacity: 0.6; } .parties-pending-invite { color: #a09b8c; } .parties-remove-suggested-player { display: none; cursor: pointer; -webkit-mask: url(/fe/lol-parties/custom-kick.png) no-repeat center; -webkit-mask-size: 18px; background-color: #c8aa6e; width: 18px; height: 18px; border: none; outline: none; margin: 0 auto 0 0; } .parties-remove-suggested-player:hover:not(:disabled) { background-color: #f0e6d2; } .parties-remove-suggested-player:active:not(:disabled) { background-color: #463714; } .lol-pending-loader { display: flex; align-items: center; justify-content: space-between; width: 16px; margin: 0 6px 0 8px; box-sizing: border-box; } .lol-pending-loader-segment { display: inline-block; width: 4px; height: 4px; background-color: #f0e6d2; border-radius: 2px; } .lol-pending-loader-segment:nth-of-type(1) { animation: bounceLoader 1s -0.2s ease infinite; } .lol-pending-loader-segment:nth-of-type(2) { animation: bounceLoader 1s -0.1s ease infinite; } .lol-pending-loader-segment:nth-of-type(3) { animation: bounceLoader 1s 0s ease infinite; } @-moz-keyframes bounceLoader { 0%, 60% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(1.4) scaleX(1.4); } } @-webkit-keyframes bounceLoader { 0%, 60% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(1.4) scaleX(1.4); } } @-o-keyframes bounceLoader { 0%, 60% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(1.4) scaleX(1.4); } } @keyframes bounceLoader { 0%, 60% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(1.4) scaleX(1.4); } } .player-management-button-tooltip-content { font-family: var(--font-body); } .player-management-button-tooltip-content { -webkit-user-select: none; } .player-management-button-tooltip-content { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .player-management-button-tooltip-content { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .player-management-button-tooltip-content:lang(ja-jp) { font-size: 13px; } .player-management-button-tooltip-content:lang(ar-ae) { letter-spacing: 0; } .player-management-button-tooltip-content { font-family: var(--font-body); } .player-management-button-tooltip-content { -webkit-user-select: none; } .player-management-button-tooltip-content { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .player-management-button-tooltip-content { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .player-management-button-tooltip-content:lang(ja-jp) { font-size: 13px; } .player-management-button-tooltip-content:lang(ar-ae) { letter-spacing: 0; } .player-management-button-tooltip-content { text-align: center; color: #a09b8c; margin: 15px; width: 110px; } .player-party-controls:hover:not(:disabled) .player-management-button-kick { opacity: 1; } .player-party-controls:hover:not(:disabled) .player-management-button-add-friend { opacity: 1; } .player-party-controls:hover:not(:disabled) .player-management-button-options { opacity: 1; } .player-management-button-kick { background: none no-repeat; background-image: url(/fe/lol-parties/banner-kick.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 31.75px; height: 31.75px; display: block; cursor: pointer; padding: 0; border: none; transition: background-image 0.1s ease-out, opacity 250ms ease-out; outline: none; margin-right: -1px; opacity: 0; } .player-management-button-kick:hover:not(:disabled) { background-image: url(/fe/lol-parties/banner-kick-hover.png); } .player-management-button-kick:active:not(:disabled) { transition-duration: 0s; background-image: url(/fe/lol-parties/banner-kick-click.png); } .player-management-button-kick:disabled { cursor: auto; } .player-management-button-add-friend { background: none no-repeat; background-image: url(/fe/lol-parties/banner-add-friend.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 31.75px; height: 31.75px; display: block; cursor: pointer; padding: 0; border: none; transition: background-image 0.1s ease-out, opacity 250ms ease-out; outline: none; margin-left: 2px; margin-right: 2px; opacity: 0.5; } .player-management-button-add-friend:hover:not(:disabled) { background-image: url(/fe/lol-parties/banner-add-friend-hover.png); } .player-management-button-add-friend:active:not(:disabled) { transition-duration: 0s; background-image: url(/fe/lol-parties/banner-add-friend-click.png); } .player-management-button-add-friend:disabled { cursor: auto; } .player-management-button-options { background: none no-repeat; background-image: url(/fe/lol-parties/banner-options.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 31.75px; height: 31.75px; display: block; cursor: pointer; padding: 0; border: none; transition: background-image 0.1s ease-out, opacity 250ms ease-out; outline: none; margin-left: -1px; opacity: 0; } .player-management-button-options:hover:not(:disabled) { background-image: url(/fe/lol-parties/banner-options-hover.png); } .player-management-button-options:active:not(:disabled) { transition-duration: 0s; background-image: url(/fe/lol-parties/banner-options-click.png); } .player-management-button-options:disabled { cursor: auto; } .player-management-button-invite { background: none no-repeat; background-image: url(/fe/lol-parties/banner-invite.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 92.5px; height: 92.5px; display: block; cursor: pointer; padding: 0; border: none; transition: background-image 0.1s ease-out, opacity 250ms ease-out; outline: none; } .player-management-button-invite:hover:not(:disabled) { background-image: url(/fe/lol-parties/banner-invite-hover.png); } .player-management-button-invite:active:not(:disabled) { transition-duration: 0s; background-image: url(/fe/lol-parties/banner-invite-click.png); } .player-management-button-invite:disabled { cursor: auto; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals { font-family: var(--font-body); } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals { -webkit-user-select: none; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence:lang(ja-jp), .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience:lang(ja-jp), .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery:lang(ja-jp), .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals:lang(ja-jp) { font-size: 13px; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence:lang(ar-ae), .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience:lang(ar-ae), .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery:lang(ar-ae), .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals:lang(ar-ae) { letter-spacing: 0; } .parties-point-eligibility-custom { position: absolute; left: 86px; } .parties-point-eligibility-content .parties-point-eligibility-list { list-style-type: none; display: flex; margin: 0; padding: 0; } .parties-point-eligibility-content .parties-point-eligibility-influence { background-image: url(/fe/lol-parties/icon-ip.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 23px; height: 23px; margin-right: 12px; } .parties-point-eligibility-content .parties-point-eligibility-influence.hidden { display: none; } .parties-point-eligibility-content .parties-point-eligibility-experience { background-image: url(/fe/lol-parties/icon-xp.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 23px; height: 23px; margin-right: 12px; } .parties-point-eligibility-content .parties-point-eligibility-experience.disabled { background-image: url(/fe/lol-parties/icon-xp-disabled.png); } .parties-point-eligibility-content .parties-point-eligibility-mastery { background-image: url(/fe/lol-parties/icon-mastery.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 23px; height: 23px; margin-right: 12px; } .parties-point-eligibility-content .parties-point-eligibility-mastery.disabled { background-image: url(/fe/lol-parties/icon-mastery-disabled.png); } .parties-point-eligibility-content .parties-point-eligibility-eternals { background-image: url(/fe/lol-parties/icon-eternals.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 23px; height: 23px; } .parties-point-eligibility-content .parties-point-eligibility-eternals.disabled { background-image: url(/fe/lol-parties/icon-eternals-disabled.png); } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-title { margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-description { margin-bottom: 12px; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-list { list-style-type: none; display: flex; flex-direction: column; margin: 0; padding: 0; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence.hidden { display: none; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals { display: flex; align-items: center; height: 30px; border-bottom: thin solid #1e2328; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence.disabled, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience.disabled, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery.disabled, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals.disabled { color: #3c3c41; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence.disabled .parties-point-eligibility-tooltip-content-experience-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience.disabled .parties-point-eligibility-tooltip-content-experience-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery.disabled .parties-point-eligibility-tooltip-content-experience-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals.disabled .parties-point-eligibility-tooltip-content-experience-icon { background-image: url(/fe/lol-parties/icon-xp-disabled.png); } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence.disabled .parties-point-eligibility-tooltip-content-mastery-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience.disabled .parties-point-eligibility-tooltip-content-mastery-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery.disabled .parties-point-eligibility-tooltip-content-mastery-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals.disabled .parties-point-eligibility-tooltip-content-mastery-icon { background-image: url(/fe/lol-parties/icon-mastery-disabled.png); } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence.disabled .parties-point-eligibility-tooltip-content-eternals-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience.disabled .parties-point-eligibility-tooltip-content-eternals-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery.disabled .parties-point-eligibility-tooltip-content-eternals-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals.disabled .parties-point-eligibility-tooltip-content-eternals-icon { background-image: url(/fe/lol-parties/icon-eternals-disabled.png); } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence:last-child, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience:last-child, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery:last-child, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals:last-child { border: none; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence .parties-point-eligibility-tooltip-content-influence-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience .parties-point-eligibility-tooltip-content-influence-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery .parties-point-eligibility-tooltip-content-influence-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals .parties-point-eligibility-tooltip-content-influence-icon { background-image: url(/fe/lol-parties/icon-ip.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 18.400000000000002px; height: 18.400000000000002px; background-repeat: no-repeat; margin: 0 0 0 6px; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence .parties-point-eligibility-tooltip-content-experience-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience .parties-point-eligibility-tooltip-content-experience-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery .parties-point-eligibility-tooltip-content-experience-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals .parties-point-eligibility-tooltip-content-experience-icon { background-image: url(/fe/lol-parties/icon-xp.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 18.400000000000002px; height: 18.400000000000002px; background-repeat: no-repeat; margin: 0 0 0 6px; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence .parties-point-eligibility-tooltip-content-mastery-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience .parties-point-eligibility-tooltip-content-mastery-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery .parties-point-eligibility-tooltip-content-mastery-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals .parties-point-eligibility-tooltip-content-mastery-icon { background-image: url(/fe/lol-parties/icon-mastery.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 18.400000000000002px; height: 18.400000000000002px; background-repeat: no-repeat; margin: 0 0 0 6px; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence .parties-point-eligibility-tooltip-content-eternals-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience .parties-point-eligibility-tooltip-content-eternals-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery .parties-point-eligibility-tooltip-content-eternals-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals .parties-point-eligibility-tooltip-content-eternals-icon { background-image: url(/fe/lol-parties/icon-eternals.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 18.400000000000002px; height: 18.400000000000002px; background-repeat: no-repeat; margin: 0 0 0 6px; } .parties-point-eligibility-custom { position: absolute; left: 86px; } .parties-point-eligibility-content .parties-point-eligibility-list { list-style-type: none; display: flex; margin: 0; padding: 0; } .parties-point-eligibility-content .parties-point-eligibility-influence { background-image: url(/fe/lol-parties/icon-ip.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 23px; height: 23px; margin-right: 12px; } .parties-point-eligibility-content .parties-point-eligibility-influence.hidden { display: none; } .parties-point-eligibility-content .parties-point-eligibility-experience { background-image: url(/fe/lol-parties/icon-xp.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 23px; height: 23px; margin-right: 12px; } .parties-point-eligibility-content .parties-point-eligibility-experience.disabled { background-image: url(/fe/lol-parties/icon-xp-disabled.png); } .parties-point-eligibility-content .parties-point-eligibility-mastery { background-image: url(/fe/lol-parties/icon-mastery.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 23px; height: 23px; margin-right: 12px; } .parties-point-eligibility-content .parties-point-eligibility-mastery.disabled { background-image: url(/fe/lol-parties/icon-mastery-disabled.png); } .parties-point-eligibility-content .parties-point-eligibility-eternals { background-image: url(/fe/lol-parties/icon-eternals.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 23px; height: 23px; } .parties-point-eligibility-content .parties-point-eligibility-eternals.disabled { background-image: url(/fe/lol-parties/icon-eternals-disabled.png); } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-title { margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-description { margin-bottom: 12px; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-list { list-style-type: none; display: flex; flex-direction: column; margin: 0; padding: 0; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence.hidden { display: none; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals { display: flex; align-items: center; height: 30px; border-bottom: thin solid #1e2328; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence.disabled, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience.disabled, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery.disabled, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals.disabled { color: #3c3c41; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence.disabled .parties-point-eligibility-tooltip-content-experience-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience.disabled .parties-point-eligibility-tooltip-content-experience-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery.disabled .parties-point-eligibility-tooltip-content-experience-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals.disabled .parties-point-eligibility-tooltip-content-experience-icon { background-image: url(/fe/lol-parties/icon-xp-disabled.png); } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence.disabled .parties-point-eligibility-tooltip-content-mastery-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience.disabled .parties-point-eligibility-tooltip-content-mastery-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery.disabled .parties-point-eligibility-tooltip-content-mastery-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals.disabled .parties-point-eligibility-tooltip-content-mastery-icon { background-image: url(/fe/lol-parties/icon-mastery-disabled.png); } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence.disabled .parties-point-eligibility-tooltip-content-eternals-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience.disabled .parties-point-eligibility-tooltip-content-eternals-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery.disabled .parties-point-eligibility-tooltip-content-eternals-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals.disabled .parties-point-eligibility-tooltip-content-eternals-icon { background-image: url(/fe/lol-parties/icon-eternals-disabled.png); } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence:last-child, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience:last-child, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery:last-child, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals:last-child { border: none; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence .parties-point-eligibility-tooltip-content-influence-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience .parties-point-eligibility-tooltip-content-influence-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery .parties-point-eligibility-tooltip-content-influence-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals .parties-point-eligibility-tooltip-content-influence-icon { background-image: url(/fe/lol-parties/icon-ip.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 18.400000000000002px; height: 18.400000000000002px; background-repeat: no-repeat; margin: 0 0 0 6px; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence .parties-point-eligibility-tooltip-content-experience-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience .parties-point-eligibility-tooltip-content-experience-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery .parties-point-eligibility-tooltip-content-experience-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals .parties-point-eligibility-tooltip-content-experience-icon { background-image: url(/fe/lol-parties/icon-xp.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 18.400000000000002px; height: 18.400000000000002px; background-repeat: no-repeat; margin: 0 0 0 6px; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence .parties-point-eligibility-tooltip-content-mastery-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience .parties-point-eligibility-tooltip-content-mastery-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery .parties-point-eligibility-tooltip-content-mastery-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals .parties-point-eligibility-tooltip-content-mastery-icon { background-image: url(/fe/lol-parties/icon-mastery.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 18.400000000000002px; height: 18.400000000000002px; background-repeat: no-repeat; margin: 0 0 0 6px; } .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-influence .parties-point-eligibility-tooltip-content-eternals-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-experience .parties-point-eligibility-tooltip-content-eternals-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-mastery .parties-point-eligibility-tooltip-content-eternals-icon, .parties-point-eligibility-tooltip-content .parties-point-eligibility-tooltip-content-eternals .parties-point-eligibility-tooltip-content-eternals-icon { background-image: url(/fe/lol-parties/icon-eternals.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 18.400000000000002px; height: 18.400000000000002px; background-repeat: no-repeat; margin: 0 0 0 6px; } .parties-disband-countdown { font-family: var(--font-display); } .parties-disband-countdown { -webkit-user-select: none; } .parties-disband-countdown { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .parties-disband-countdown { text-transform: uppercase; } .parties-disband-countdown:lang(ko-kr), .parties-disband-countdown:lang(ja-jp), .parties-disband-countdown:lang(tr-tr), .parties-disband-countdown:lang(el-gr), .parties-disband-countdown:lang(th-th), .parties-disband-countdown:lang(zh-tw) { text-transform: none; } .parties-disband-countdown { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .parties-disband-countdown:lang(ar-ae) { letter-spacing: 0; } .parties-disband-countdown { color: #c89b3c; text-transform: uppercase; margin-bottom: 2px; } .parties-disband-countdown.timer-disabled { display: none; } .hidden-countdown { display: none; } lol-uikit-content-block.parties-first-experience-tooltip { width: 250px; white-space: normal; } lol-uikit-content-block.parties-first-experience-tooltip h6 { margin-bottom: 8px; } .open-party-toggle-wrapper { direction: rtl; margin: 0 0 0 12px; } .open-party-toggle-wrapper .toggle-container { position: relative; width: 70px; height: 29px; background-image: url(/fe/lol-parties/toggle-slider-closed.png); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; } .open-party-toggle-wrapper .toggle-container:lang(ar-AE) { background-image: url(/fe/lol-parties/toggle-slider-closed-rtl.png); } .open-party-toggle-wrapper .toggle-container .open { position: absolute; top: 0; left: auto; right: 0; width: 70px; height: 29px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(/fe/lol-parties/toggle-slider-open.png); opacity: 0; transition: opacity 0.5s; } .open-party-toggle-wrapper .toggle-container .open:lang(ar-AE) { background-image: url(/fe/lol-parties/toggle-slider-open-rtl.png); } .open-party-toggle-wrapper .toggle-container .toggle-button { position: relative; left: auto; right: 0; top: -2px; background-image: url(/fe/lol-parties/toggle-button.png); background-repeat: no-repeat; background-position: center; background-size: contain; width: 34px; height: 34px; } .open-party-toggle-wrapper .toggle-container .toggle-button:hover { background-image: url(/fe/lol-parties/toggle-button-hover.png); } .open-party-toggle-wrapper .toggle-container .toggle-button:active { background-image: url(/fe/lol-parties/toggle-button-click.png); } .open-party-toggle-wrapper .animated { transition: right .2s ease-in-out; } .open-party-toggle-wrapper.right .toggle-button { background-image: url(/fe/lol-parties/toggle-button.png); left: auto; right: 34px; } .open-party-toggle-wrapper.disabled .toggle-button { background-image: url(/fe/lol-parties/toggle-button-disabled.png); } .open-party-toggle-wrapper.disabled .toggle-button:hover { background-image: url(/fe/lol-parties/toggle-button-disabled.png); } .open-party-toggle-wrapper.disabled .toggle-button:active { background-image: url(/fe/lol-parties/toggle-button-disabled.png); } .open-party-toggle-wrapper.open .toggle-container .open { opacity: 1; } .open-party-toggle-wrapper.disabled .toggle-container { background-image: url(/fe/lol-parties/toggle-slider-disabled.png); cursor: default; } .open-party-toggle-wrapper.disabled .toggle-container:lang(ar-AE) { background-image: url(/fe/lol-parties/toggle-slider-disabled-rtl.png); } .parties-game-select-screen { padding-left: 34px; padding-right: 35px; } @-moz-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .parties-game-select-screen { display: flex; flex-direction: column; position: relative; height: 100%; width: 100%; box-sizing: border-box; } .parties-game-select-screen hr { width: 100%; border: thin solid rgba(160,155,140,0.5); border-bottom: 0; box-sizing: border-box; } .parties-game-select-screen.game-select-hide { display: none; } .parties-loading-spinner-wrapper { display: flex; flex-grow: 1; align-items: center; justify-content: center; } .parties-loading-spinner-wrapper .parties-loading-spinner { width: 76px; height: 76px; background-image: url(/fe/lol-parties/spinner-large.png); background-size: 100% 100%; background-repeat: no-repeat; animation: parties-spin 10s linear infinite; } .parties-game-select-wrapper { position: relative; box-sizing: border-box; padding-top: 10px; display: flex; flex-direction: column; flex-grow: 1; } .parties-game-navs { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; } .parties-game-navs lol-uikit-navigation-bar { display: flex; flex-grow: 1; } .parties-game-navs-list { padding-left: 0; list-style-type: none; } .parties-game-navs-list .parties-game-navs-item { direction: rtl; height: 20px; } .parties-game-navs-break { border-left: thin solid #785a28; display: inline-block; height: 14px; margin: 0 34px 0 11px; } .parties-game-type-select-wrapper { direction: rtl; display: flex; flex-direction: row; justify-content: center; position: relative; } .parties-game-type-select-wrapper > hr { border: thin solid rgba(240,230,210,0.35); border-bottom: 0; position: absolute; top: 260px; left: 0; margin: 0; } .confirm-section { width: 100%; position: absolute; z-index: 1; left: 0; bottom: 0; display: flex; flex-direction: row; justify-content: center; } .game-select-footer-container { display: flex; padding-left: 1px; } .game-select-footer-container .arrow-footer { box-sizing: border-box; display: flex; flex-direction: row; height: 51px; justify-content: center; padding: 0 0 1px; width: 100%; } lol-uikit-content-block.game-type-category-disabled ul li { font-family: var(--font-body); } lol-uikit-content-block.game-type-category-disabled ul li { -webkit-user-select: none; } lol-uikit-content-block.game-type-category-disabled ul li { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } lol-uikit-content-block.game-type-category-disabled ul li { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } lol-uikit-content-block.game-type-category-disabled ul li:lang(ar-ae) { letter-spacing: 0; } lol-uikit-content-block.game-type-category-disabled { text-align: right; } lol-uikit-content-block.game-type-category-disabled ul { margin: 0; padding-bottom: 2px; } .game-type-card .parties-game-type-lower-half label { font-family: var(--font-display); } .game-type-card .parties-game-type-card-intro { font-family: var(--font-body); } .game-type-card .parties-game-type-lower-half label, .game-type-card .parties-game-type-card-intro { -webkit-user-select: none; } .game-type-card .parties-game-type-lower-half label, .game-type-card .parties-game-type-card-intro { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .game-type-card .parties-game-type-lower-half label { text-transform: uppercase; } .game-type-card .parties-game-type-lower-half label:lang(ko-kr), .game-type-card .parties-game-type-lower-half label:lang(ja-jp), .game-type-card .parties-game-type-lower-half label:lang(tr-tr), .game-type-card .parties-game-type-lower-half label:lang(el-gr), .game-type-card .parties-game-type-lower-half label:lang(th-th), .game-type-card .parties-game-type-lower-half label:lang(zh-tw) { text-transform: none; } .game-type-card .parties-game-type-lower-half label { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .game-type-card .parties-game-type-lower-half label:lang(ar-ae) { letter-spacing: 0; } .game-type-card .parties-game-type-card-intro { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .game-type-card .parties-game-type-card-intro:lang(ar-ae) { letter-spacing: 0; } .game-type-card .parties-game-type-lower-half label { text-shadow: 0px 1px 2px rgba(1,10,19,0.5); } .game-type-card { text-align: right; margin: 30px 0 0 10px; width: 239px; display: flex; flex-direction: column; align-items: flex-start; } .game-type-card:last-child { margin-right: 0px; } .game-type-card.animation-lock { cursor: default; pointer-events: none; } .game-type-card:not(.animation-lock):not(.disabled) .parties-game-type-upper-half:hover + .parties-game-type-lower-half { opacity: 1; } .game-type-card.selected .parties-game-type-lower-half { opacity: 1; } .game-type-card.selected .parties-game-type-card-categories { opacity: 1; pointer-events: auto; height: auto; width: 100%; } .game-type-card.selected .parties-game-type-card-intro { color: #f0e6d2; } .game-type-card.selected .parties-game-type-card-category-btn { opacity: 1; } .game-type-card.selected .parties-game-type-lower-half hr { opacity: 1; } .game-type-card.disabled { cursor: default; } .game-type-card.disabled * { cursor: default; } .game-type-card.disabled .parties-game-type-card-intro, .game-type-card.disabled .parties-game-type-card-categories, .game-type-card.disabled .parties-game-type-card-category-btn { opacity: 0; } .game-type-card.disabled .parties-game-type-card-name, .game-type-card.disabled .parties-game-type-card-break { color: #5c5b57; } .game-type-card.disabled .parties-game-type-card-disabled-icon { opacity: 1; } .game-type-card .parties-game-type-upper-half { position: relative; cursor: pointer; width: 185px; height: 230px; } .game-type-card .parties-game-type-upper-half .parties-eligibility-error { position: absolute; top: 98px; right: 40px; background-image: url(/fe/lol-parties/icon-warning-red.png); height: 20px; width: 22px; background-repeat: no-repeat; background-size: contain; } .game-type-card .parties-game-type-lower-half { opacity: 0; height: 290px; display: flex; flex-direction: column; cursor: default; } .game-type-card .parties-game-type-lower-half hr { opacity: 0; margin: 0; } .game-type-card .parties-game-type-lower-half label { display: block; color: #f0e6d2; margin-bottom: 8px; } .game-type-card .parties-game-type-card-intro { margin: 15px 0px; transition: all 0.3s ease; } .game-type-card .parties-game-type-card-break, .parties-custom-game-subcategory-card .parties-game-type-card-break, .game-type-card .parties-game-type-card-name, .parties-custom-game-subcategory-card .parties-game-type-card-name { font-family: var(--font-display); } .game-type-card .parties-game-type-card-break, .parties-custom-game-subcategory-card .parties-game-type-card-break, .game-type-card .parties-game-type-card-name, .parties-custom-game-subcategory-card .parties-game-type-card-name { -webkit-user-select: none; } .game-type-card .parties-game-type-card-break, .parties-custom-game-subcategory-card .parties-game-type-card-break, .game-type-card .parties-game-type-card-name, .parties-custom-game-subcategory-card .parties-game-type-card-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .game-type-card .parties-game-type-card-break, .parties-custom-game-subcategory-card .parties-game-type-card-break, .game-type-card .parties-game-type-card-name, .parties-custom-game-subcategory-card .parties-game-type-card-name { text-transform: uppercase; } .game-type-card .parties-game-type-card-break:lang(ko-kr), .parties-custom-game-subcategory-card .parties-game-type-card-break:lang(ko-kr), .game-type-card .parties-game-type-card-name:lang(ko-kr), .parties-custom-game-subcategory-card .parties-game-type-card-name:lang(ko-kr), .game-type-card .parties-game-type-card-break:lang(ja-jp), .parties-custom-game-subcategory-card .parties-game-type-card-break:lang(ja-jp), .game-type-card .parties-game-type-card-name:lang(ja-jp), .parties-custom-game-subcategory-card .parties-game-type-card-name:lang(ja-jp), .game-type-card .parties-game-type-card-break:lang(tr-tr), .parties-custom-game-subcategory-card .parties-game-type-card-break:lang(tr-tr), .game-type-card .parties-game-type-card-name:lang(tr-tr), .parties-custom-game-subcategory-card .parties-game-type-card-name:lang(tr-tr), .game-type-card .parties-game-type-card-break:lang(el-gr), .parties-custom-game-subcategory-card .parties-game-type-card-break:lang(el-gr), .game-type-card .parties-game-type-card-name:lang(el-gr), .parties-custom-game-subcategory-card .parties-game-type-card-name:lang(el-gr), .game-type-card .parties-game-type-card-break:lang(th-th), .parties-custom-game-subcategory-card .parties-game-type-card-break:lang(th-th), .game-type-card .parties-game-type-card-name:lang(th-th), .parties-custom-game-subcategory-card .parties-game-type-card-name:lang(th-th), .game-type-card .parties-game-type-card-break:lang(zh-tw), .parties-custom-game-subcategory-card .parties-game-type-card-break:lang(zh-tw), .game-type-card .parties-game-type-card-name:lang(zh-tw), .parties-custom-game-subcategory-card .parties-game-type-card-name:lang(zh-tw) { text-transform: none; } .game-type-card .parties-game-type-card-break, .parties-custom-game-subcategory-card .parties-game-type-card-break { text-transform: none; } .game-type-card .parties-game-type-card-name, .parties-custom-game-subcategory-card .parties-game-type-card-name { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .game-type-card .parties-game-type-card-name:lang(ar-ae), .parties-custom-game-subcategory-card .parties-game-type-card-name:lang(ar-ae) { letter-spacing: 0; } .game-type-card .parties-game-type-card-break, .parties-custom-game-subcategory-card .parties-game-type-card-break { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .game-type-card .parties-game-type-card-break:lang(ar-ae), .parties-custom-game-subcategory-card .parties-game-type-card-break:lang(ar-ae) { letter-spacing: 0; } .game-type-card .parties-game-type-card-break, .parties-custom-game-subcategory-card .parties-game-type-card-break { letter-spacing: 0.0375em; } .game-type-card .parties-game-type-card-break:lang(ar-ae), .parties-custom-game-subcategory-card .parties-game-type-card-break:lang(ar-ae) { letter-spacing: 0; } .game-type-card .parties-game-type-card-break, .parties-custom-game-subcategory-card .parties-game-type-card-break, .game-type-card .parties-game-type-card-name, .parties-custom-game-subcategory-card .parties-game-type-card-name { text-shadow: 0px 1px 2px rgba(1,10,19,0.5); } .game-type-card.disabled .parties-game-type-card-name, .parties-custom-game-subcategory-card.disabled .parties-game-type-card-name, .game-type-card.disabled .parties-game-type-card-break, .parties-custom-game-subcategory-card.disabled .parties-game-type-card-break { color: #5c5b57; } .game-type-card:not(.animation-lock):not(.disabled):not(.selected) .parties-game-type-upper-half:hover .parties-game-type-icon .icon-bg-hover, .parties-custom-game-subcategory-card:not(.animation-lock):not(.disabled):not(.selected) .parties-game-type-upper-half:hover .parties-game-type-icon .icon-bg-hover, .game-type-card:not(.animation-lock):not(.disabled):not(.selected) .subcategory-map-icon:hover .parties-game-type-icon .icon-bg-hover, .parties-custom-game-subcategory-card:not(.animation-lock):not(.disabled):not(.selected) .subcategory-map-icon:hover .parties-game-type-icon .icon-bg-hover, .game-type-card:not(.animation-lock):not(.disabled):not(.selected) .parties-game-type-upper-half:hover .parties-game-type-icon ~ .parties-game-type-card-intro, .parties-custom-game-subcategory-card:not(.animation-lock):not(.disabled):not(.selected) .parties-game-type-upper-half:hover .parties-game-type-icon ~ .parties-game-type-card-intro, .game-type-card:not(.animation-lock):not(.disabled):not(.selected) .subcategory-map-icon:hover .parties-game-type-icon ~ .parties-game-type-card-intro, .parties-custom-game-subcategory-card:not(.animation-lock):not(.disabled):not(.selected) .subcategory-map-icon:hover .parties-game-type-icon ~ .parties-game-type-card-intro { opacity: 1; } .game-type-card.disabled .parties-game-type-icon, .parties-custom-game-subcategory-card.disabled .parties-game-type-icon { cursor: default; pointer-events: none; } .game-type-card.disabled .parties-game-type-icon .icon-frame .icon-bg-hover, .parties-custom-game-subcategory-card.disabled .parties-game-type-icon .icon-frame .icon-bg-hover, .game-type-card.disabled .parties-game-type-icon .icon-frame .icon-bg-active, .parties-custom-game-subcategory-card.disabled .parties-game-type-icon .icon-frame .icon-bg-active { opacity: 0; } .game-type-card.disabled .parties-game-type-icon .icon-frame .icon-bg-disabled, .parties-custom-game-subcategory-card.disabled .parties-game-type-icon .icon-frame .icon-bg-disabled { opacity: 1; } .game-type-card.disabled .parties-game-type-icon:hover ~ .parties-game-type-card-intro, .parties-custom-game-subcategory-card.disabled .parties-game-type-icon:hover ~ .parties-game-type-card-intro { opacity: 0; } .game-type-card.disabled .parties-game-type-icon #game-type-icon-state-machine, .parties-custom-game-subcategory-card.disabled .parties-game-type-icon #game-type-icon-state-machine { display: none; } .game-type-card.selected:not(.disabled) .parties-game-type-icon, .parties-custom-game-subcategory-card.selected:not(.disabled) .parties-game-type-icon { border-width: 0px 0px 1px 0px; border-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 20%, #fff 50%, rgba(255,255,255,0.5) 80%, rgba(255,255,255,0) 100%) 1; border-style: solid; } .game-type-card.selected:not(.disabled) .parties-game-type-icon .icon-bg-default, .parties-custom-game-subcategory-card.selected:not(.disabled) .parties-game-type-icon .icon-bg-default, .game-type-card.selected:not(.disabled) .parties-game-type-icon .icon-bg-hover, .parties-custom-game-subcategory-card.selected:not(.disabled) .parties-game-type-icon .icon-bg-hover { opacity: 0; } .game-type-card.selected:not(.disabled) .parties-game-type-icon .icon-bg-active, .parties-custom-game-subcategory-card.selected:not(.disabled) .parties-game-type-icon .icon-bg-active { opacity: 1; } .game-type-card.selected:not(.disabled) .parties-game-type-card-name, .parties-custom-game-subcategory-card.selected:not(.disabled) .parties-game-type-card-name, .game-type-card.selected:not(.disabled) .parties-game-type-card-break, .parties-custom-game-subcategory-card.selected:not(.disabled) .parties-game-type-card-break { color: #f0e6d2; } .game-type-card.selected:not(.disabled) .parties-game-type-card-selected-glow, .parties-custom-game-subcategory-card.selected:not(.disabled) .parties-game-type-card-selected-glow { opacity: 0.7; } .game-type-card.animation-lock .parties-game-type-icon, .parties-custom-game-subcategory-card.animation-lock .parties-game-type-icon { cursor: default; } .game-type-card .parties-game-type-icon, .parties-custom-game-subcategory-card .parties-game-type-icon { padding-top: 15px; height: 230px; position: relative; cursor: pointer; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; } .game-type-card .parties-game-type-icon *, .parties-custom-game-subcategory-card .parties-game-type-icon * { cursor: pointer; } .game-type-card .parties-game-type-icon .icon-frame, .parties-custom-game-subcategory-card .parties-game-type-icon .icon-frame { width: 105px; height: 105px; position: relative; margin-bottom: 15px; } .game-type-card .parties-game-type-icon .icon-frame .icon-bg, .parties-custom-game-subcategory-card .parties-game-type-icon .icon-frame .icon-bg { background-size: 100px; background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .game-type-card .parties-game-type-icon .icon-frame .icon-bg.video-icon video, .parties-custom-game-subcategory-card .parties-game-type-icon .icon-frame .icon-bg.video-icon video { position: absolute; top: 0px; left: 0px; } .game-type-card .parties-game-type-icon .icon-frame .icon-bg-filler-show, .parties-custom-game-subcategory-card .parties-game-type-icon .icon-frame .icon-bg-filler-show { opacity: 1; } .game-type-card .parties-game-type-icon .icon-frame .icon-bg-filler-fade-in, .parties-custom-game-subcategory-card .parties-game-type-icon .icon-frame .icon-bg-filler-fade-in { animation: parties-game-type-icon-filler-image-fade-in 0.75s; } @-moz-keyframes parties-game-type-icon-filler-image-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes parties-game-type-icon-filler-image-fade-in { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes parties-game-type-icon-filler-image-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes parties-game-type-icon-filler-image-fade-in { from { opacity: 0; } to { opacity: 1; } } .game-type-card .parties-game-type-icon .icon-frame .icon-bg-hover, .parties-custom-game-subcategory-card .parties-game-type-icon .icon-frame .icon-bg-hover, .game-type-card .parties-game-type-icon .icon-frame .icon-bg-disabled, .parties-custom-game-subcategory-card .parties-game-type-icon .icon-frame .icon-bg-disabled, .game-type-card .parties-game-type-icon .icon-frame .icon-bg-active, .parties-custom-game-subcategory-card .parties-game-type-icon .icon-frame .icon-bg-active { opacity: 0; } .game-type-card .parties-game-type-icon .icon-frame .icon-bg-hover, .parties-custom-game-subcategory-card .parties-game-type-icon .icon-frame .icon-bg-hover { transition: opacity 100ms linear; } .game-type-card .parties-game-type-icon.map-22 .icon-frame .icon-bg, .parties-custom-game-subcategory-card .parties-game-type-icon.map-22 .icon-frame .icon-bg { background-size: 105px; } .game-type-card .parties-game-type-card-break, .parties-custom-game-subcategory-card .parties-game-type-card-break { color: #cdbe91; position: relative; margin-bottom: 5px; } .game-type-card .parties-disabled-featured-game-mode-break, .parties-custom-game-subcategory-card .parties-disabled-featured-game-mode-break { min-height: 18px; } .game-type-card .parties-game-type-card-name, .parties-custom-game-subcategory-card .parties-game-type-card-name { direction: rtl; color: #cdbe91; margin-bottom: 5px; width: 200px; text-align: center; } .game-type-card .parties-game-type-card-selected-glow, .parties-custom-game-subcategory-card .parties-game-type-card-selected-glow { width: 250px; height: 150px; position: absolute; pointer-events: none; bottom: 0px; left: -40px; opacity: 0; background-image: radial-gradient(50% 40% at bottom center, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.3) 30%, rgba(255,255,255,0.05) 80%, rgba(255,255,255,0.01) 90%, rgba(255,255,255,0.005) 94%, rgba(255,255,255,0) 100%); transition: opacity 0.3s ease; } body[data-locale="ja-JP"] .game-type-card .parties-game-type-card-name { font-size: 22px; } body[data-locale="ja-JP"] .parties-game-type-card-name { word-break: keep-all; } .parties-game-type-card-category-btn { font-family: var(--font-display); } .parties-game-type-card-category-div span.allowable-premade-sizes-text { font-family: var(--font-body); } .parties-game-type-card-category-div span.allowable-premade-sizes-text, .parties-game-type-card-category-btn { -webkit-user-select: none; } .parties-game-type-card-category-div span.allowable-premade-sizes-text, .parties-game-type-card-category-btn { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .parties-game-type-card-category-btn { text-transform: uppercase; } .parties-game-type-card-category-btn:lang(ko-kr), .parties-game-type-card-category-btn:lang(ja-jp), .parties-game-type-card-category-btn:lang(tr-tr), .parties-game-type-card-category-btn:lang(el-gr), .parties-game-type-card-category-btn:lang(th-th), .parties-game-type-card-category-btn:lang(zh-tw) { text-transform: none; } .parties-game-type-card-category-btn { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .parties-game-type-card-category-btn:lang(ar-ae) { letter-spacing: 0; } .parties-game-type-card-category-div span.allowable-premade-sizes-text { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .parties-game-type-card-category-div span.allowable-premade-sizes-text:lang(ja-jp) { font-size: 13px; } .parties-game-type-card-category-div span.allowable-premade-sizes-text:lang(ar-ae) { letter-spacing: 0; } .parties-game-type-card-category-btn { text-shadow: 0px 1px 2px rgba(1,10,19,0.5); } hr { width: 100%; border: thin solid rgba(160,155,140,0.5); border-bottom: 0; box-sizing: border-box; } .game-select-solo-rewards-item { text-align: left; } .parties-game-type-card-categories { opacity: 0; pointer-events: none; transition: all 0.3s ease; margin-top: 14px; } .parties-game-type-card-category-div { position: relative; margin: 0 0 10px 5px; display: flex; align-items: center; } .parties-game-type-card-category-div:last-child { margin-bottom: 0px; } .parties-game-type-card-category-div span.allowable-premade-sizes-text { text-transform: none; } .parties-game-type-card-category-div .queue-status-icon { display: none; margin: 0 0 0 10px; flex-shrink: 0; } .parties-game-type-card-category-div .queue-status-icon.queue-status-icon-visible { display: block; } .parties-game-type-card-category-div .queue-eligibility-error { background: url(/fe/lol-parties/icon-warning-red.png) no-repeat; background-size: contain; height: 15px; width: 15px; } .parties-game-type-card-category-div .solo-rewards-icon { background: url(/fe/lol-parties/solo-rewards-icon.png) no-repeat; background-size: contain; width: 34px; height: 20px; } .parties-game-type-card-category-div .solo-rewards-icon.solo-rewards-visible { display: block; } .parties-game-type-card-category-div .parties-game-type-card-category-radio-option { width: 20px; height: 20px; flex-shrink: 0; background: url(/fe/lol-parties/btn_icon.png) no-repeat; background-position: 0px 0px; background-size: 100%; margin: 0 0 0 6px; } .parties-game-type-card-category-div:hover .parties-game-type-card-category-radio-option { background-position: 0 -20px; } .parties-game-type-card-category-div:active .parties-game-type-card-category-radio-option { background-position: 0 -40px; } .parties-game-type-card-category-div.disabled .parties-game-type-card-category-radio-option { background-position: 0 -60px; } .parties-game-type-card-category-div.selected .parties-game-type-card-category-radio-option { background-position: 0 -80px; } .parties-game-type-card-category-div.selected:hover .parties-game-type-card-category-radio-option { background-position: 0 -100px; } .parties-game-type-card-category-div.selected:active .parties-game-type-card-category-radio-option { background-position: 0 -120px; } .parties-game-type-card-category-btn { text-decoration: none; position: relative; display: flex; transition: color 0.3s ease; color: #cdbe91; cursor: pointer; flex-direction: column; } .parties-game-type-card-category-btn:hover, .parties-game-type-card-category-btn.current { color: #f0e6d2; } .parties-game-type-card-category-btn.disabled { color: #5c5b57; cursor: default; } div.parties-custom-game-setup div.parties-custom-game-lower-half label { font-family: var(--font-display); } div.parties-custom-game-setup div.parties-custom-game-lower-half label { -webkit-user-select: none; } div.parties-custom-game-setup div.parties-custom-game-lower-half label { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } div.parties-custom-game-setup div.parties-custom-game-lower-half label { text-transform: uppercase; } div.parties-custom-game-setup div.parties-custom-game-lower-half label:lang(ko-kr), div.parties-custom-game-setup div.parties-custom-game-lower-half label:lang(ja-jp), div.parties-custom-game-setup div.parties-custom-game-lower-half label:lang(tr-tr), div.parties-custom-game-setup div.parties-custom-game-lower-half label:lang(el-gr), div.parties-custom-game-setup div.parties-custom-game-lower-half label:lang(th-th), div.parties-custom-game-setup div.parties-custom-game-lower-half label:lang(zh-tw) { text-transform: none; } div.parties-custom-game-setup div.parties-custom-game-lower-half label { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } div.parties-custom-game-setup div.parties-custom-game-lower-half label:lang(ar-ae) { letter-spacing: 0; } div.parties-custom-game-setup div.parties-custom-game-lower-half label { text-shadow: 0px 1px 2px rgba(1,10,19,0.5); } div.parties-custom-game-setup.name-error input#custom-game-name { border: thin solid #be1e37; } div.parties-custom-game-setup div.parties-custom-game-subcategory-select { direction: rtl; width: 100%; border-bottom: thin solid rgba(240,230,210,0.35); display: flex; flex-direction: row; justify-content: center; align-items: flex-end; } div.parties-custom-game-setup div.parties-custom-game-subcategory-select div.parties-custom-game-subcategory-card { width: 280px; margin: 0 0 0 48px; } div.parties-custom-game-setup div.parties-custom-game-subcategory-select div.parties-custom-game-subcategory-card * { cursor: inherit; } div.parties-custom-game-setup div.parties-custom-game-subcategory-select div.parties-custom-game-subcategory-card:last-child { margin-right: 0px; } div.parties-custom-game-setup div.parties-custom-game-subcategory-select div.parties-custom-game-subcategory-card.disabled { cursor: default; } div.parties-custom-game-setup div.parties-custom-game-subcategory-select div.parties-custom-game-subcategory-card.animation-lock { cursor: default; pointer-events: none; } div.parties-custom-game-setup div.parties-custom-game-subcategory-select div.parties-custom-game-subcategory-card .subcategory-map-icon { margin-top: 35px; width: 200px; position: relative; cursor: pointer; } div.parties-custom-game-setup div.parties-custom-game-subcategory-select div.parties-custom-game-subcategory-card .subcategory-map-icon .parties-map-icon { margin-top: 0px; height: 195px; } div.parties-custom-game-setup div.parties-custom-game-subcategory-select div.parties-custom-game-subcategory-card .subcategory-map-icon .subcategory-tooltip-proxy { width: 106px; height: 100px; top: 0px; left: 0px; position: absolute; } div.parties-custom-game-setup div.parties-custom-game-subcategory-select div.parties-custom-game-subcategory-card:first-child .parties-map-icon .parties-map-card-selected-glow { left: -20px; } div.parties-custom-game-setup div.parties-custom-game-lower-half { direction: rtl; margin-top: 25px; display: flex; flex-direction: row; justify-content: space-between; } div.parties-custom-game-setup div.parties-custom-game-lower-half label { display: block; color: #f0e6d2; margin-bottom: 8px; } div.parties-custom-game-setup div.parties-custom-game-lower-half div.parties-custom-game-text-inputs > div { margin-bottom: 25px; } div.parties-custom-game-setup div.parties-custom-game-lower-half div.parties-custom-game-text-inputs > div:last-child { margin-bottom: 0px; } div.parties-custom-game-setup div.parties-custom-game-lower-half div.parties-custom-game-text-inputs lol-uikit-flat-input { width: 323px; } div.parties-custom-game-setup div.parties-custom-game-lower-half div.parties-custom-game-text-inputs ul.parties-custom-game-dropdown-fields { display: flex; width: 100%; list-style: none; margin-bottom: 25px; padding: 0; } div.parties-custom-game-setup div.parties-custom-game-lower-half div.parties-custom-game-text-inputs ul.parties-custom-game-dropdown-fields > li { flex: 1 1 100%; padding: 0 0 0 10px; } div.parties-custom-game-setup div.parties-custom-game-lower-half div.parties-custom-game-text-inputs ul.parties-custom-game-dropdown-fields > li:first-child { padding: 0; } div.parties-custom-game-setup div.parties-custom-game-lower-half div.parties-custom-game-radio-options { width: 487px; } div.parties-custom-game-setup div.parties-custom-game-lower-half div.parties-custom-game-radio-options lol-uikit-radio-input { --display: flex; --flex-direction: row; --justify-content: flex-start; --flex-wrap: wrap; } div.parties-custom-game-setup div.parties-custom-game-lower-half div.parties-custom-game-radio-options lol-uikit-radio-input lol-uikit-radio-input-option { display: block; min-width: 162px; } div.parties-custom-game-setup div.parties-custom-game-lower-half div.parties-custom-game-radio-options .parties-custom-game-spectator-field { margin-top: 22px; } lol-uikit-tooltip#parties-custom-game-name-error-tooltip lol-uikit-content-block { width: 323px; } .custom-root { padding-top: 10px; height: 100%; display: flex; flex-direction: column; } .custom-root .parties-invite-info-panel { left: 365px; top: 340px; height: 160px; animation-name: none; } .custom-root .parties-invite-info-panel .parties-invite-info-panel-body { border-bottom: 0; } .custom-root.custom-lobby-hide { display: none; } .custom-root .parties-footer-container { position: absolute; bottom: 0px; left: 0px; width: 100%; } .custom-root .parties-chat-room-custom { display: flex; flex-direction: column; position: fixed; left: 34px; top: 518px; height: 184px; width: 300px; border-radius: 2px; box-sizing: border-box; } .custom-game-invite-button-container { display: flex; position: absolute; top: 100px; right: 35px; align-items: center; margin-top: 4px; } .custom-game-invite-button-container lol-uikit-flat-button { min-width: 155px; } .spectator-info-spectators::-webkit-scrollbar, .spectator-info-spectators ::-webkit-scrollbar { width: 11px; background-color: transparent; } .spectator-info-spectators::-webkit-scrollbar-thumb, .spectator-info-spectators ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 6px; background-clip: padding-box; min-height: 32px; background-color: #785a28; } .spectator-info-spectators::-webkit-scrollbar-thumb:hover, .spectator-info-spectators ::-webkit-scrollbar-thumb:hover { background-color: #c8aa6e; } .spectator-info-spectators::-webkit-scrollbar-thumb:active, .spectator-info-spectators ::-webkit-scrollbar-thumb:active { background-color: #463714; } .spectator-info-spectators::-webkit-scrollbar-thumb:disabled, .spectator-info-spectators ::-webkit-scrollbar-thumb:disabled { background-color: #a09b8c; } .spectator-info-header { font-family: var(--font-display); } .spectator-info-spectators-list-item { font-family: var(--font-body); } .spectator-info-header, .spectator-info-spectators-list-item { -webkit-user-select: none; } .spectator-info-header, .spectator-info-spectators-list-item { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .spectator-info-header { text-transform: uppercase; } .spectator-info-header:lang(ko-kr), .spectator-info-header:lang(ja-jp), .spectator-info-header:lang(tr-tr), .spectator-info-header:lang(el-gr), .spectator-info-header:lang(th-th), .spectator-info-header:lang(zh-tw) { text-transform: none; } .spectator-info-header { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .spectator-info-header:lang(ar-ae) { letter-spacing: 0; } .spectator-info-header { color: #a09b8c; } .spectator-info-spectators-list-item { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .spectator-info-spectators-list-item:lang(ar-ae) { letter-spacing: 0; } .custom-game-spectator-info { display: flex; flex-direction: column; position: absolute; right: 35px; top: 340px; height: 155px; width: 319px; box-sizing: border-box; } .spectator-info-header { color: #a09b8c; direction: rtl; display: flex; flex-direction: row-reverse; position: relative; line-height: 32px; flex: 2 0 0; padding-right: 5px; } .spectator-info-header-wrapper { display: flex; } .spectator-info-spectators { overflow-y: auto; flex: 1 0 0; } .spectator-info-spectators-list { direction: rtl; justify-content: flex-end; padding: 0; margin: 0; list-style-type: none; display: flex; flex-flow: row wrap; } .spectator-info-spectators-list-item { display: flex; list-style-type: none; line-height: 2.7em; } .spectator-info-spectators-list-item:nth-child(odd) .spectator-info-name { width: 164px; } .spectator-info-spectators-list-item:nth-child(even) .spectator-info-name { width: 140px; } .spectator-info-spectators-list-item .spectator-info-name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .spectator-info-spectators-list-item .spectator-info-empty { color: #a09b8c; } .spectator-info-spectators-list-item:hover { color: #f0e6d2; } .custom-game-spectate-button { direction: rtl; min-width: 155px; } .custom-game-spectate-button-wrapper { display: flex; flex: 1 0 0; margin-top: -2px; } .custom-game-team .team-header { font-family: var(--font-display); } .custom-game-teams { font-family: var(--font-body); } .custom-game-teams, .custom-game-team .team-header { -webkit-user-select: none; } .custom-game-teams, .custom-game-team .team-header { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .custom-game-team .team-header { text-transform: uppercase; } .custom-game-team .team-header:lang(ko-kr), .custom-game-team .team-header:lang(ja-jp), .custom-game-team .team-header:lang(tr-tr), .custom-game-team .team-header:lang(el-gr), .custom-game-team .team-header:lang(th-th), .custom-game-team .team-header:lang(zh-tw) { text-transform: none; } .custom-game-team .team-header { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .custom-game-team .team-header:lang(ar-ae) { letter-spacing: 0; } .custom-game-team .team-header { color: #a09b8c; } .custom-game-teams { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .custom-game-teams:lang(ar-ae) { letter-spacing: 0; } .custom-game-teams { direction: rtl; display: flex; flex-flow: row-reverse nowrap; justify-content: space-between; width: 986px; color: #a09b8c; position: absolute; top: 36px; } .custom-game-team { width: 488px; } .custom-game-team .team-header { margin-left: 17px; margin-bottom: 3px; } .custom-game-team-members { list-style-type: none; padding: 0; margin: 0; } .custom-game-team-member { display: flex; flex-flow: row nowrap; box-sizing: border-box; width: 100%; height: 48px; justify-content: space-between; position: relative; border-bottom: thin solid rgba(240,230,210,0.25); padding: 0 8px 0 0; } .custom-game-team-member.is-current-custom-player { color: #c89b3c; } .custom-game-team-member.is-other-player:hover { background-image: -webkit-linear-gradient(0deg, rgba(240,230,210,0.2) 10%, rgba(240,230,210,0) 100%); color: #f0e6d2; } .custom-game-team-member.is-other-player:hover .custom-leader-icon { background-color: #f0e6d2; } .custom-game-team-member.is-other-player:hover.can-moderate .custom-summoner-level { display: none; } .custom-game-team-member.is-other-player:hover.can-moderate .custom-invite-privileges, .custom-game-team-member.is-other-player:hover.can-moderate .custom-kick-member-button { display: flex; } .custom-game-team-member.is-other-player:hover:not(.can-moderate).is-custom-friend .custom-member-info-stats { display: flex; } .custom-game-team-member.is-other-player:hover.is-custom-friend .custom-add-friend { display: none; } .custom-game-team-member.is-other-player:hover .custom-add-friend { display: flex; } .custom-game-team-member.is-other-player:hover .custom-member-info-stats { display: none; } .custom-game-team-member.is-custom-leader .custom-leader-icon { display: flex; width: 18px; height: 18px; -webkit-mask: url(/fe/lol-parties/captain-icon.png) no-repeat center; -webkit-mask-size: 18px; background-color: #a09b8c; } .custom-game-team-member.is-custom-friend .custom-add-friend { display: none; } .custom-game-team-member.is-bot.can-moderate .custom-summoner-level { display: none; } .custom-game-team-member.is-bot.can-moderate .custom-kick-member-button { display: flex; } .custom-game-team-member .custom-member-info-right { display: flex; align-items: flex-end; } .custom-game-team-member .custom-member-info-right > :last-child { margin: 0; } .custom-game-team-member .custom-member-info-right > div { margin: 0 0 0 10px; align-self: center; } .custom-game-team-member .custom-member-info-right .custom-member-info-stats { display: flex; flex-flow: column nowrap; align-items: flex-end; } .custom-game-team-member .custom-member-info-right lol-uikit-flat-button-secondary { min-width: 155px; } .custom-game-team-member .custom-member-info-right .custom-bot-options { display: flex; flex-flow: row nowrap; } .custom-game-team-member .custom-member-info-right .custom-bot-options > :last-child { margin: 0; } .custom-game-team-member .custom-member-info-right .custom-bot-options lol-uikit-framed-dropdown { width: 155px; margin: 0 0 0 10px; font-weight: bold; background-color: #1e2328; } .custom-game-team-member .custom-member-info-right .custom-bot-options lol-uikit-framed-dropdown.custom-bot-champions-dropdown { width: 240px; } .custom-game-team-member .custom-member-info-right .custom-bot-options lol-uikit-framed-dropdown * { cursor: inherit; align-self: center; } .custom-game-team-member .custom-member-info-right .custom-bot-options lol-uikit-framed-dropdown .custom-bot-champions-dropdown-option { cursor: inherit; height: 34px; } .custom-game-team-member .custom-member-info-right .custom-bot-options lol-uikit-framed-dropdown .custom-bot-champions-dropdown-option:not(:active):not([disabled]):hover .custom-member-bot-icon .ring { background-position-y: -32px; } .custom-game-team-member .custom-member-info-right .custom-bot-options lol-uikit-framed-dropdown .custom-bot-champions-dropdown-option:not([disabled]):active .custom-member-bot-icon .ring { background-position-y: -64px; } .custom-game-team-member .custom-member-info-right .custom-bot-options lol-uikit-framed-dropdown .custom-bot-champions-dropdown-option[disabled] .custom-member-bot-icon { opacity: 0.5; } .custom-game-team-member .custom-member-info-right .custom-bot-options lol-uikit-framed-dropdown .custom-bot-champions-dropdown-option[disabled] .custom-member-bot-icon .ring { background-position-y: -96px; } .custom-game-team-member .custom-member-info-right .custom-bot-options lol-uikit-framed-dropdown .custom-bot-champions-dropdown-option .custom-bot-champions-dropdown-option-content { height: 34px; display: flex; flex-flow: row nowrap; } .custom-game-team-member .custom-member-info-right .custom-bot-options lol-uikit-framed-dropdown .custom-bot-champions-dropdown-option .custom-bot-champions-dropdown-option-content .custom-bot-champion-name { margin: 0 10px 0 0; } .custom-game-team-member .custom-member-info-left { display: flex; flex-flow: row nowrap; align-items: center; } .custom-game-team-member .custom-member-info-left .custom-member-club-tag { margin: 0 3px 0 0; } .custom-game-team-member .custom-member-info-left > div { margin: 0 10px 0 0; } .custom-game-team-member .custom-member-info-left > div.custom-member-icon { margin: 0 3px 0 0; } .custom-game-team-member .custom-member-info-left .custom-info-left-first { min-width: 35px; } .custom-game-team-member .custom-member-info-left .custom-info-left-first .custom-summoner-level hr { width: 12px; margin: 0px 2px; border-color: rgba(160,155,140,0.8); border-left: 0; border-right: 0; } .custom-game-team-member.can-moderate .custom-member-bot-skill-level, .custom-game-team-member.can-moderate .custom-member-bot-name { display: none; } .custom-game-team-member:not(.can-moderate) .custom-placeholder-buttons .member-add-bot { display: none; } .custom-game-team-member .custom-placeholder-buttons { display: flex; flex-flow: row nowrap; align-items: center; } .custom-game-team-member .custom-placeholder-buttons lol-uikit-flat-button { width: 156px; } .custom-game-team-member .custom-placeholder-buttons lol-uikit-flat-button[disabled="true"] { pointer-events: none; } .custom-leader-icon, .custom-add-friend, .custom-invite-privileges { display: none; } .custom-team-member-placeholder { color: #5c5b57; align-self: center; } .custom-invite-privilege-button { background: none no-repeat; background-image: url(/fe/lol-parties/custom-privileges.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 31px; height: 31px; cursor: pointer; padding: 0; border: none; transition: background-image 0.1s ease-out; outline: none; } .custom-invite-privilege-button:hover:not(:disabled) { background-image: url(/fe/lol-parties/custom-privileges-hover.png); } .custom-invite-privilege-button:active:not(:disabled) { transition-duration: 0s; background-image: url(/fe/lol-parties/custom-privileges-click.png); } .custom-invite-privilege-button:disabled { cursor: auto; } .custom-invite-privilege-button.privileges-granted { background-image: url(/fe/lol-parties/custom-privileges-granted.png); } .custom-invite-privilege-button.privileges-granted:hover:not(:disabled) { background-image: url(/fe/lol-parties/custom-privileges-granted-hover.png); } .custom-invite-privilege-button.privileges-granted:active:not(:disabled) { transition-duration: 0s; background-image: url(/fe/lol-parties/custom-privileges-granted-click.png); } .custom-add-friend-button { background: none no-repeat; background-image: url(/fe/lol-parties/custom-add-friend.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 32px; height: 32px; cursor: pointer; padding: 0; border: none; transition: background-image 0.1s ease-out; outline: none; } .custom-add-friend-button:hover:not(:disabled) { background-image: url(/fe/lol-parties/custom-add-friend-hover.png); } .custom-add-friend-button:active:not(:disabled) { transition-duration: 0s; background-image: url(/fe/lol-parties/custom-add-friend-click.png); } .custom-add-friend-button:disabled { cursor: auto; } .custom-add-friend-button:disabled { background-image: url(/fe/lol-parties/custom-add-friend-disabled.png); } .custom-kick-member-button { display: none; cursor: pointer; -webkit-mask: url(/fe/lol-parties/custom-kick.png) no-repeat center; -webkit-mask-size: 18px; background-color: #c8aa6e; width: 18px; height: 18px; } .custom-kick-member-button:hover:not(:disabled) { background-color: #f0e6d2; } .custom-kick-member-button:active:not(:disabled) { background-color: #463714; } .custom-member-bot-icon { width: 32px; height: 32px; position: relative; } .custom-member-bot-icon img { position: absolute; overflow: hidden; border-radius: 50%; border: 2px solid transparent; box-sizing: border-box; width: 100%; height: 100%; background-color: #010a13; } .custom-member-bot-icon .ring { position: absolute; width: 100%; height: 100%; background: url(/fe/lol-parties/bot-icon-ring.png) no-repeat top; background-size: cover; } .custom-game-list-title, .custom-game-list-table-header-private, .custom-game-list-table-header-name, .custom-game-list-table-header-owner, .custom-game-list-table-header-map, .custom-game-list-table-header-slots, .custom-game-list-table-header-spectators, .custom-game-list-table-body-private, .custom-game-list-table-body-name, .custom-game-list-table-body-owner, .custom-game-list-table-body-map, .custom-game-list-table-body-slots, .custom-game-list-table-body-spectators { font-family: var(--font-display); } .custom-game-list-title, .custom-game-list-table-header-private, .custom-game-list-table-header-name, .custom-game-list-table-header-owner, .custom-game-list-table-header-map, .custom-game-list-table-header-slots, .custom-game-list-table-header-spectators, .custom-game-list-table-body-private, .custom-game-list-table-body-name, .custom-game-list-table-body-owner, .custom-game-list-table-body-map, .custom-game-list-table-body-slots, .custom-game-list-table-body-spectators { -webkit-user-select: none; } .custom-game-list-title, .custom-game-list-table-header-private, .custom-game-list-table-header-name, .custom-game-list-table-header-owner, .custom-game-list-table-header-map, .custom-game-list-table-header-slots, .custom-game-list-table-header-spectators, .custom-game-list-table-body-private, .custom-game-list-table-body-name, .custom-game-list-table-body-owner, .custom-game-list-table-body-map, .custom-game-list-table-body-slots, .custom-game-list-table-body-spectators { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .custom-game-list-title, .custom-game-list-table-header-private, .custom-game-list-table-header-name, .custom-game-list-table-header-owner, .custom-game-list-table-header-map, .custom-game-list-table-header-slots, .custom-game-list-table-header-spectators, .custom-game-list-table-body-private, .custom-game-list-table-body-name, .custom-game-list-table-body-owner, .custom-game-list-table-body-map, .custom-game-list-table-body-slots, .custom-game-list-table-body-spectators { text-transform: uppercase; } .custom-game-list-title:lang(ko-kr), .custom-game-list-table-header-private:lang(ko-kr), .custom-game-list-table-header-name:lang(ko-kr), .custom-game-list-table-header-owner:lang(ko-kr), .custom-game-list-table-header-map:lang(ko-kr), .custom-game-list-table-header-slots:lang(ko-kr), .custom-game-list-table-header-spectators:lang(ko-kr), .custom-game-list-table-body-private:lang(ko-kr), .custom-game-list-table-body-name:lang(ko-kr), .custom-game-list-table-body-owner:lang(ko-kr), .custom-game-list-table-body-map:lang(ko-kr), .custom-game-list-table-body-slots:lang(ko-kr), .custom-game-list-table-body-spectators:lang(ko-kr), .custom-game-list-title:lang(ja-jp), .custom-game-list-table-header-private:lang(ja-jp), .custom-game-list-table-header-name:lang(ja-jp), .custom-game-list-table-header-owner:lang(ja-jp), .custom-game-list-table-header-map:lang(ja-jp), .custom-game-list-table-header-slots:lang(ja-jp), .custom-game-list-table-header-spectators:lang(ja-jp), .custom-game-list-table-body-private:lang(ja-jp), .custom-game-list-table-body-name:lang(ja-jp), .custom-game-list-table-body-owner:lang(ja-jp), .custom-game-list-table-body-map:lang(ja-jp), .custom-game-list-table-body-slots:lang(ja-jp), .custom-game-list-table-body-spectators:lang(ja-jp), .custom-game-list-title:lang(tr-tr), .custom-game-list-table-header-private:lang(tr-tr), .custom-game-list-table-header-name:lang(tr-tr), .custom-game-list-table-header-owner:lang(tr-tr), .custom-game-list-table-header-map:lang(tr-tr), .custom-game-list-table-header-slots:lang(tr-tr), .custom-game-list-table-header-spectators:lang(tr-tr), .custom-game-list-table-body-private:lang(tr-tr), .custom-game-list-table-body-name:lang(tr-tr), .custom-game-list-table-body-owner:lang(tr-tr), .custom-game-list-table-body-map:lang(tr-tr), .custom-game-list-table-body-slots:lang(tr-tr), .custom-game-list-table-body-spectators:lang(tr-tr), .custom-game-list-title:lang(el-gr), .custom-game-list-table-header-private:lang(el-gr), .custom-game-list-table-header-name:lang(el-gr), .custom-game-list-table-header-owner:lang(el-gr), .custom-game-list-table-header-map:lang(el-gr), .custom-game-list-table-header-slots:lang(el-gr), .custom-game-list-table-header-spectators:lang(el-gr), .custom-game-list-table-body-private:lang(el-gr), .custom-game-list-table-body-name:lang(el-gr), .custom-game-list-table-body-owner:lang(el-gr), .custom-game-list-table-body-map:lang(el-gr), .custom-game-list-table-body-slots:lang(el-gr), .custom-game-list-table-body-spectators:lang(el-gr), .custom-game-list-title:lang(th-th), .custom-game-list-table-header-private:lang(th-th), .custom-game-list-table-header-name:lang(th-th), .custom-game-list-table-header-owner:lang(th-th), .custom-game-list-table-header-map:lang(th-th), .custom-game-list-table-header-slots:lang(th-th), .custom-game-list-table-header-spectators:lang(th-th), .custom-game-list-table-body-private:lang(th-th), .custom-game-list-table-body-name:lang(th-th), .custom-game-list-table-body-owner:lang(th-th), .custom-game-list-table-body-map:lang(th-th), .custom-game-list-table-body-slots:lang(th-th), .custom-game-list-table-body-spectators:lang(th-th), .custom-game-list-title:lang(zh-tw), .custom-game-list-table-header-private:lang(zh-tw), .custom-game-list-table-header-name:lang(zh-tw), .custom-game-list-table-header-owner:lang(zh-tw), .custom-game-list-table-header-map:lang(zh-tw), .custom-game-list-table-header-slots:lang(zh-tw), .custom-game-list-table-header-spectators:lang(zh-tw), .custom-game-list-table-body-private:lang(zh-tw), .custom-game-list-table-body-name:lang(zh-tw), .custom-game-list-table-body-owner:lang(zh-tw), .custom-game-list-table-body-map:lang(zh-tw), .custom-game-list-table-body-slots:lang(zh-tw), .custom-game-list-table-body-spectators:lang(zh-tw) { text-transform: none; } .custom-game-list-table-body-private, .custom-game-list-table-body-name, .custom-game-list-table-body-owner, .custom-game-list-table-body-map, .custom-game-list-table-body-slots, .custom-game-list-table-body-spectators { text-transform: none; } .custom-game-list-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .custom-game-list-title:lang(ar-ae) { letter-spacing: 0; } .custom-game-list-table-body-private, .custom-game-list-table-body-name, .custom-game-list-table-body-owner, .custom-game-list-table-body-map, .custom-game-list-table-body-slots, .custom-game-list-table-body-spectators { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .custom-game-list-table-body-private:lang(ar-ae), .custom-game-list-table-body-name:lang(ar-ae), .custom-game-list-table-body-owner:lang(ar-ae), .custom-game-list-table-body-map:lang(ar-ae), .custom-game-list-table-body-slots:lang(ar-ae), .custom-game-list-table-body-spectators:lang(ar-ae) { letter-spacing: 0; } .custom-game-list-table-body-private, .custom-game-list-table-body-name, .custom-game-list-table-body-owner, .custom-game-list-table-body-map, .custom-game-list-table-body-slots, .custom-game-list-table-body-spectators { letter-spacing: 0.0375em; } .custom-game-list-table-body-private:lang(ar-ae), .custom-game-list-table-body-name:lang(ar-ae), .custom-game-list-table-body-owner:lang(ar-ae), .custom-game-list-table-body-map:lang(ar-ae), .custom-game-list-table-body-slots:lang(ar-ae), .custom-game-list-table-body-spectators:lang(ar-ae) { letter-spacing: 0; } .custom-game-list-table-header-private, .custom-game-list-table-header-name, .custom-game-list-table-header-owner, .custom-game-list-table-header-map, .custom-game-list-table-header-slots, .custom-game-list-table-header-spectators { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .custom-game-list-table-header-private:lang(ja-jp), .custom-game-list-table-header-name:lang(ja-jp), .custom-game-list-table-header-owner:lang(ja-jp), .custom-game-list-table-header-map:lang(ja-jp), .custom-game-list-table-header-slots:lang(ja-jp), .custom-game-list-table-header-spectators:lang(ja-jp) { font-size: 13px; } .custom-game-list-table-header-private:lang(ar-ae), .custom-game-list-table-header-name:lang(ar-ae), .custom-game-list-table-header-owner:lang(ar-ae), .custom-game-list-table-header-map:lang(ar-ae), .custom-game-list-table-header-slots:lang(ar-ae), .custom-game-list-table-header-spectators:lang(ar-ae) { letter-spacing: 0; } .custom-game-list { margin-top: 30px; } .custom-game-list-header { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; margin-bottom: 12px; } .custom-game-list-title { direction: rtl; } .custom-game-list-subheader { direction: rtl; display: flex; align-items: center; padding-bottom: 16px; border-bottom: thin solid #808080; } .custom-game-list-button-refresh .custom-game-list-button-icon::before, .custom-game-list-table-body-private:not(.custom-lock-hidden)::before { display: inline-block; width: 100%; height: 100%; background-color: #cdbe91; } .custom-game-list-button-refresh { height: 30px; width: 30px; margin: 0 0 0 15px; } .custom-game-list-button-refresh .custom-game-list-button-icon { background: #1e2328; } .custom-game-list-button-refresh .custom-game-list-button-icon::before { content: ''; -webkit-mask-image: url(/fe/lol-parties/icon-refresh.png); -webkit-mask-size: 18px 18px; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; } .custom-game-list-button-refresh:hover .custom-game-list-button-icon::before { background-color: #f0e6d2; } .custom-game-list-button-refresh:active .custom-game-list-button-icon::before { background-color: #785a28; } .custom-game-list-button-refresh[disabled] .custom-game-list-button-icon::before { background-color: #785a28; } .custom-game-list-filters { display: flex; } .custom-game-list-search { width: 250px; margin: 0 0 0 15px; } .custom-game-list-filters-checkbox { margin: 0 0 0 15px; } .custom-game-list-body { padding-top: 10px; } .custom-game-list-table-scroll { height: 378px; } .custom-game-list-table { position: relative; width: 1024px; left: -12px; table-layout: fixed; border-collapse: collapse; } .custom-game-list-table-header-row { direction: rtl; display: flex; align-items: center; height: 32px; margin: 0 0 0 12px; } .custom-game-list-table-header-row .custom-game-list-table-header-private { width: 5.75%; } .custom-game-list-table-header-row .custom-game-list-table-header-name { width: 32.5%; } .custom-game-list-table-header-row .custom-game-list-table-header-owner { width: 27.5%; } .custom-game-list-table-header-row .custom-game-list-table-header-map { width: 20%; } .custom-game-list-table-header-row .custom-game-list-table-header-slots { width: 7.25%; } .custom-game-list-table-header-row .custom-game-list-table-header-spectators { width: 7.25%; } .custom-game-list-table-header-row th { text-align: right; } .custom-game-list-table-header { display: block; } .custom-game-list-table-header-private { color: #cdbe91; text-align: left; cursor: pointer; } .custom-game-list-table-header-name { color: #cdbe91; text-align: left; cursor: pointer; } .custom-game-list-table-header-owner { color: #cdbe91; text-align: left; cursor: pointer; } .custom-game-list-table-header-map { color: #cdbe91; text-align: left; cursor: pointer; } .custom-game-list-table-header-slots { color: #cdbe91; text-align: left; cursor: pointer; } .custom-game-list-table-header-spectators { color: #cdbe91; text-align: left; cursor: pointer; } .custom-game-list-table-header-name { padding-right: 10px; } .custom-game-list-table-header-slots, .custom-game-list-table-header-spectators { text-align: center; display: flex; align-items: center; justify-content: center; cursor: default; } .custom-game-list-table-header-slots::before { display: inline-block; content: ''; -webkit-mask-image: url(/fe/lol-parties/icon-person-group.png); -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; width: 18px; height: 18px; background-color: #a09b8c; } .custom-game-list-table-header-spectators::before { display: inline-block; content: ''; -webkit-mask-image: url(/fe/lol-parties/icon-spectate.png); -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; width: 18px; height: 18px; background-color: #a09b8c; } .custom-game-header-desc { color: #f0e6d2; } .custom-game-header-desc:after { content: "\25B2"; font-size: 10px; padding-left: 6px; } .custom-game-header-asc { color: #f0e6d2; } .custom-game-header-asc:after { content: "\25BC"; font-size: 10px; padding-left: 6px; } .custom-game-list-table-body-row { display: flex; position: relative; height: 32px; align-items: center; cursor: pointer; } .custom-game-list-table-body-row .custom-game-list-table-body-private { width: 5.75%; } .custom-game-list-table-body-row .custom-game-list-table-body-name { width: 32.5%; } .custom-game-list-table-body-row .custom-game-list-table-body-owner { width: 27.5%; } .custom-game-list-table-body-row .custom-game-list-table-body-map { width: 20%; } .custom-game-list-table-body-row .custom-game-list-table-body-slots { width: 7.25%; } .custom-game-list-table-body-row .custom-game-list-table-body-spectators { width: 7.25%; } .custom-game-list-table-body-row.custom-list-row-selected { background-image: linear-gradient(to right, rgba(55,144,212,0.3) 0%, rgba(10,150,170,0.1) 100%); background-position: top left; background-repeat: no-repeat; background-size: 100%; } .custom-game-list-table-body-row.custom-list-row-selected:before { position: absolute; content: ''; border-left: 4px solid #785a28; height: 100%; } .custom-game-list-table-body-row:hover:not(.custom-list-row-selected) { background: url(/fe/lol-parties/table_hover_border_top_bottom.png) no-repeat, url(/fe/lol-parties/table_hover_border_top_bottom.png) no-repeat; background-position: left top, left bottom; } .custom-game-list-table-body-row:hover:not(.custom-list-row-selected):before { position: absolute; content: ''; border-left: 4px solid #785a28; height: 100%; } .custom-game-list-table-body { display: block; width: 1012px; } .custom-game-list-table-body-private { color: #a09b8c; white-space: nowrap; } .custom-list-row-selected .custom-game-list-table-body-private, .custom-game-list-table-body-row:hover .custom-game-list-table-body-private { color: #f0e6d2; } .custom-game-list-table-body-name { color: #a09b8c; white-space: nowrap; } .custom-list-row-selected .custom-game-list-table-body-name, .custom-game-list-table-body-row:hover .custom-game-list-table-body-name { color: #f0e6d2; } .custom-game-list-table-body-owner { color: #a09b8c; white-space: nowrap; } .custom-list-row-selected .custom-game-list-table-body-owner, .custom-game-list-table-body-row:hover .custom-game-list-table-body-owner { color: #f0e6d2; } .custom-game-list-table-body-map { color: #a09b8c; white-space: nowrap; } .custom-list-row-selected .custom-game-list-table-body-map, .custom-game-list-table-body-row:hover .custom-game-list-table-body-map { color: #f0e6d2; } .custom-game-list-table-body-slots { color: #a09b8c; white-space: nowrap; } .custom-list-row-selected .custom-game-list-table-body-slots, .custom-game-list-table-body-row:hover .custom-game-list-table-body-slots { color: #f0e6d2; } .custom-game-list-table-body-spectators { color: #a09b8c; white-space: nowrap; } .custom-list-row-selected .custom-game-list-table-body-spectators, .custom-game-list-table-body-row:hover .custom-game-list-table-body-spectators { color: #f0e6d2; } .custom-game-list-table-body-name { padding-right: 10px; overflow: hidden; text-overflow: ellipsis; } .custom-game-list-table-body-private { width: 100%; height: 100%; } .custom-game-list-table-body-private:not(.custom-lock-hidden)::before { -webkit-mask-image: url(/fe/lol-parties/icon-lock.png); -webkit-mask-size: 18px 18px; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; content: ''; position: relative; right: -12px; background-color: #a09b8c; } .custom-list-row-selected .custom-game-list-table-body-private:not(.custom-lock-hidden)::before, .custom-game-list-table-body-row:hover .custom-game-list-table-body-private:not(.custom-lock-hidden)::before { background-color: #f0e6d2; } .custom-game-list-table-body-slots, .custom-game-list-table-body-spectators { text-align: center; } div.custom-game-tournament-code-container { display: flex; justify-content: flex-end; } div.custom-game-tournament-code-container button { width: 38px; height: 32px; border: 0; padding: 0; background-size: 38px 32px; background-repeat: no-repeat; background-image: url(/fe/lol-parties/btn-tournament.png); cursor: pointer; outline: 0; } div.custom-game-tournament-code-container button:disabled { cursor: default; background-image: url(/fe/lol-parties/btn-tournament-inactive.png); } div.custom-game-tournament-code-container button:hover:not(:disabled) { background-image: url(/fe/lol-parties/btn-tournament-hover.png); } div.custom-game-tournament-code-container button:active:not(:disabled) { background-image: url(/fe/lol-parties/btn-tournament-click.png); } .custom-game-list-tournament-code { display: none; } lol-uikit-content-block .custom-game-list-tournament-code { display: block; } .custom-game-list-tournament-code-input { width: 100%; } .tft-lobby .patch-notes-button { font-family: var(--font-body); } .tft-lobby .patch-notes-button { -webkit-user-select: none; } .tft-lobby .patch-notes-button { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .tft-lobby .patch-notes-button { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .tft-lobby .patch-notes-button:lang(ja-jp) { font-size: 13px; } .tft-lobby .patch-notes-button:lang(ar-ae) { letter-spacing: 0; } .tft-lobby .patch-notes-button { color: #0596aa; text-decoration: none; } .tft-lobby .patch-notes-button:hover, .tft-lobby .patch-notes-button.hover { color: #cdfafa; } .tft-lobby .patch-notes-button:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-parties/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .tft-lobby .patch-notes-button:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .tft-lobby .patch-notes-button:hover:after { background-color: #cdfafa; } .tft-lobby { padding-top: 3px; } .tft-lobby .patch-notes-button { direction: rtl; cursor: pointer; padding-right: 20px; } .tft-lobby .parties-lower-section { padding: 0px 30px; } .tft-lobby .tft-cards-container { direction: rtl; display: flex; flex-direction: column; flex: 1; } .tft-lobby .tft-cards-first-row { display: flex; flex-direction: row; } .tft-lobby .tft-cards-first-row > div { width: 100%; flex-direction: column; margin-right: 12px; } .tft-lobby .tft-cards-first-row > div:last-child { margin-right: 0px; } .tft-lobby .tft-cards-second-row { display: flex; flex-direction: row; justify-content: center; } .tft-lobby .tft-cards-second-row .tft-player-card { margin-right: 12px; } .tft-lobby .tft-cards-second-row .tft-player-card:last-child { margin-right: 0px; } .tft-lobby .parties-invite-dropzone { height: 396px; } .tft-lobby .split-panel-header { border-color: #5b5a56; } .tft-lobby .split-panel-header .split-panel-header-title.disabled { color: #a09b8c; } .tft-player-card:hover:not(.tft-player-card-self):not(.tft-player-invited) .inner-border-1 { border: thin solid transparent; border-image: linear-gradient(to top, #c89b3c, #f0e6d2) 1; } .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .tft-player-card-self .icon-wrapper .level-label { font-family: var(--font-display); } .tft-player-card .current-rank .rank-name, .tft-player-card-self .cosmetics-section .cosmetics-wrapper { font-family: var(--font-body); } .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .tft-player-card .current-rank .rank-name, .tft-player-card-self .icon-wrapper .level-label, .tft-player-card-self .cosmetics-section .cosmetics-wrapper { -webkit-user-select: none; } .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .tft-player-card .current-rank .rank-name, .tft-player-card-self .icon-wrapper .level-label, .tft-player-card-self .cosmetics-section .cosmetics-wrapper { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .tft-player-card-self .icon-wrapper .level-label { text-transform: uppercase; } .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ko-kr), .tft-player-card-self .icon-wrapper .level-label:lang(ko-kr), .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ja-jp), .tft-player-card-self .icon-wrapper .level-label:lang(ja-jp), .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(tr-tr), .tft-player-card-self .icon-wrapper .level-label:lang(tr-tr), .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(el-gr), .tft-player-card-self .icon-wrapper .level-label:lang(el-gr), .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(th-th), .tft-player-card-self .icon-wrapper .level-label:lang(th-th), .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(zh-tw), .tft-player-card-self .icon-wrapper .level-label:lang(zh-tw) { text-transform: none; } .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { text-transform: none; } .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ar-ae) { letter-spacing: 0; } .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { letter-spacing: 0.0375em; } .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ar-ae) { letter-spacing: 0; } .tft-player-card-self .icon-wrapper .level-label { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .tft-player-card-self .icon-wrapper .level-label:lang(ja-jp) { font-size: 13px; } .tft-player-card-self .icon-wrapper .level-label:lang(ar-ae) { letter-spacing: 0; } .tft-player-card .current-rank .rank-name, .tft-player-card-self .cosmetics-section .cosmetics-wrapper { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .tft-player-card .current-rank .rank-name:lang(ja-jp), .tft-player-card-self .cosmetics-section .cosmetics-wrapper:lang(ja-jp) { font-size: 13px; } .tft-player-card .current-rank .rank-name:lang(ar-ae), .tft-player-card-self .cosmetics-section .cosmetics-wrapper:lang(ar-ae) { letter-spacing: 0; } @-moz-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .tft-player-card { width: 100%; height: 122px; border: thin solid rgba(1,10,19,0.595); margin-bottom: 10px; position: relative; box-sizing: border-box; text-align: center; } .tft-player-card .inner-border-1, .tft-player-card .inner-border-2 { box-sizing: border-box; width: 100%; height: 100%; } .tft-player-card .inner-border-1 { border: thin solid rgba(60,60,65,0.7); } .tft-player-card .inner-border-2 { border: thin solid rgba(1,10,19,0.595); background-color: rgba(1,10,19,0.7); } .tft-player-card .icon-wrapper { width: 50px; height: 50px; margin: 11px auto 0; padding: 2px; position: relative; box-sizing: border-box; } .tft-player-card .icon-wrapper .icon-frame { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url(/fe/lol-parties/player-icon-frame.png); background-size: contain; } .tft-player-card .icon-wrapper .icon-image { width: 100%; height: 100%; border-radius: 50%; background-size: contain; background-repeat: no-repeat; } .tft-player-card .player-party-controls { top: 0; } .tft-player-card .player-party-controls .parties-player-labels-wrapper { position: relative; top: 65px; flex-direction: row; justify-content: center; } .tft-player-card .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { color: #a09b8c; } .tft-player-card .player-party-controls .parties-player-labels-wrapper .club-tag-container { margin-left: 5px; } .tft-player-card .player-party-controls .player-party-tools { top: 5px; right: auto; left: 5px; flex-direction: column; align-items: flex-end; justify-content: flex-end; } .tft-player-card .player-party-controls .player-lobby-restrictions { top: 45px; right: 90px; } .tft-player-card .player-party-controls .player-management-button-add-friend { margin: 0; } .tft-player-card .current-rank { width: 100%; position: absolute; bottom: 10px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .tft-player-card .current-rank .rank-icon { display: inline-block; width: 22px; height: 18px; background-size: cover; background-repeat: no-repeat; margin: 0 0 0 8px; } .tft-player-card .current-rank .rank-name { padding-top: 9px; color: #5b5a56; } .tft-player-card:hover:not(.tft-player-card-self):not(.tft-player-invited) { border: thin solid rgba(1,10,19,0.9); } .tft-player-card.tft-player-invited { border: 0; padding: 1px; } .tft-player-card.tft-player-invited .inner-border-1 { border: 0; padding: 8px; background-color: rgba(1,10,19,0.4); } .tft-player-card.tft-player-invited .inner-border-2 { border: thin solid rgba(10,150,170,0.4); background-color: unset; } .tft-player-card.tft-player-invited .invited-spinner { width: 30px; height: 30px; margin: 35px auto 0; background-image: url(/fe/lol-parties/spinner-large.png); background-size: contain; opacity: 0.5; animation: parties-spin 10s linear infinite; } .tft-player-card.tft-player-placeholder { border: 0; padding: 1px; } .tft-player-card.tft-player-placeholder .inner-border-1 { border: 0; padding: 8px; background-color: rgba(1,10,19,0.4); } .tft-player-card.tft-player-placeholder .inner-border-2 { border: thin solid rgba(240,230,210,0.15); background-color: unset; } .tft-player-card.tft-player-placeholder .placeholder-invite-button { top: 0; left: 0; margin-top: 0; } .tft-player-card.tft-player-not-ready .icon-wrapper { opacity: 0.7; } .tft-player-card.tft-player-not-ready .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { color: #5c5b57; } .tft-player-card.tft-player-not-ready .lol-not-ready-loader { top: 93px; } .tft-player-card-self { height: 254px; border: thin solid rgba(0,0,0,0.51); } .tft-player-card-self .inner-border-1 { border: thin solid rgba(70,55,20,0.7); } .tft-player-card-self .inner-border-2 { border: thin solid rgba(1,10,19,0.595); } .tft-player-card-self .icon-wrapper { margin-top: -22px; width: 105px; height: 105px; padding: 8px; } .tft-player-card-self .icon-wrapper .icon-frame { background-image: url(/fe/lol-parties/captain-icon-frame-with-level.png); height: 111px; } .tft-player-card-self .icon-wrapper .level-label { position: absolute; bottom: 0; left: 0; text-align: center; width: 100%; } .tft-player-card-self .player-party-controls .parties-player-labels-wrapper { top: 93px; min-height: 30px; } .tft-player-card-self .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-leader-icon { position: absolute; width: 28px; height: 28px; transform: translateY(-138px); } .tft-player-card-self .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { font-size: 17px; } .tft-player-card-self .player-party-controls .parties-player-labels-wrapper .player-lobby-restrictions { top: 73px; right: 150px; } .tft-player-card-self .player-party-controls .parties-player-labels-wrapper .club-tag-container { justify-content: center; } .tft-player-card-self .current-rank { bottom: 110px; } .tft-player-card-self .current-rank .rank-name { color: #a09b8c; } .tft-player-card-self .cosmetics-section { position: absolute; padding-top: 8px; box-sizing: border-box; bottom: 9px; left: 15px; right: 15px; display: flex; flex-direction: row; justify-content: center; border-top: thin solid rgba(91,90,86,0.5); } .tft-player-card-self .cosmetics-section .cosmetics-wrapper { margin-right: 9px; color: #a09b8c; display: flex; flex-direction: column; align-items: center; } .tft-player-card-self .cosmetics-section lol-parties-cosmetics-picker { margin-top: 3px; width: 93px; height: 62px; } .queue-dodge-error-dialog .parties-queue-dodge-summoners { font-family: var(--font-display); } .queue-dodge-error-dialog .parties-queue-dodge-summoners { -webkit-user-select: none; } .queue-dodge-error-dialog .parties-queue-dodge-summoners { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .queue-dodge-error-dialog .parties-queue-dodge-summoners { text-transform: uppercase; } .queue-dodge-error-dialog .parties-queue-dodge-summoners:lang(ko-kr), .queue-dodge-error-dialog .parties-queue-dodge-summoners:lang(ja-jp), .queue-dodge-error-dialog .parties-queue-dodge-summoners:lang(tr-tr), .queue-dodge-error-dialog .parties-queue-dodge-summoners:lang(el-gr), .queue-dodge-error-dialog .parties-queue-dodge-summoners:lang(th-th), .queue-dodge-error-dialog .parties-queue-dodge-summoners:lang(zh-tw) { text-transform: none; } .queue-dodge-error-dialog .parties-queue-dodge-summoners { text-transform: none; } .queue-dodge-error-dialog .parties-queue-dodge-summoners { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .queue-dodge-error-dialog .parties-queue-dodge-summoners:lang(ar-ae) { letter-spacing: 0; } .queue-dodge-error-dialog .parties-queue-dodge-summoners { letter-spacing: 0.0375em; } .queue-dodge-error-dialog .parties-queue-dodge-summoners:lang(ar-ae) { letter-spacing: 0; } .queue-dodge-error-dialog .parties-queue-dodge-summoners { margin-bottom: 0; } .parties-invite-dialog .available-players { font-family: var(--font-display); } .parties-invite-dialog .search-error { font-family: var(--font-body); } .parties-invite-dialog .available-players { font-family: var(--font-display); } .parties-invite-dialog .search-error { font-family: var(--font-body); } .parties-invite-dialog .search-error, .parties-invite-dialog .available-players { -webkit-user-select: none; } .parties-invite-dialog .search-error, .parties-invite-dialog .available-players { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .parties-invite-dialog .available-players { text-transform: uppercase; } .parties-invite-dialog .available-players:lang(ko-kr), .parties-invite-dialog .available-players:lang(ja-jp), .parties-invite-dialog .available-players:lang(tr-tr), .parties-invite-dialog .available-players:lang(el-gr), .parties-invite-dialog .available-players:lang(th-th), .parties-invite-dialog .available-players:lang(zh-tw) { text-transform: none; } .parties-invite-dialog .available-players { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .parties-invite-dialog .available-players:lang(ar-ae) { letter-spacing: 0; } .parties-invite-dialog .search-error { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .parties-invite-dialog .search-error:lang(ja-jp) { font-size: 13px; } .parties-invite-dialog .search-error:lang(ar-ae) { letter-spacing: 0; } .parties-invite-dialog .available-players { font-family: var(--font-display); } .parties-invite-dialog .search-error { font-family: var(--font-body); } .parties-invite-dialog .available-players { font-family: var(--font-display); } .parties-invite-dialog .search-error { font-family: var(--font-body); } .parties-invite-dialog .search-error, .parties-invite-dialog .available-players { -webkit-user-select: none; } .parties-invite-dialog .search-error, .parties-invite-dialog .available-players { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .parties-invite-dialog .available-players { text-transform: uppercase; } .parties-invite-dialog .available-players:lang(ko-kr), .parties-invite-dialog .available-players:lang(ja-jp), .parties-invite-dialog .available-players:lang(tr-tr), .parties-invite-dialog .available-players:lang(el-gr), .parties-invite-dialog .available-players:lang(th-th), .parties-invite-dialog .available-players:lang(zh-tw) { text-transform: none; } .parties-invite-dialog .available-players { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .parties-invite-dialog .available-players:lang(ar-ae) { letter-spacing: 0; } .parties-invite-dialog .search-error { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .parties-invite-dialog .search-error:lang(ja-jp) { font-size: 13px; } .parties-invite-dialog .search-error:lang(ar-ae) { letter-spacing: 0; } .parties-invite-dialog .search-box-container .search { border: 0; color: transparent; cursor: pointer; transition: -webkit-filter $transitionSpeed; font: 0/0 a; outline: none; text-shadow: none; } .parties-invite-dialog .search-box-container .search:hover { filter: brightness(1.3); } .parties-invite-dialog .search-box-container .search.disabled, .parties-invite-dialog .search-box-container .search.disabled:hover { filter: brightness(0.5); cursor: default; } .parties-invite-dialog { height: 590px; width: 365px; display: flex; flex-direction: column; -webkit-user-select: none; cursor: default; position: relative; text-align: left; } .parties-invite-dialog .parties-invite-dialog-header { margin: 5px 19px 0 19px; } .parties-invite-dialog .parties-invite-dialog-container { direction: rtl; width: 100%; height: 520px; padding: 19px; box-sizing: border-box; } .parties-invite-dialog .search-box-container { display: flex; margin: 2px 0 5px; } .parties-invite-dialog .search-box-container.not-found { animation: shake-horizontal 250ms; } .parties-invite-dialog .search-box-container .search-box-input { width: 288px; height: 26px; margin: 0 0 0 10px; padding: 0 5px; } .parties-invite-dialog .search-box-container .search-box-input::-webkit-input-placeholder { padding: 0 5px 0 0; } .parties-invite-dialog .search-box-container .search { background: url(/fe/lol-parties/button-search-default.png) no-repeat; background-size: contain; vertical-align: middle; display: inline-block; min-width: 31px; min-height: 30px; margin-top: -2px; } .parties-invite-dialog .search-box-container .search:hover { background-image: url(/fe/lol-parties/button-search-hover.png); } .parties-invite-dialog .search-box-container .search:active { background-image: url(/fe/lol-parties/button-search-click.png); } .parties-invite-dialog .search-box-container .search:disabled { background-image: url(/fe/lol-parties/button-search-disabled.png); } .parties-invite-dialog .search-error { color: #be1e37; } .parties-invite-dialog .available-players { height: 14px; padding-top: 6px; padding-bottom: 12px; margin-bottom: 4px; text-align: right; } .parties-invite-dialog .groups { margin-bottom: 40px; } .parties-invite-dialog lol-uikit-scrollable { will-change: inherit; } @-moz-keyframes shake-horizontal { 0% { transform: translate(0px, 0px); } 2% { transform: translate(-4px, 0px); } 4% { transform: translate(2px, 0px); } 6% { transform: translate(-3px, 0px); } 8% { transform: translate(9px, 0px); } 10% { transform: translate(2px, 0px); } 12% { transform: translate(-6px, 0px); } 14% { transform: translate(-7px, 0px); } 16% { transform: translate(2px, 0px); } 18% { transform: translate(7px, 0px); } 20% { transform: translate(-1px, 0px); } 22% { transform: translate(-10px, 0px); } 24% { transform: translate(-10px, 0px); } 26% { transform: translate(3px, 0px); } 28% { transform: translate(-5px, 0px); } 30% { transform: translate(4px, 0px); } 32% { transform: translate(-6px, 0px); } 34% { transform: translate(-2px, 0px); } 36% { transform: translate(-6px, 0px); } 38% { transform: translate(-2px, 0px); } 40% { transform: translate(4px, 0px); } 42% { transform: translate(8px, 0px); } 44% { transform: translate(-3px, 0px); } 46% { transform: translate(-10px, 0px); } 48% { transform: translate(4px, 0px); } 50% { transform: translate(-6px, 0px); } 52% { transform: translate(6px, 0px); } 54% { transform: translate(-8px, 0px); } 56% { transform: translate(5px, 0px); } 58% { transform: translate(9px, 0px); } 60% { transform: translate(7px, 0px); } 62% { transform: translate(1px, 0px); } 64% { transform: translate(2px, 0px); } 66% { transform: translate(-2px, 0px); } 68% { transform: translate(-7px, 0px); } 70% { transform: translate(-1px, 0px); } 72% { transform: translate(-6px, 0px); } 74% { transform: translate(5px, 0px); } 76% { transform: translate(0px, 0px); } 78% { transform: translate(9px, 0px); } 80% { transform: translate(-3px, 0px); } 82% { transform: translate(8px, 0px); } 84% { transform: translate(-2px, 0px); } 86% { transform: translate(-1px, 0px); } 88% { transform: translate(-3px, 0px); } 90% { transform: translate(4px, 0px); } 92% { transform: translate(0px, 0px); } 94% { transform: translate(4px, 0px); } 96% { transform: translate(2px, 0px); } 98% { transform: translate(-2px, 0px); } } @-webkit-keyframes shake-horizontal { 0% { transform: translate(0px, 0px); } 2% { transform: translate(-4px, 0px); } 4% { transform: translate(2px, 0px); } 6% { transform: translate(-3px, 0px); } 8% { transform: translate(9px, 0px); } 10% { transform: translate(2px, 0px); } 12% { transform: translate(-6px, 0px); } 14% { transform: translate(-7px, 0px); } 16% { transform: translate(2px, 0px); } 18% { transform: translate(7px, 0px); } 20% { transform: translate(-1px, 0px); } 22% { transform: translate(-10px, 0px); } 24% { transform: translate(-10px, 0px); } 26% { transform: translate(3px, 0px); } 28% { transform: translate(-5px, 0px); } 30% { transform: translate(4px, 0px); } 32% { transform: translate(-6px, 0px); } 34% { transform: translate(-2px, 0px); } 36% { transform: translate(-6px, 0px); } 38% { transform: translate(-2px, 0px); } 40% { transform: translate(4px, 0px); } 42% { transform: translate(8px, 0px); } 44% { transform: translate(-3px, 0px); } 46% { transform: translate(-10px, 0px); } 48% { transform: translate(4px, 0px); } 50% { transform: translate(-6px, 0px); } 52% { transform: translate(6px, 0px); } 54% { transform: translate(-8px, 0px); } 56% { transform: translate(5px, 0px); } 58% { transform: translate(9px, 0px); } 60% { transform: translate(7px, 0px); } 62% { transform: translate(1px, 0px); } 64% { transform: translate(2px, 0px); } 66% { transform: translate(-2px, 0px); } 68% { transform: translate(-7px, 0px); } 70% { transform: translate(-1px, 0px); } 72% { transform: translate(-6px, 0px); } 74% { transform: translate(5px, 0px); } 76% { transform: translate(0px, 0px); } 78% { transform: translate(9px, 0px); } 80% { transform: translate(-3px, 0px); } 82% { transform: translate(8px, 0px); } 84% { transform: translate(-2px, 0px); } 86% { transform: translate(-1px, 0px); } 88% { transform: translate(-3px, 0px); } 90% { transform: translate(4px, 0px); } 92% { transform: translate(0px, 0px); } 94% { transform: translate(4px, 0px); } 96% { transform: translate(2px, 0px); } 98% { transform: translate(-2px, 0px); } } @-o-keyframes shake-horizontal { 0% { transform: translate(0px, 0px); } 2% { transform: translate(-4px, 0px); } 4% { transform: translate(2px, 0px); } 6% { transform: translate(-3px, 0px); } 8% { transform: translate(9px, 0px); } 10% { transform: translate(2px, 0px); } 12% { transform: translate(-6px, 0px); } 14% { transform: translate(-7px, 0px); } 16% { transform: translate(2px, 0px); } 18% { transform: translate(7px, 0px); } 20% { transform: translate(-1px, 0px); } 22% { transform: translate(-10px, 0px); } 24% { transform: translate(-10px, 0px); } 26% { transform: translate(3px, 0px); } 28% { transform: translate(-5px, 0px); } 30% { transform: translate(4px, 0px); } 32% { transform: translate(-6px, 0px); } 34% { transform: translate(-2px, 0px); } 36% { transform: translate(-6px, 0px); } 38% { transform: translate(-2px, 0px); } 40% { transform: translate(4px, 0px); } 42% { transform: translate(8px, 0px); } 44% { transform: translate(-3px, 0px); } 46% { transform: translate(-10px, 0px); } 48% { transform: translate(4px, 0px); } 50% { transform: translate(-6px, 0px); } 52% { transform: translate(6px, 0px); } 54% { transform: translate(-8px, 0px); } 56% { transform: translate(5px, 0px); } 58% { transform: translate(9px, 0px); } 60% { transform: translate(7px, 0px); } 62% { transform: translate(1px, 0px); } 64% { transform: translate(2px, 0px); } 66% { transform: translate(-2px, 0px); } 68% { transform: translate(-7px, 0px); } 70% { transform: translate(-1px, 0px); } 72% { transform: translate(-6px, 0px); } 74% { transform: translate(5px, 0px); } 76% { transform: translate(0px, 0px); } 78% { transform: translate(9px, 0px); } 80% { transform: translate(-3px, 0px); } 82% { transform: translate(8px, 0px); } 84% { transform: translate(-2px, 0px); } 86% { transform: translate(-1px, 0px); } 88% { transform: translate(-3px, 0px); } 90% { transform: translate(4px, 0px); } 92% { transform: translate(0px, 0px); } 94% { transform: translate(4px, 0px); } 96% { transform: translate(2px, 0px); } 98% { transform: translate(-2px, 0px); } } @keyframes shake-horizontal { 0% { transform: translate(0px, 0px); } 2% { transform: translate(-4px, 0px); } 4% { transform: translate(2px, 0px); } 6% { transform: translate(-3px, 0px); } 8% { transform: translate(9px, 0px); } 10% { transform: translate(2px, 0px); } 12% { transform: translate(-6px, 0px); } 14% { transform: translate(-7px, 0px); } 16% { transform: translate(2px, 0px); } 18% { transform: translate(7px, 0px); } 20% { transform: translate(-1px, 0px); } 22% { transform: translate(-10px, 0px); } 24% { transform: translate(-10px, 0px); } 26% { transform: translate(3px, 0px); } 28% { transform: translate(-5px, 0px); } 30% { transform: translate(4px, 0px); } 32% { transform: translate(-6px, 0px); } 34% { transform: translate(-2px, 0px); } 36% { transform: translate(-6px, 0px); } 38% { transform: translate(-2px, 0px); } 40% { transform: translate(4px, 0px); } 42% { transform: translate(8px, 0px); } 44% { transform: translate(-3px, 0px); } 46% { transform: translate(-10px, 0px); } 48% { transform: translate(4px, 0px); } 50% { transform: translate(-6px, 0px); } 52% { transform: translate(6px, 0px); } 54% { transform: translate(-8px, 0px); } 56% { transform: translate(5px, 0px); } 58% { transform: translate(9px, 0px); } 60% { transform: translate(7px, 0px); } 62% { transform: translate(1px, 0px); } 64% { transform: translate(2px, 0px); } 66% { transform: translate(-2px, 0px); } 68% { transform: translate(-7px, 0px); } 70% { transform: translate(-1px, 0px); } 72% { transform: translate(-6px, 0px); } 74% { transform: translate(5px, 0px); } 76% { transform: translate(0px, 0px); } 78% { transform: translate(9px, 0px); } 80% { transform: translate(-3px, 0px); } 82% { transform: translate(8px, 0px); } 84% { transform: translate(-2px, 0px); } 86% { transform: translate(-1px, 0px); } 88% { transform: translate(-3px, 0px); } 90% { transform: translate(4px, 0px); } 92% { transform: translate(0px, 0px); } 94% { transform: translate(4px, 0px); } 96% { transform: translate(2px, 0px); } 98% { transform: translate(-2px, 0px); } } .invite-dialog-group .header { font-family: var(--font-display); } .invite-dialog-group .invite-dialog-friend { font-family: var(--font-body); } .invite-dialog-group .header, .invite-dialog-group .invite-dialog-friend { -webkit-user-select: none; } .invite-dialog-group .header, .invite-dialog-group .invite-dialog-friend { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .invite-dialog-group .header { text-transform: uppercase; } .invite-dialog-group .header:lang(ko-kr), .invite-dialog-group .header:lang(ja-jp), .invite-dialog-group .header:lang(tr-tr), .invite-dialog-group .header:lang(el-gr), .invite-dialog-group .header:lang(th-th), .invite-dialog-group .header:lang(zh-tw) { text-transform: none; } .invite-dialog-group .header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .invite-dialog-group .header:lang(ja-jp) { font-size: 13px; } .invite-dialog-group .header:lang(ar-ae) { letter-spacing: 0; } .invite-dialog-group .header { color: #a09b8c; } .invite-dialog-group .invite-dialog-friend { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .invite-dialog-group .invite-dialog-friend:lang(ja-jp) { font-size: 13px; } .invite-dialog-group .invite-dialog-friend:lang(ar-ae) { letter-spacing: 0; } .invite-dialog-group { margin-bottom: 4px; } .invite-dialog-group .header { display: flex; align-items: center; padding: 0.25em 0.1em; cursor: pointer; background-color: #1d2126; transition: color 150ms ease-out; } .invite-dialog-group .header:hover { color: #f0e6d2; } .invite-dialog-group .header::before { content: ''; border-top: 3.464px solid transparent; border-bottom: 3.464px solid transparent; border-left: 4px solid #a09b8c; transform: rotate(180deg); margin: 6px 10px; } .invite-dialog-group .invite-dialog-friend { height: 0; opacity: 0; cursor: pointer; display: flex; align-items: center; padding: 0 1rem 0 0; transition: height 150ms ease-out; overflow: hidden; white-space: nowrap; } .invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox { width: 100%; height: 100%; } .invite-dialog-group .invite-dialog-friend .invite-dialog-friend-name { display: flex; flex-direction: column; margin: 0 0 0 10px; } .invite-dialog-group .invite-dialog-friend .invite-dialog-friend-name:lang(ar-AE) { margin: 0 10px 0 0; } .invite-dialog-group .invite-dialog-friend .invite-dialog-friend-name .invite-dialog-friend-gnt { color: #5b5a56; } .invite-dialog-group .invite-dialog-friend:hover { color: #f0e6d2; background: url(/fe/lol-parties/hover-border.png) no-repeat center #010a13; } .invite-dialog-group .invite-dialog-friend:hover::before { background-image: url("$checkboxHoverImage"); } .invite-dialog-group.expanded .invite-dialog-friend { height: 41px; opacity: 1; } .invite-dialog-group.expanded .header::before { transform: rotate(90deg); } .parties-position-text { font-family: var(--font-display); } .parties-position-text { -webkit-user-select: none; } .parties-position-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .parties-position-text { text-transform: uppercase; } .parties-position-text:lang(ko-kr), .parties-position-text:lang(ja-jp), .parties-position-text:lang(tr-tr), .parties-position-text:lang(el-gr), .parties-position-text:lang(th-th), .parties-position-text:lang(zh-tw) { text-transform: none; } .parties-position-text { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .parties-position-text:lang(ar-ae) { letter-spacing: 0; } @-moz-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes parties-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .parties-position-selector-component.moving { visibility: hidden; } .parties-position-selector-component lol-uikit-full-page-backdrop { overflow: hidden; } .parties-position-selector { position: absolute; } .parties-position-selector-small-backdrop { position: relative; background: radial-gradient(ellipse at center, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.88) 25%, rgba(0,0,0,0.46) 57%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 100%); width: 400px; height: 400px; } .parties-position-text { position: absolute; width: 230px; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; opacity: 1; } .parties-position-text.position-text-bottom { text-align: left; margin-left: 45px; } .parties-position-text.position-text-top { left: -245px; text-align: right; } .parties-position-text.position-text-middle { top: -37.5px; left: -100px; } .parties-position-text.position-text-jungle { left: -245px; text-align: right; } .parties-position-text.position-text-utility { text-align: left; margin-left: 45px; } .parties-position-text.position-text-fill { left: -100px; top: 37.5px; } .parties-position-text.position-text-none { left: -100px; top: 37.5px; } .parties-position-text.hidden { opacity: 0; } .parties-position-selector-hextech-dashed-ring { position: absolute; width: 230px; height: 230px; top: 50%; left: 50%; margin-left: -115px; margin-top: -115px; } .parties-position-selector-hextech-dashed-ring:before { content: ''; position: absolute; width: 100%; height: 100%; background: url(/fe/lol-parties/radial-hextech-dashed-ring.png) no-repeat center; animation: parties-spin 120s linear infinite; background-size: 230px 230px; top: 0px; } /** The circular pointer that spins in the middle on hover **/ .position-selection-pointers { position: relative; width: 200px; height: 200px; margin-top: 15px; margin-left: 15px; } .position-selection-pointer { position: absolute; opacity: 1; width: 200px; height: 200px; } .position-selection-pointer.parties-position-pointer-unselected { background: url(/fe/lol-parties/radial-hextech-unselected.png) no-repeat center; background-size: 80% 80%; } .position-selection-pointer.parties-position-pointer-middle { background: url(/fe/lol-parties/radial-hextech-middle.png) no-repeat center; background-size: 80% 80%; } .position-selection-pointer.parties-position-pointer-jungle { background: url(/fe/lol-parties/radial-hextech-jungle.png) no-repeat center; background-size: 80% 80%; } .position-selection-pointer.parties-position-pointer-top { background: url(/fe/lol-parties/radial-hextech-top.png) no-repeat center; background-size: 80% 80%; } .position-selection-pointer.parties-position-pointer-utility { background: url(/fe/lol-parties/radial-hextech-utility.png) no-repeat center; background-size: 80% 80%; } .position-selection-pointer.parties-position-pointer-bottom { background: url(/fe/lol-parties/radial-hextech-bottom.png) no-repeat center; background-size: 80% 80%; } .position-selection-pointer.parties-position-pointer-fill { background: url(/fe/lol-parties/radial-hextech-fill.png) no-repeat center; background-size: 80% 80%; } .position-selection-pointer.hidden { opacity: 0; } /** ICONS THAT ARE SELECTED **/ .position-selection-icons { position: absolute; top: 50%; left: 50%; } .map21-text { display: none; } .is-map21 .parties-position-icon-top, .is-map21 .parties-position-icon-middle, .is-map21 .parties-position-icon-utility, .is-map21 .parties-position-text .sr-text { display: none; } .is-map21 .map21-text { display: block; } .is-map21 .map21-text .map21-position-count { display: inline; margin-left: 4px; font-size: 20px; line-height: 27px; vertical-align: top; } .position-selection-icon { background-repeat: no-repeat; background-size: contain; cursor: pointer; width: 30px; height: 30px; } .parties-position-icon-jungle { position: absolute; top: -85px; left: -85px; background-image: url(/fe/lol-parties/icon-position-jungle.png); } .parties-position-icon-jungle.active { background-image: url(/fe/lol-parties/icon-position-jungle.png); background-image: url(/fe/lol-parties/icon-position-jungle-hover.png); } [primaryPosition='JUNGLE'] .parties-position-icon-jungle, [secondaryPosition='JUNGLE'] .parties-position-icon-jungle { background-image: url(/fe/lol-parties/icon-position-jungle-blue.png); } [primaryPosition='JUNGLE'] .parties-position-icon-jungle.active, [secondaryPosition='JUNGLE'] .parties-position-icon-jungle.active { background-image: url(/fe/lol-parties/icon-position-jungle-blue.png); background-image: url(/fe/lol-parties/icon-position-jungle-blue-hover.png); } .parties-position-icon-middle { position: absolute; top: -115px; left: -15px; background-image: url(/fe/lol-parties/icon-position-middle.png); } .parties-position-icon-middle.active { background-image: url(/fe/lol-parties/icon-position-middle.png); background-image: url(/fe/lol-parties/icon-position-middle-hover.png); } [primaryPosition='MIDDLE'] .parties-position-icon-middle, [secondaryPosition='MIDDLE'] .parties-position-icon-middle { background-image: url(/fe/lol-parties/icon-position-middle-blue.png); } [primaryPosition='MIDDLE'] .parties-position-icon-middle.active, [secondaryPosition='MIDDLE'] .parties-position-icon-middle.active { background-image: url(/fe/lol-parties/icon-position-middle-blue.png); background-image: url(/fe/lol-parties/icon-position-middle-blue-hover.png); } .parties-position-icon-utility { position: absolute; top: -15px; left: 85px; background-image: url(/fe/lol-parties/icon-position-utility.png); } .parties-position-icon-utility.active { background-image: url(/fe/lol-parties/icon-position-utility.png); background-image: url(/fe/lol-parties/icon-position-utility-hover.png); } [primaryPosition='UTILITY'] .parties-position-icon-utility, [secondaryPosition='UTILITY'] .parties-position-icon-utility { background-image: url(/fe/lol-parties/icon-position-utility-blue.png); } [primaryPosition='UTILITY'] .parties-position-icon-utility.active, [secondaryPosition='UTILITY'] .parties-position-icon-utility.active { background-image: url(/fe/lol-parties/icon-position-utility-blue.png); background-image: url(/fe/lol-parties/icon-position-utility-blue-hover.png); } .parties-position-icon-bottom { position: absolute; top: -85px; left: 55px; background-image: url(/fe/lol-parties/icon-position-bottom.png); } .parties-position-icon-bottom.active { background-image: url(/fe/lol-parties/icon-position-bottom.png); background-image: url(/fe/lol-parties/icon-position-bottom-hover.png); } [primaryPosition='BOTTOM'] .parties-position-icon-bottom, [secondaryPosition='BOTTOM'] .parties-position-icon-bottom { background-image: url(/fe/lol-parties/icon-position-bottom-blue.png); } [primaryPosition='BOTTOM'] .parties-position-icon-bottom.active, [secondaryPosition='BOTTOM'] .parties-position-icon-bottom.active { background-image: url(/fe/lol-parties/icon-position-bottom-blue.png); background-image: url(/fe/lol-parties/icon-position-bottom-blue-hover.png); } .parties-position-icon-fill { position: absolute; top: 85px; left: -15px; background-image: url(/fe/lol-parties/icon-position-fill.png); } .parties-position-icon-fill.active { background-image: url(/fe/lol-parties/icon-position-fill.png); background-image: url(/fe/lol-parties/icon-position-fill-hover.png); } [primaryPosition='FILL'] .parties-position-icon-fill, [secondaryPosition='FILL'] .parties-position-icon-fill { background-image: url(/fe/lol-parties/icon-position-fill-blue.png); } [primaryPosition='FILL'] .parties-position-icon-fill.active, [secondaryPosition='FILL'] .parties-position-icon-fill.active { background-image: url(/fe/lol-parties/icon-position-fill-blue.png); background-image: url(/fe/lol-parties/icon-position-fill-blue-hover.png); } .parties-position-icon-top { position: absolute; top: -15px; left: -115px; background-image: url(/fe/lol-parties/icon-position-top.png); } .parties-position-icon-top.active { background-image: url(/fe/lol-parties/icon-position-top.png); background-image: url(/fe/lol-parties/icon-position-top-hover.png); } [primaryPosition='TOP'] .parties-position-icon-top, [secondaryPosition='TOP'] .parties-position-icon-top { background-image: url(/fe/lol-parties/icon-position-top-blue.png); } [primaryPosition='TOP'] .parties-position-icon-top.active, [secondaryPosition='TOP'] .parties-position-icon-top.active { background-image: url(/fe/lol-parties/icon-position-top-blue.png); background-image: url(/fe/lol-parties/icon-position-top-blue-hover.png); } .parties-position-selector-pie { position: absolute; top: -525px; left: -525px; width: 1280px; height: 1280px; margin: 0px; padding: 0px; list-style: none; cursor: default; } /** * To create the equal slices of pie for us to hover and select, * we need to rotate and skew the child divs at their appropriate angles. **/ .position-selection:nth-child(1) { transform: rotate(-67.5deg) skewY(-45deg); } .position-selection:nth-child(2) { transform: rotate(-22.5deg) skewY(-45deg); } .position-selection:nth-child(3) { transform: rotate(22.5deg) skewY(-45deg); } .position-selection:nth-child(4) { transform: rotate(67.5deg) skewY(-45deg); } .position-selection:nth-child(5) { transform: rotate(112.5deg) skewY(-45deg); } .position-selection:nth-child(6) { transform: rotate(157.5deg) skewY(-45deg); } .position-selection:nth-child(7) { transform: rotate(202.5deg) skewY(-45deg); } .position-selection:nth-child(8) { transform: rotate(247.5deg) skewY(-45deg); } .is-map21 .position-selection:nth-child(1) { transform: rotate(-120deg) skewY(30deg); } .is-map21 .position-selection:nth-child(2) { transform: rotate(0deg) skewY(30deg); } .is-map21 .position-selection:nth-child(3) { transform: rotate(120deg) skewY(30deg); } .position-selection { overflow: hidden; position: absolute; top: 0px; right: 0px; width: 50%; height: 50%; transform-origin: 0% 100%; } .position-selection .position-selection-proxy { width: 50px; height: 100px; position: absolute; bottom: 0; } .parties-red-ring { position: absolute; width: 63px; height: 63px; top: 84px; left: 84px; background-image: url(/fe/lol-parties/radial-hextech-red-inner.png); background-size: contain; background-repeat: no-repeat; } .parties-current-position-icon { position: absolute; width: 70px; height: 70px; top: calc(50% - 70px / 2); left: calc(50% - 70px / 2); background-image: url(/fe/lol-parties/icon-position-unselected-blue-hover.png); background-size: 30px 30px; background-repeat: no-repeat; background-position: center; border-radius: 50%; cursor: pointer; } .parties-current-position-icon.exclusion { background-image: url(/fe/lol-parties/icon-position-unselected-red-hover.png); } .parties-current-position-icon.icon-middle { background-image: url(/fe/lol-parties/icon-position-middle-blue-hover.png); } .parties-current-position-icon.icon-jungle { background-image: url(/fe/lol-parties/icon-position-jungle-blue-hover.png); } .parties-current-position-icon.icon-utility { background-image: url(/fe/lol-parties/icon-position-utility-blue-hover.png); } .parties-current-position-icon.icon-bottom { background-image: url(/fe/lol-parties/icon-position-bottom-blue-hover.png); } .parties-current-position-icon.icon-top { background-image: url(/fe/lol-parties/icon-position-top-blue-hover.png); } .parties-current-position-icon.icon-fill { background-image: url(/fe/lol-parties/icon-position-fill-blue-hover.png); } .parties-current-position-icon.icon-none { background-image: url(/fe/lol-parties/icon-position-unselected-red-hover.png); } .parties-current-position-icon.icon-middle.exclusion { background-image: url(/fe/lol-parties/icon-position-middle-red-hover.png); } .parties-current-position-icon.icon-jungle.exclusion { background-image: url(/fe/lol-parties/icon-position-jungle-red-hover.png); } .parties-current-position-icon.icon-utility.exclusion { background-image: url(/fe/lol-parties/icon-position-utility-red-hover.png); } .parties-current-position-icon.icon-bottom.exclusion { background-image: url(/fe/lol-parties/icon-position-bottom-red-hover.png); } .parties-current-position-icon.icon-top.exclusion { background-image: url(/fe/lol-parties/icon-position-top-red-hover.png); } .parties-current-position-icon.icon-fill.exclusion { background-image: url(/fe/lol-parties/icon-position-fill-red-hover.png); } .parties-current-position-icon.icon-none.exclusion { background-image: url(/fe/lol-parties/icon-position-unselected-red-hover.png); } .low-priority-player-name { font-family: var(--font-display); } .low-priority-player-name { -webkit-user-select: none; } .low-priority-player-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .low-priority-player-name { text-transform: uppercase; } .low-priority-player-name:lang(ko-kr), .low-priority-player-name:lang(ja-jp), .low-priority-player-name:lang(tr-tr), .low-priority-player-name:lang(el-gr), .low-priority-player-name:lang(th-th), .low-priority-player-name:lang(zh-tw) { text-transform: none; } .low-priority-player-name { text-transform: none; } .low-priority-player-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .low-priority-player-name:lang(ar-ae) { letter-spacing: 0; } .low-priority-player-name { letter-spacing: 0.0375em; } .low-priority-player-name:lang(ar-ae) { letter-spacing: 0; } .low-priority-player-list { list-style-type: none; margin: 0; padding: 0; } .autofill-settings { font-family: var(--font-body); } .autofill-settings { -webkit-user-select: none; } .autofill-settings { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .autofill-settings { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .autofill-settings:lang(ar-ae) { letter-spacing: 0; } .autofill-settings { width: 300px; margin-bottom: 40px; padding: 10px; text-align: center; } .autofill-settings ul { list-style-type: none; } .game-mode-tutorial-carousel-item-content .top-block .step-block .step, .game-mode-tutorial-carousel-item-content .top-block .title { font-family: var(--font-display); } .game-mode-tutorial-carousel-item-content, .game-mode-tutorial-carousel-item-content .top-block .description, .game-mode-tutorial-carousel-item-content .footer { font-family: var(--font-body); } .game-mode-tutorial-carousel-item-content, .game-mode-tutorial-carousel-item-content .top-block .step-block .step, .game-mode-tutorial-carousel-item-content .top-block .title, .game-mode-tutorial-carousel-item-content .top-block .description, .game-mode-tutorial-carousel-item-content .footer { -webkit-user-select: none; } .game-mode-tutorial-carousel-item-content, .game-mode-tutorial-carousel-item-content .top-block .step-block .step, .game-mode-tutorial-carousel-item-content .top-block .title, .game-mode-tutorial-carousel-item-content .top-block .description, .game-mode-tutorial-carousel-item-content .footer { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .game-mode-tutorial-carousel-item-content .top-block .step-block .step, .game-mode-tutorial-carousel-item-content .top-block .title { text-transform: uppercase; } .game-mode-tutorial-carousel-item-content .top-block .step-block .step:lang(ko-kr), .game-mode-tutorial-carousel-item-content .top-block .title:lang(ko-kr), .game-mode-tutorial-carousel-item-content .top-block .step-block .step:lang(ja-jp), .game-mode-tutorial-carousel-item-content .top-block .title:lang(ja-jp), .game-mode-tutorial-carousel-item-content .top-block .step-block .step:lang(tr-tr), .game-mode-tutorial-carousel-item-content .top-block .title:lang(tr-tr), .game-mode-tutorial-carousel-item-content .top-block .step-block .step:lang(el-gr), .game-mode-tutorial-carousel-item-content .top-block .title:lang(el-gr), .game-mode-tutorial-carousel-item-content .top-block .step-block .step:lang(th-th), .game-mode-tutorial-carousel-item-content .top-block .title:lang(th-th), .game-mode-tutorial-carousel-item-content .top-block .step-block .step:lang(zh-tw), .game-mode-tutorial-carousel-item-content .top-block .title:lang(zh-tw) { text-transform: none; } .game-mode-tutorial-carousel-item-content .top-block .step-block .step, .game-mode-tutorial-carousel-item-content .top-block .title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .game-mode-tutorial-carousel-item-content .top-block .step-block .step:lang(ar-ae), .game-mode-tutorial-carousel-item-content .top-block .title:lang(ar-ae) { letter-spacing: 0; } .game-mode-tutorial-carousel-item-content { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .game-mode-tutorial-carousel-item-content:lang(ar-ae) { letter-spacing: 0; } .game-mode-tutorial-carousel-item-content .top-block .description, .game-mode-tutorial-carousel-item-content .footer { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .game-mode-tutorial-carousel-item-content .top-block .description:lang(ja-jp), .game-mode-tutorial-carousel-item-content .footer:lang(ja-jp) { font-size: 13px; } .game-mode-tutorial-carousel-item-content .top-block .description:lang(ar-ae), .game-mode-tutorial-carousel-item-content .footer:lang(ar-ae) { letter-spacing: 0; } .game-mode-tutorial-background { position: absolute; height: 639px; width: 1055px; } .game-mode-tutorial-content { position: absolute; height: 639px; width: 1055px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; } .game-mode-tutorial-carousel { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; transition: transform 0.8s cubic-bezier(0.2, 0.9, 0, 1); } .game-mode-tutorial-carousel-item { width: 324px; height: 414px; margin-right: 54px; cursor: pointer; -webkit-filter: brightness(40%); transition: -webkit-filter 0.2s linear; } .game-mode-tutorial-carousel-item:last-child { margin-right: 0; } .game-mode-tutorial-carousel-item:hover, .game-mode-tutorial-carousel-item.selected { -webkit-filter: brightness(100%); } .game-mode-tutorial-carousel-item.selected { cursor: default; } .game-mode-tutorial-carousel-item-content { height: 374px; padding: 18px; display: flex; flex-direction: column; background-size: contain; } .game-mode-tutorial-carousel-item-content .top-block { flex-grow: 1; display: flex; } .game-mode-tutorial-carousel-item-content .top-block .step-block { margin-top: 4px; } .game-mode-tutorial-carousel-item-content .top-block .step-block .step { padding-top: 4px; padding-bottom: 7px; margin-right: 16px; font-size: 48px; background: -webkit-linear-gradient(#cdbe91, #c8aa6e, #785a28); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #cdbe91; } .game-mode-tutorial-carousel-item-content .top-block .text-block { display: flex; flex-direction: column; } .game-mode-tutorial-carousel-item-content .top-block .title { color: #cdbe91; } .game-mode-tutorial-carousel-item-content .top-block .description { color: #a09b8c; } .game-mode-tutorial-carousel-item-content .footer { text-align: center; } .game-mode-tutorial-navigation { height: 64px; display: flex; justify-content: center; align-items: center; } .game-mode-tutorial-navigation .navigation-pip { width: 24px; height: 24px; cursor: pointer; background-size: 18px 18px; background-position: center; background-image: url(/fe/lol-parties/pip-circle-default.png); background-repeat: no-repeat; } .game-mode-tutorial-navigation .navigation-pip:hover { background-image: url(/fe/lol-parties/pip-circle-hover.png); } .game-mode-tutorial-navigation .navigation-pip.selected { background-image: url(/fe/lol-parties/pip-circle-selected.png); } .game-mode-tutorial-carousel-arrow { position: absolute; top: 276px; margin: 5px; cursor: pointer; } .game-mode-tutorial-carousel-arrow.left-arrow { left: 0; } .game-mode-tutorial-carousel-arrow.right-arrow { right: 0; } .game-mode-one-page-tutorial .header-group .header, .game-mode-one-page-tutorial .cards .card .card-title { font-family: var(--font-display); } .game-mode-one-page-tutorial .header-group .sub-header, .game-mode-one-page-tutorial .cards .card .card-body { font-family: var(--font-body); } .game-mode-one-page-tutorial .header-group .header, .game-mode-one-page-tutorial .header-group .sub-header, .game-mode-one-page-tutorial .cards .card .card-title, .game-mode-one-page-tutorial .cards .card .card-body { -webkit-user-select: none; } .game-mode-one-page-tutorial .header-group .header, .game-mode-one-page-tutorial .header-group .sub-header, .game-mode-one-page-tutorial .cards .card .card-title, .game-mode-one-page-tutorial .cards .card .card-body { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .game-mode-one-page-tutorial .header-group .header, .game-mode-one-page-tutorial .cards .card .card-title { text-transform: uppercase; } .game-mode-one-page-tutorial .header-group .header:lang(ko-kr), .game-mode-one-page-tutorial .cards .card .card-title:lang(ko-kr), .game-mode-one-page-tutorial .header-group .header:lang(ja-jp), .game-mode-one-page-tutorial .cards .card .card-title:lang(ja-jp), .game-mode-one-page-tutorial .header-group .header:lang(tr-tr), .game-mode-one-page-tutorial .cards .card .card-title:lang(tr-tr), .game-mode-one-page-tutorial .header-group .header:lang(el-gr), .game-mode-one-page-tutorial .cards .card .card-title:lang(el-gr), .game-mode-one-page-tutorial .header-group .header:lang(th-th), .game-mode-one-page-tutorial .cards .card .card-title:lang(th-th), .game-mode-one-page-tutorial .header-group .header:lang(zh-tw), .game-mode-one-page-tutorial .cards .card .card-title:lang(zh-tw) { text-transform: none; } .game-mode-one-page-tutorial .cards .card .card-title { text-transform: none; } .game-mode-one-page-tutorial .header-group .header { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .game-mode-one-page-tutorial .header-group .header:lang(ar-ae) { letter-spacing: 0; } .game-mode-one-page-tutorial .cards .card .card-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .game-mode-one-page-tutorial .cards .card .card-title:lang(ar-ae) { letter-spacing: 0; } .game-mode-one-page-tutorial .cards .card .card-title { letter-spacing: 0.0375em; } .game-mode-one-page-tutorial .cards .card .card-title:lang(ar-ae) { letter-spacing: 0; } .game-mode-one-page-tutorial .header-group .sub-header, .game-mode-one-page-tutorial .cards .card .card-body { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .game-mode-one-page-tutorial .header-group .sub-header:lang(ja-jp), .game-mode-one-page-tutorial .cards .card .card-body:lang(ja-jp) { font-size: 13px; } .game-mode-one-page-tutorial .header-group .sub-header:lang(ar-ae), .game-mode-one-page-tutorial .cards .card .card-body:lang(ar-ae) { letter-spacing: 0; } .game-mode-one-page-tutorial { direction: rtl; position: relative; max-width: 750px; display: flex; justify-content: center; align-content: center; align-items: center; flex-direction: column; padding: 40px 40px 60px 40px; background-color: #010a13; cursor: default; } .game-mode-one-page-tutorial .game-mode-tutorial-background { position: absolute; height: 100%; width: 100%; } .game-mode-one-page-tutorial .header-group { width: 75%; display: flex; flex: 0 0 auto; flex-direction: column; justify-content: center; align-content: center; align-items: center; padding-bottom: 20px; } .game-mode-one-page-tutorial .header-group .header { padding-bottom: 15px; } .game-mode-one-page-tutorial .header-group .sub-header { text-align: center; } .game-mode-one-page-tutorial .cards { position: relative; width: 100%; height: 100%; flex: 1 1 auto; display: flex; justify-content: center; align-items: stretch; align-content: center; flex-direction: row; } .game-mode-one-page-tutorial .cards .arrow { width: 20px; flex: 0 0 auto; vertical-align: middle; display: flex; padding-top: 90px; align-items: center; } .game-mode-one-page-tutorial .cards .arrow .arrow-path { fill: #463714; } .game-mode-one-page-tutorial .cards .card { position: relative; display: flex; justify-content: center; align-items: flex-start; align-content: center; flex-direction: column; flex: 1 1 auto; border: thin solid #463714; background-color: #010a13; padding: 20px; margin-top: 90px; width: 100%; } .game-mode-one-page-tutorial .cards .card .card-header-img { width: 150px; height: 150px; align-self: center; transform: translateY(-90px); border-radius: 50%; border: 2px solid #463714; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.5); padding: 0; background-size: cover; } .game-mode-one-page-tutorial .cards .card .card-title { padding: 10px 10px 20px 10px; margin-top: -75px; } .game-mode-one-page-tutorial .cards .card .card-body { flex: 1 1 auto; height: 100%; padding: 0 10px 0 10px; }