.flex-restriction-modal .flex-restriction-modal-title { font-family: var(--font-display); } .flex-restriction-modal .flex-restriction-modal-body { font-family: var(--font-body); } .flex-restriction-modal .flex-restriction-modal-title, .flex-restriction-modal .flex-restriction-modal-body { -webkit-user-select: none; } .flex-restriction-modal .flex-restriction-modal-title, .flex-restriction-modal .flex-restriction-modal-body { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .flex-restriction-modal .flex-restriction-modal-title { text-transform: uppercase; } .flex-restriction-modal .flex-restriction-modal-title:lang(ko-kr), .flex-restriction-modal .flex-restriction-modal-title:lang(ja-jp), .flex-restriction-modal .flex-restriction-modal-title:lang(tr-tr), .flex-restriction-modal .flex-restriction-modal-title:lang(el-gr), .flex-restriction-modal .flex-restriction-modal-title:lang(th-th), .flex-restriction-modal .flex-restriction-modal-title:lang(zh-tw) { text-transform: none; } .flex-restriction-modal .flex-restriction-modal-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .flex-restriction-modal .flex-restriction-modal-title:lang(ar-ae) { letter-spacing: 0; } .flex-restriction-modal .flex-restriction-modal-body { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .flex-restriction-modal .flex-restriction-modal-body:lang(ar-ae) { letter-spacing: 0; } .flex-restriction-modal { min-height: 350px; width: 420px; text-align: center; background-image: linear-gradient(180deg, #010a13 0%, rgba(1,10,19,0.78) 13.22%, rgba(1,10,19,0) 39.83%, rgba(1,10,19,0.69) 74.29%, #010a13 100%), url(/fe/lol-parties/flex_restriction_modal_background.png); background-repeat: no-repeat; margin-top: 10px; } .flex-restriction-modal .flex-restriction-modal-title { color: #c8aa6e; } .flex-restriction-modal .flex-restriction-modal-body { color: $color_palette_gray1; margin-top: 225px; padding: 0 20px; line-height: 24px; } .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 .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 .uikit-background-switcher .lol-uikit-background-switcher-image { transform-origin: 10% 35%; transition: transform 0.15s ease; } .parties-view .parties-background .uikit-background-switcher.isMatchmaking .lol-uikit-background-switcher-image { transform: scale(1) !important; } .parties-view .parties-background.is-showing-party .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: 92px; left: 21px; 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: ltr; 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: ltr; 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: ltr; 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: ltr; 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, .parties-footer-notifications .parties-mmr-warning-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-mmr-warning-icon { background-image: url(/fe/lol-parties/icon-warning-blue.png); } .parties-footer-notifications .parties-footer-warning { direction: ltr; 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: left ; } .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: ltr; 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: 5px; display: flex; align-items: center; } .parties-header-button-container .promotional-content-container { position: relative; margin-right: 10px; } .parties-header-button-container .back-button-container { margin-left: 12px; 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 .back-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: left ; } 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-v2 { padding: 0; } .parties-lower-section.parties-v2 .parties-invite-dropzone { top: 156px; bottom: -96px; } .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.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 5px 0 0 ; 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 .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; height: 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: ltr; padding: 0; margin: 0; width: 100%; height: 100%; } .parties-invite-info-panel-list:not(.viewing-suggested) { display: flex; list-style-type: none; flex-flow: row wrap; align-items: flex-start; align-content: flex-start; } .parties-invite-info-panel-list:not(.viewing-suggested) .parties-invite-info-panel-player { line-height: 1.7em; display: flex; } .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 0 0 10px ; } .parties-invite-info-panel-list.viewing-suggested .parties-invite-info-panel-player .invite-info-name { margin: 0 0 0 13px ; 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: ltr; color: #a09b8c; display: flex; flex-direction: row ; position: relative; line-height: 32px; flex: 2 0 0; } .parties-invite-info-empty { display: flex; flex-direction: row ; 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: ltr; 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); } .tft-progression { position: relative; width: 100%; height: 100%; } .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; margin: auto 0; } .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; margin-top: auto; margin-bottom: auto; } .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 0 0 10px ; } .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 0 0 auto ; } .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); } } .parties-invite-panel-tft-progression .reward-container, .parties-invite-panel-tft-progression .reward-container .reward-label, .parties-invite-panel-tft-progression .progression-complete .progression-complete-title { font-family: var(--font-display); } .parties-invite-panel-tft-progression .reward-container .progress-container, .parties-invite-panel-tft-progression .progression-complete .progression-complete-body { font-family: var(--font-body); } .parties-invite-panel-tft-progression .reward-container, .parties-invite-panel-tft-progression .reward-container .reward-label, .parties-invite-panel-tft-progression .reward-container .progress-container, .parties-invite-panel-tft-progression .progression-complete .progression-complete-title, .parties-invite-panel-tft-progression .progression-complete .progression-complete-body { -webkit-user-select: none; } .parties-invite-panel-tft-progression .reward-container, .parties-invite-panel-tft-progression .reward-container .reward-label, .parties-invite-panel-tft-progression .reward-container .progress-container, .parties-invite-panel-tft-progression .progression-complete .progression-complete-title, .parties-invite-panel-tft-progression .progression-complete .progression-complete-body { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .parties-invite-panel-tft-progression .reward-container, .parties-invite-panel-tft-progression .reward-container .reward-label, .parties-invite-panel-tft-progression .progression-complete .progression-complete-title { text-transform: uppercase; } .parties-invite-panel-tft-progression .reward-container:lang(ko-kr), .parties-invite-panel-tft-progression .reward-container .reward-label:lang(ko-kr), .parties-invite-panel-tft-progression .progression-complete .progression-complete-title:lang(ko-kr), .parties-invite-panel-tft-progression .reward-container:lang(ja-jp), .parties-invite-panel-tft-progression .reward-container .reward-label:lang(ja-jp), .parties-invite-panel-tft-progression .progression-complete .progression-complete-title:lang(ja-jp), .parties-invite-panel-tft-progression .reward-container:lang(tr-tr), .parties-invite-panel-tft-progression .reward-container .reward-label:lang(tr-tr), .parties-invite-panel-tft-progression .progression-complete .progression-complete-title:lang(tr-tr), .parties-invite-panel-tft-progression .reward-container:lang(el-gr), .parties-invite-panel-tft-progression .reward-container .reward-label:lang(el-gr), .parties-invite-panel-tft-progression .progression-complete .progression-complete-title:lang(el-gr), .parties-invite-panel-tft-progression .reward-container:lang(th-th), .parties-invite-panel-tft-progression .reward-container .reward-label:lang(th-th), .parties-invite-panel-tft-progression .progression-complete .progression-complete-title:lang(th-th), .parties-invite-panel-tft-progression .reward-container:lang(zh-tw), .parties-invite-panel-tft-progression .reward-container .reward-label:lang(zh-tw), .parties-invite-panel-tft-progression .progression-complete .progression-complete-title:lang(zh-tw) { text-transform: none; } .parties-invite-panel-tft-progression .reward-container .reward-label { text-transform: none; } .parties-invite-panel-tft-progression .progression-complete .progression-complete-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .parties-invite-panel-tft-progression .progression-complete .progression-complete-title:lang(ar-ae) { letter-spacing: 0; } .parties-invite-panel-tft-progression .reward-container, .parties-invite-panel-tft-progression .reward-container .reward-label { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .parties-invite-panel-tft-progression .reward-container:lang(ja-jp), .parties-invite-panel-tft-progression .reward-container .reward-label:lang(ja-jp) { font-size: 13px; } .parties-invite-panel-tft-progression .reward-container:lang(ar-ae), .parties-invite-panel-tft-progression .reward-container .reward-label:lang(ar-ae) { letter-spacing: 0; } .parties-invite-panel-tft-progression .reward-container .reward-label { letter-spacing: 0.0375em; } .parties-invite-panel-tft-progression .reward-container .reward-label:lang(ar-ae) { letter-spacing: 0; } .parties-invite-panel-tft-progression .reward-container .progress-container { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .parties-invite-panel-tft-progression .reward-container .progress-container:lang(ja-jp) { font-size: 13px; } .parties-invite-panel-tft-progression .reward-container .progress-container:lang(ar-ae) { letter-spacing: 0; } .parties-invite-panel-tft-progression .progression-complete .progression-complete-body { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .parties-invite-panel-tft-progression .progression-complete .progression-complete-body:lang(ja-jp) { font-size: 13px; } .parties-invite-panel-tft-progression .progression-complete .progression-complete-body:lang(ar-ae) { letter-spacing: 0; } .parties-invite-panel-tft-progression { position: relative; width: 100%; height: 100%; display: flex; direction: column; justify-content: center; align-items: center; } .parties-invite-panel-tft-progression .progression-milestone-container { position: relative; display: flex; justify-content: space-between; width: 94%; height: 94%; cursor: pointer; } .parties-invite-panel-tft-progression .progression-milestone:last-of-type { width: 100%; } .parties-invite-panel-tft-progression .reward-container { position: absolute; width: 50%; height: 100%; left: 0; right: 0; display: flex; flex-direction: column; align-items: flex-end; margin: auto; color: #f00; text-align: right; } .parties-invite-panel-tft-progression .reward-container .reward-label { color: #c89b3c; } .parties-invite-panel-tft-progression .reward-container .reward-title { color: #f0e6d2; } .parties-invite-panel-tft-progression .reward-container .progress-container { display: flex; flex-direction: row; color: #5b5a56; padding-top: 2px; } .parties-invite-panel-tft-progression .reward-container .progress-container .progress-current { color: #0acbe6; margin: 2px; } .parties-invite-panel-tft-progression .reward-container .progress-container .progress-divider, .parties-invite-panel-tft-progression .reward-container .progress-container .progress-total { margin: 2px; } .parties-invite-panel-tft-progression .progression-complete { position: relative; width: 100%; height: 100%; background-image: url("/lol-game-data/assets/ASSETS/UX/TFT/OutOfGame/Set7_Act2/Battlepass/UI/misc/progression-pengu.png"); background-size: contain; background-position: center right; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: center; cursor: pointer; } .parties-invite-panel-tft-progression .progression-complete .progression-complete-title { width: 50%; padding-bottom: 10px; padding-left: 10px; } .parties-invite-panel-tft-progression .progression-complete .progression-complete-body { width: 50%; padding-bottom: 10px; padding-left: 10px; } .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 6px 0 0 ; } .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 6px 0 0 ; } .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 6px 0 0 ; } .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 6px 0 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 6px 0 0 ; } .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 6px 0 0 ; } .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 6px 0 0 ; } .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 6px 0 0 ; } .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: ltr; 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: 0 ; right: auto ; 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: 0 ; right: auto ; 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: left 0.2s ease-in-out ; } .open-party-toggle-wrapper.right .toggle-button { background-image: url(/fe/lol-parties/toggle-button.png); left: 34px ; right: auto ; } .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: ltr; 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: ltr; 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: left ; } 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: left ; margin: 30px 10px 0 0 ; width: 239px; display: flex; flex-direction: column; align-items: stretch ; } .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: ltr; 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 5px 10px 0 ; 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 10px 0 0 ; 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 6px 0 0 ; } .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: ltr; 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 48px 0 0 ; } 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: ltr; 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; height: 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: ltr; display: flex; flex-direction: row ; 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: ltr; justify-content: flex-start ; padding: 10px 0 0 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: 2em; } .spectator-info-spectators-list-item:nth-child(odd) .spectator-info-container { width: 164px; } .spectator-info-spectators-list-item:nth-child(even) .spectator-info-container { width: 140px; } .spectator-info-spectators-list-item .spectator-info-empty { color: #a09b8c; } .spectator-info-spectators-list-item:hover { color: #f0e6d2; } .custom-game-spectate-button { direction: ltr; min-width: 155px; } .custom-game-spectate-button-wrapper { display: flex; flex: 1 0 0; margin-top: -2px; } .spectator-info-container { display: flex; align-items: center; } .spectator-info-container .spectator-info-name { text-overflow: ellipsis; min-width: 0; overflow: hidden; white-space: nowrap; } .spectator-info-container .custom-leader-icon { display: flex; margin-left: 10px; 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 .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: ltr; display: flex; flex-flow: row 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-tft { width: 100%; } .custom-game-team-tft .custom-game-team-members { display: grid; grid-template-columns: 1fr 1fr; } .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 0 0 8px ; } .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.can-moderate .custom-invite-privileges.custom-kick-member-button-tft, .custom-game-team-member.is-other-player:hover.can-moderate .custom-kick-member-button.custom-kick-member-button-tft { align-self: center; padding: 0 10px; } .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 10px 0 0 ; 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 10px 0 0 ; 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 0 0 10px ; } .custom-game-team-member .custom-member-info-right .custom-loadouts-button { position: relative; bottom: 10px; } .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 > div { margin: 0 0 0 10px ; } .custom-game-team-member .custom-member-info-left > div.custom-member-icon { margin: 0 0 0 3px ; } .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 ; align-items: center; justify-content: space-between; margin-bottom: 12px; } .custom-game-list-title { direction: ltr; } .custom-game-list-subheader { direction: ltr; 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 15px 0 0 ; } .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 15px 0 0 ; } .custom-game-list-filters-checkbox { margin: 0 15px 0 0 ; } .custom-game-list-body { padding-top: 10px; } .custom-game-list-table-scroll { height: 378px; } .custom-game-list-table { position: relative; width: 1024px; left: -34px ; table-layout: fixed; border-collapse: collapse; } .custom-game-list-table-header-row { direction: ltr; display: flex; align-items: center; height: 32px; margin: 0 12px 0 0 ; } .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: left ; } .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 { padding-top: 3px; } .tft-lobby .parties-lower-section { padding: 0px 30px; } .tft-lobby .tft-cards-container { direction: ltr; display: flex; flex-direction: column; flex: 1; } .tft-lobby .tft-cards-first-row { display: flex; flex-direction: row; justify-content: center; } .tft-lobby .tft-cards-first-row > div { width: 100%; max-width: 33%; display: flex; justify-content: center; flex-direction: column; margin-right: 12px; } .tft-lobby .tft-cards-first-row > div:last-child { margin-right: 0px; } .tft-lobby .tft-cards-first-row .tft-cards-first-row-middle { position: relative; } .tft-lobby .tft-cards-first-row .tft-cards-first-row-middle .tft-missions-button { position: absolute; top: 10px; right: 26px; } .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-lobby.tft-lobby-pair .tft-cards-first-row { margin-top: 61px; } .tft-lobby.tft-lobby-pair .tft-cards-first-row > div { margin: 0 35px; } .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, .tft-player-card-full .icon-wrapper .level-label { font-family: var(--font-display); } .tft-player-card .current-rank .rank-name, .tft-player-card .current-rank .rated-rating { 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 .current-rank .rated-rating, .tft-player-card-self .icon-wrapper .level-label, .tft-player-card-full .icon-wrapper .level-label { -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 .current-rank .rated-rating, .tft-player-card-self .icon-wrapper .level-label, .tft-player-card-full .icon-wrapper .level-label { 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, .tft-player-card-full .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-full .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-full .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-full .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-full .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-full .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), .tft-player-card-full .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, .tft-player-card-full .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), .tft-player-card-full .icon-wrapper .level-label:lang(ja-jp) { font-size: 13px; } .tft-player-card-self .icon-wrapper .level-label:lang(ar-ae), .tft-player-card-full .icon-wrapper .level-label:lang(ar-ae) { letter-spacing: 0; } .tft-player-card .current-rank .rank-name, .tft-player-card .current-rank .rated-rating { 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 .current-rank .rated-rating:lang(ja-jp) { font-size: 13px; } .tft-player-card .current-rank .rank-name:lang(ar-ae), .tft-player-card .current-rank .rated-rating: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: cover; background-position: center; 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 .player-party-tools { top: 5px; right: 5px ; left: auto ; 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-wrapper { display: flex; flex-direction: row; align-items: center; } .tft-player-card .current-rank .rank-icon, .tft-player-card .current-rank .rated-tier-icon { display: inline-block; width: 22px; height: 18px; background-size: cover; background-repeat: no-repeat; margin: 6px 8px 0 0 ; } .tft-player-card .current-rank .rated-tier-icon { background-size: 20px 18px; margin-top: 10px; margin-right: 0px; } .tft-player-card .current-rank .rank-name, .tft-player-card .current-rank .rated-rating { padding-top: 9px; } .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 .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, .tft-player-card-full { height: 254px; border: thin solid rgba(0,0,0,0.51); } .tft-player-card-self .inner-border-1, .tft-player-card-full .inner-border-1 { border: thin solid rgba(70,55,20,0.7); } .tft-player-card-self .inner-border-2, .tft-player-card-full .inner-border-2 { border: thin solid rgba(1,10,19,0.595); } .tft-player-card-self .icon-wrapper, .tft-player-card-full .icon-wrapper { margin-top: -22px; width: 105px; height: 105px; padding: 8px; } .tft-player-card-self .icon-wrapper .icon-frame, .tft-player-card-full .icon-wrapper .icon-frame { background-image: url(/fe/lol-parties/captain-icon-frame-with-level.png); height: 111px; } .tft-player-card-self .icon-wrapper .icon-frame.has-toggle:hover, .tft-player-card-full .icon-wrapper .icon-frame.has-toggle:hover { filter: brightness(125%); } .tft-player-card-self .icon-wrapper .icon-frame.no-level, .tft-player-card-full .icon-wrapper .icon-frame.no-level { background-image: url(/fe/lol-parties/captain-icon-frame.png); height: 110px; } .tft-player-card-self .icon-wrapper .level-label, .tft-player-card-full .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, .tft-player-card-full .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, .tft-player-card-full .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-leader-icon { position: absolute; width: 28px; height: 28px; top: -138px; left: 145px; } .tft-player-card-self .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .tft-player-card-full .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, .tft-player-card-full .player-party-controls .parties-player-labels-wrapper .player-lobby-restrictions { top: 73px; right: 150px; } .tft-player-card-self .current-rank, .tft-player-card-full .current-rank { bottom: 110px; } .tft-player-card-self .current-rank .rank-name, .tft-player-card-full .current-rank .rank-name, .tft-player-card-self .current-rank .rated-rating, .tft-player-card-full .current-rank .rated-rating { color: #a09b8c; } .tft-player-card-full.tft-player-card-self .inner-border-1 { border: thin solid rgba(70,55,20,0.7); } .tft-player-card-full.tft-player-card-self .inner-border-2 { background: #0a1428; opacity: 0.85; border: 1px solid rgba(0,0,0,0.5); } .tft-player-card-full .icon-wrapper { margin-top: -50px; } .tft-player-card-full .inner-border-1 { border: 3px solid #010a13; } .tft-player-card-full .player-party-controls .parties-player-labels-wrapper { top: 64px; } .tft-player-card-full .player-party-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-leader-icon { left: 148px; } .tft-player-card-full .current-rank { top: 90px; bottom: auto; flex-direction: column; } .tft-player-card-full .current-rank .rank-rated-divider { display: none; } .tft-player-card-full.tft-player-invited .invited-spinner { margin: 95px auto 0; } .cosmetics-section .cosmetics-wrapper { font-family: var(--font-body); } .cosmetics-section .cosmetics-wrapper { -webkit-user-select: none; } .cosmetics-section .cosmetics-wrapper { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .cosmetics-section .cosmetics-wrapper { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .cosmetics-section .cosmetics-wrapper:lang(ja-jp) { font-size: 13px; } .cosmetics-section .cosmetics-wrapper:lang(ar-ae) { letter-spacing: 0; } .cosmetics-section { position: absolute; padding-top: 8px; box-sizing: border-box; bottom: 9px; left: 24px; right: 15px; display: flex; flex-direction: row; justify-content: center; border-top: 1px solid #3c3c41; } .cosmetics-section .cosmetics-wrapper { color: #a09b8c; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; margin-right: 9px; } .cosmetics-section lol-parties-cosmetics-picker { margin-top: 3px; width: 93px; height: 62px; } .cosmetics-section .loadouts-icon-container { margin-top: 3px; width: 93px; height: 62px; box-sizing: border-box; border: 3px solid rgba(0,0,0,0.55); background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; box-shadow: outset 0 0 0 1px #000; } .social-leaderboard-button-container .social-leaderboard-pip-cta { position: absolute; pointer-events: none; margin-left: 1px; top: 9px; } .social-leaderboard-button-container .social-leaderboard-button-icon { width: 32px; height: 22px; background: url(/fe/lol-parties/button-icon.svg) no-repeat center; padding-left: 1px; } .v2-banner-component .lobby-banner .player-name-container .player-name { font-family: var(--font-display); } .v2-banner-component .lobby-banner .player-name-container .player-name { -webkit-user-select: none; } .v2-banner-component .lobby-banner .player-name-container .player-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .v2-banner-component .lobby-banner .player-name-container .player-name { text-transform: uppercase; } .v2-banner-component .lobby-banner .player-name-container .player-name:lang(ko-kr), .v2-banner-component .lobby-banner .player-name-container .player-name:lang(ja-jp), .v2-banner-component .lobby-banner .player-name-container .player-name:lang(tr-tr), .v2-banner-component .lobby-banner .player-name-container .player-name:lang(el-gr), .v2-banner-component .lobby-banner .player-name-container .player-name:lang(th-th), .v2-banner-component .lobby-banner .player-name-container .player-name:lang(zh-tw) { text-transform: none; } .v2-banner-component .lobby-banner .player-name-container .player-name { text-transform: none; } .v2-banner-component .lobby-banner .player-name-container .player-name { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .v2-banner-component .lobby-banner .player-name-container .player-name:lang(ar-ae) { letter-spacing: 0; } .v2-banner-component .lobby-banner .player-name-container .player-name { letter-spacing: 0.025em; } .v2-banner-component .lobby-banner .player-name-container .player-name:lang(ar-ae) { letter-spacing: 0; } .v2-banner-component { position: relative; width: 196px; margin: 0 4px; } .v2-banner-component .lobby-banner { position: relative; margin: auto; } .v2-banner-component .lobby-banner .lobby-banner-contents { position: relative; display: flex; flex-direction: column; align-items: center; } .v2-banner-component .lobby-banner .banner-spacer { height: 190px; } .v2-banner-component .lobby-banner .chat-restriction-warning-container { width: 25px; height: 25px; position: absolute; margin-top: 207px; } .v2-banner-component .lobby-banner .player-identity-container { position: relative; height: 160px; width: 160px; margin-top: 5px; } .v2-banner-component .lobby-banner .player-details-spacer { height: 18px; } .v2-banner-component .lobby-banner .player-name-container { display: flex; justify-content: center; align-items: center; height: 20px; margin-top: -15px; } .v2-banner-component .lobby-banner .player-name-container .player-name { font-size: 16px; line-height: 18px; color: #f0e6d2; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-banner-component .lobby-banner .player-name-container .leader-icon { height: 16px; width: 16px; margin-right: 5px; background-image: url(/fe/lol-parties/icon-crown.png); background-size: cover; } .v2-banner-component .lobby-banner .player-achievements-container { display: flex; min-height: 82px; } .v2-banner-component .lobby-banner .player-achievements-container.hide { opacity: 0; } .v2-banner-component .lobby-banner .position-icons-container { display: flex; margin-top: 40px; justify-content: space-between; flex-direction: row-reverse; } .v2-banner-component .lobby-banner .position-icons-container .position-element.primary { transition: 500ms $easing_circular_ease_out; } .v2-banner-component .lobby-banner .position-icons-container .position-element.secondary { transition: 500ms $easing_circular_ease_out; } .v2-banner-component .lobby-banner .position-icons-container.single-selector .primary { transform: translateX(20px); } .v2-banner-component .lobby-banner .position-icons-container.single-selector .secondary { pointer-events: none; transform: translateX(-30px) scale(0.8); opacity: 0; } .v2-banner-component .lobby-banner .preferred-champions-container { color: #fff; margin-top: 10px; } .v2-banner-component .lobby-banner .preferred-champions-container .preferred-champion { height: 30px; border: 1px solid #fff; } .v2-banner-component .lobby-banner.empty { background-image: none; } .v2-banner-component .lobby-banner.local .banner-highlight { opacity: 1; } .v2-banner-component .lobby-banner.local .player-identity-container { height: 180px; width: 180px; margin-top: 0; } .v2-banner-component .lobby-banner.local .position-icons-container { margin-top: 50px; } .v2-banner-component .lobby-banner-animation-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .v2-banner-component .player-identity-animation-container { position: absolute; top: 275px; width: 100%; } .v2-banner-component .player-identity-animation-container.local { top: 370px; } .v2-banner-component .player-identity-animation-container video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .v2-banner-component.challenges-disabled .player-name-container { margin-top: -24px; } .v2-banner-component:nth-of-type(1) { order: 30; } .v2-banner-component:nth-of-type(2) { order: 20; } .v2-banner-component:nth-of-type(3) { order: 40; } .v2-banner-component:nth-of-type(4) { order: 10; } .v2-banner-component:nth-of-type(5) { order: 50; } .v2-banner-component:hover .v2-player-party-controls .player-party-tools { opacity: 1; } .v2-footer-component .center-container .find-match-button-container { font-family: var(--font-display); } .v2-footer-component .center-container .find-match-button-container { -webkit-user-select: none; } .v2-footer-component .center-container .find-match-button-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .v2-footer-component .center-container .find-match-button-container { text-transform: uppercase; } .v2-footer-component .center-container .find-match-button-container:lang(ko-kr), .v2-footer-component .center-container .find-match-button-container:lang(ja-jp), .v2-footer-component .center-container .find-match-button-container:lang(tr-tr), .v2-footer-component .center-container .find-match-button-container:lang(el-gr), .v2-footer-component .center-container .find-match-button-container:lang(th-th), .v2-footer-component .center-container .find-match-button-container:lang(zh-tw) { text-transform: none; } .v2-footer-component .center-container .find-match-button-container { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .v2-footer-component .center-container .find-match-button-container:lang(ar-ae) { letter-spacing: 0; } .v2-footer-component { position: relative; height: 100%; width: 100%; } .v2-footer-component .left-container { width: 300px; } .v2-footer-component .left-container .chat-container { display: flex; flex-direction: column; position: fixed; left: 34px; top: 518px; height: 184px; width: 300px; border-radius: 2px; box-sizing: border-box; } .v2-footer-component .center-container { display: flex; align-items: center; justify-content: center; height: 31px; } .v2-footer-component .center-container .close-button-container { width: 150px; } .v2-footer-component .center-container .close-button-container .close-button { float: right; height: 32px; width: 32px; margin-right: 15px; } .v2-footer-component .center-container .find-match-button-container { position: relative; height: 48px; width: 188px; color: #cdfafa; } .v2-footer-component .center-container .find-match-button-container .right-wing { position: absolute; background-image: url(/fe/lol-parties/footer-wing.png); background-size: cover; right: -110px; top: 0; height: 28px; width: 122px; transform: scaleX(-1); pointer-events: none; } .v2-footer-component .center-container .find-match-button-container .left-wing { position: absolute; background-image: url(/fe/lol-parties/footer-wing.png); background-size: cover; left: -110px; top: 0; height: 28px; width: 122px; pointer-events: none; } .v2-footer-component .center-container .role-selectors-container { display: flex; width: 150px; } .v2-footer-component .center-container .role-selectors-container .position-element { height: 30px; width: 72px; margin-left: -12px; } .v2-footer-component .center-container .role-selectors-container .position-element:nth-of-type(2) { margin-left: -16px; } .v2-footer-component .right-container { width: 300px; } .v2-footer-component .right-container .invite-info-panel-container { position: absolute; right: 36px; bottom: 16px; height: 139px; width: 288px; display: flex; flex-direction: column; justify-content: flex-end; } .v2-footer-notifications, .v2-footer-notifications .parties-footer-warning, lol-uikit-content-block.parties-footer-tooltip[type=tooltip-large] { font-family: var(--font-body); } .v2-footer-notifications, .v2-footer-notifications .parties-footer-warning, lol-uikit-content-block.parties-footer-tooltip[type=tooltip-large] { -webkit-user-select: none; } .v2-footer-notifications, .v2-footer-notifications .parties-footer-warning, lol-uikit-content-block.parties-footer-tooltip[type=tooltip-large] { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .v2-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; } .v2-footer-notifications:lang(ar-ae), lol-uikit-content-block.parties-footer-tooltip[type=tooltip-large]:lang(ar-ae) { letter-spacing: 0; } .v2-footer-notifications .parties-footer-warning { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .v2-footer-notifications .parties-footer-warning:lang(ja-jp) { font-size: 13px; } .v2-footer-notifications .parties-footer-warning:lang(ar-ae) { letter-spacing: 0; } .v2-footer-notifications .parties-footer-warning, .v2-footer-notifications .parties-queue-warning-error, .v2-footer-notifications .parties-restrictions-warning-error, .v2-footer-notifications .parties-ready-warning { display: flex; overflow: hidden; flex-direction: row; align-items: center; padding: 4px 8px; } .v2-footer-notifications .parties-notification-warning-icon, .v2-footer-notifications .parties-ready-warning-icon, .v2-footer-notifications .parties-autofill-warning-icon, .v2-footer-notifications .parties-autofill-protection-icon, .v2-footer-notifications .parties-mmr-warning-icon { flex-shrink: 0; display: inline-block; height: 20px; width: 20px; background-repeat: no-repeat; background-size: contain; vertical-align: middle; } .v2-footer-notifications { left: 0; right: 0; top: -70px; 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; } .v2-footer-notifications .parties-notification-warning-icon { background-image: url(/fe/lol-parties/icon-warning-grey.png); } .v2-footer-notifications .parties-notification-warning-icon.leader { background-image: url(/fe/lol-parties/icon-warning-red.png); } .v2-footer-notifications .parties-ready-warning-icon { background-image: url(/fe/lol-parties/icon-warning-grey.png); } .v2-footer-notifications .parties-autofill-warning-icon { margin-right: 4px; background-image: url(/fe/lol-parties/icon-warning-blue.png); } .v2-footer-notifications .parties-autofill-protection-icon { margin-right: 4px; background-image: url(/fe/lol-parties/autofill-protection-icon.png); } .v2-footer-notifications .parties-mmr-warning-icon { margin-right: 4px; background-image: url(/fe/lol-parties/icon-warning-blue.png); } .v2-footer-notifications .parties-footer-warning { direction: ltr; color: #cdfafa; margin-top: 10px; background: #1e2328; border: 1px solid rgba(160,155,140,0.1); box-sizing: border-box; border-radius: 16px; } .v2-footer-notifications .parties-footer-error { text-align: center; font-size: 12px; } .v2-footer-notifications .parties-restrictions-warning-error { font-size: 12px; color: #a09b8c; } .v2-footer-notifications .parties-ready-warning { color: #a09b8c; } lol-uikit-content-block.parties-footer-tooltip[type=tooltip-large] { max-width: 400px; text-align: left ; } .v2-header-component .lobby-header-content .lobby-header-description { font-family: var(--font-display); } .v2-header-component .patch-notes-button { font-family: var(--font-body); } .v2-header-component .lobby-header-content .lobby-header-description, .v2-header-component .patch-notes-button { -webkit-user-select: none; } .v2-header-component .lobby-header-content .lobby-header-description, .v2-header-component .patch-notes-button { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .v2-header-component .lobby-header-content .lobby-header-description { text-transform: uppercase; } .v2-header-component .lobby-header-content .lobby-header-description:lang(ko-kr), .v2-header-component .lobby-header-content .lobby-header-description:lang(ja-jp), .v2-header-component .lobby-header-content .lobby-header-description:lang(tr-tr), .v2-header-component .lobby-header-content .lobby-header-description:lang(el-gr), .v2-header-component .lobby-header-content .lobby-header-description:lang(th-th), .v2-header-component .lobby-header-content .lobby-header-description:lang(zh-tw) { text-transform: none; } .v2-header-component .lobby-header-content .lobby-header-description { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .v2-header-component .lobby-header-content .lobby-header-description:lang(ar-ae) { letter-spacing: 0; } .v2-header-component .patch-notes-button { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .v2-header-component .patch-notes-button:lang(ja-jp) { font-size: 13px; } .v2-header-component .patch-notes-button:lang(ar-ae) { letter-spacing: 0; } .v2-header-component .patch-notes-button { color: #0596aa; text-decoration: none; } .v2-header-component .patch-notes-button:hover, .v2-header-component .patch-notes-button.hover { color: #cdfafa; } .v2-header-component .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; } .v2-header-component .patch-notes-button:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .v2-header-component .patch-notes-button:hover:after { background-color: #cdfafa; } .v2-header-component { position: absolute; top: 79px; margin-top: 5px; width: 100%; } .v2-header-component .lobby-header-overlay { position: absolute; width: 100%; height: 64px; background: linear-gradient(180deg, rgba(1,10,19,0.8) 29.17%, rgba(1,10,19,0) 100%); opacity: 0.8; filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.25)); pointer-events: none; } .v2-header-component .lobby-header-content { display: flex; align-items: center; margin-top: 6px; position: relative; } .v2-header-component .lobby-header-content .lobby-back-button-container { display: flex; align-items: center; margin: 0 18px; } .v2-header-component .lobby-header-content .lobby-back-button-container .lobby-back-button { height: 36px; width: 36px; margin-right: 15px; } .v2-header-component .lobby-header-content .lobby-back-button-container .lobby-header-vertical-line { height: 32px; width: 1px; background: rgba(255,255,255,0.25); } .v2-header-component .lobby-header-content .lobby-header-separator { content: ' '; display: block; background-color: #f0e6d2; border: thin solid rgba(1,10,19,0.5); margin: 0 7px 0 6px; width: 1px; height: 1px; border-radius: 1px; transform: rotate(45deg); float: right; flex-shrink: 0; } .v2-header-component .lobby-header-content .lobby-header-description { display: flex; align-items: center; color: #f0e6d2; font-weight: 700; margin-left: 10px; } .v2-header-component .lobby-header-content .lobby-header-buttons-container { display: flex; margin-left: auto; margin-right: 15px; align-items: center; } .v2-header-component .show-tutorial-button { display: inline-block; height: 18px; width: 18px; margin-left: 15px; cursor: pointer; pointer-events: all; } .v2-header-component .patch-notes-button { direction: ltr; cursor: pointer; padding-right: 20px; } .lobby-header-map-icon { height: 30px; width: 30px; background-size: cover; background-repeat: no-repeat; } .lobby-header-map-icon.game_map_howling_abyss { background-image: url("/lol-game-data/assets/content/src/LeagueClient/GameModeAssets/ARAM/img/icon-v2.png"); } .lobby-header-map-icon.game_map_summoners_rift { background-image: url("/lol-game-data/assets/content/src/LeagueClient/GameModeAssets/Classic_SRU/img/icon-v2.png"); } .lobby-header-map-icon.game_map_twisted_treeline { background-image: url("/lol-game-data/assets/content/src/LeagueClient/GameModeAssets/GameModeX/img/icon-v2.png"); } .lobby-header-map-icon.game_map_rotating_game_mode { background-image: url("/lol-game-data/assets/content/src/LeagueClient/GameModeAssets/GameModeX/img/icon-v2.png"); } .lobby-header-map-icon.game_map_21 { background-image: url("/lol-game-data/assets/content/src/LeagueClient/GameModeAssets/GameModeX/img/icon-v2.png"); } .lobby-header-map-icon.game_map_22 { background-image: url(/fe/lol-parties/map_tft.png); } .v2-lobby-root-component { position: absolute; height: 100%; top: 0; width: 100%; margin-top: 2px; } .v2-lobby-root-component.hidden { opacity: 0; } .v2-lobby-root-component .navbar-blur { position: absolute; top: 0; height: 79px; width: 100%; background: linear-gradient(180deg, rgba(1,10,19,0.6) 46.02%, rgba(1,10,19,0.25) 100%); backdrop-filter: blur(12px); } .v2-lobby-root-component .party-members-container { height: 100%; display: flex; flex-direction: row; justify-content: center; } .v2-lobby-root-component .footer-container { position: absolute; bottom: 5px; height: 50px; width: 100%; display: flex; justify-content: space-between; } .v2-lobby-root-component .lobby-intro-animation-container { position: absolute; top: 2px; height: 100%; width: 100%; pointer-events: none; } .v2-lobby-root-component .lobby-intro-animation-container #lottie-intro-anim, .v2-lobby-root-component .lobby-intro-animation-container video { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .v2-lobby-root-component .hidden { opacity: 0; } .v2-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: 41.910000000000004px; height: 41.910000000000004px; display: block; cursor: pointer; padding: 0; border: none; outline: none; margin-left: -1px; } .v2-player-management-button-options:hover:not(:disabled) { background-image: url(/fe/lol-parties/banner-options-hover.png); } .v2-player-management-button-options:active:not(:disabled) { background-image: url(/fe/lol-parties/banner-options-click.png); } .v2-player-management-button-options:disabled { cursor: auto; } .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { font-family: var(--font-display); } .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { -webkit-user-select: none; } .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .v2-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; } .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { text-transform: uppercase; } .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ko-kr), .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ko-kr), .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ja-jp), .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ja-jp), .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(tr-tr), .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(tr-tr), .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(el-gr), .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(el-gr), .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(th-th), .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(th-th), .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(zh-tw), .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(zh-tw) { text-transform: none; } .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name, .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { text-transform: none; } .v2-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; } .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ar-ae) { letter-spacing: 0; } .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { letter-spacing: 0.025em; } .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ar-ae) { letter-spacing: 0; } .v2-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; } .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ar-ae) { letter-spacing: 0; } .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { letter-spacing: 0.025em; } .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name:lang(ar-ae) { letter-spacing: 0; } .v2-player-party-controls { position: absolute; width: 100%; left: 50%; top: 0; transform: translateX(-50%); display: flex; justify-content: center; } .v2-player-party-controls .parties-player-labels-wrapper { position: absolute; width: 100%; min-height: 50px; display: flex; flex-direction: column; justify-content: flex-start; } .v2-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; } .v2-player-party-controls .player-lobby-restrictions.leader { background-image: url(/fe/lol-parties/icon-warning-red.png); } .v2-player-party-controls .parties-player-positions { position: absolute; left: 50%; } .v2-player-party-controls.other-player-controls .player-party-tools { position: absolute; width: 100%; display: flex; top: 170px; justify-content: center; transition: opacity linear 0.2s; opacity: 0; } .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper { top: 180px; } .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container { align-items: flex-start; } .v2-player-party-controls.other-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { color: #a09b8c; max-width: 140px; } .v2-player-party-controls.other-player-controls .lol-not-ready-loader { position: absolute; width: 100%; top: 400px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .v2-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; } .v2-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; } .v2-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; } .v2-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; } .v2-player-party-controls.other-player-controls .player-lobby-restrictions { width: auto; min-width: 18px; min-height: 18px; top: 468px; } .v2-player-party-controls.other-player-controls .parties-player-positions { top: 420px; margin-left: 1px; cursor: default; } .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper { top: 170px; } .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container { align-items: center; } .v2-player-party-controls.main-player-controls .parties-player-labels-wrapper .parties-player-name-container .parties-player-name { color: #fabe0a; max-width: 170px; } .v2-player-party-controls.main-player-controls .player-lobby-restrictions { width: auto; min-width: 18px; min-height: 18px; top: 492px; } .v2-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); } } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-map { font-family: var(--font-display); } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-mode, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges { font-family: var(--font-body); } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-map, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-mode, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges { -webkit-user-select: none; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-map, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-mode, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-map { text-transform: uppercase; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-map:lang(ko-kr), .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-map:lang(ja-jp), .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-map:lang(tr-tr), .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-map:lang(el-gr), .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-map:lang(th-th), .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-map:lang(zh-tw) { text-transform: none; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-map { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-map:lang(ja-jp) { font-size: 13px; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-map:lang(ar-ae) { letter-spacing: 0; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-mode { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-mode:lang(ja-jp) { font-size: 13px; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-mode:lang(ar-ae) { letter-spacing: 0; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence:lang(ja-jp), .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience:lang(ja-jp), .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery:lang(ja-jp), .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals:lang(ja-jp), .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges:lang(ja-jp) { font-size: 13px; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence:lang(ar-ae), .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience:lang(ar-ae), .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery:lang(ar-ae), .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals:lang(ar-ae), .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges:lang(ar-ae) { letter-spacing: 0; } .v2-point-eligibility-component .lobby-point-eligibility-custom { position: absolute; left: 86px; } .v2-point-eligibility-component .lobby-point-eligibility-content { margin-left: 10px; } .v2-point-eligibility-component .lobby-point-eligibility-content .point-eligibility-icon { height: 20px; width: 20px; background-image: url(/fe/lol-parties/icon-point-eligibility.png); background-size: contain; } .lobby-point-eligibility-tooltip-content { background: #1a1c21; box-shadow: 0 4px 24px rgba(0,0,0,0.75); min-width: 200px; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header { display: flex; align-items: bottom; margin-bottom: 10px; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title { margin-left: 5px; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-map { white-space: nowrap; font-size: 14px; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-header .lobby-point-eligibility-tooltip-content-header-title .lobby-point-eligibility-tooltip-content-header-mode { white-space: nowrap; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-divider-container { width: 100%; margin: 20px 0 8px; text-align: center; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-divider-container .lobby-point-eligibility-tooltip-content-divider { width: 206px; height: 1px; background: #1e2328; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-title { margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-list { list-style-type: none; display: flex; flex-direction: column; margin: 0; padding: 0; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence.hidden { display: none; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges { display: flex; align-items: center; height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence.disabled, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience.disabled, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery.disabled, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals.disabled, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges.disabled { color: #3c3c41; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence.disabled .lobby-point-eligibility-tooltip-content-experience-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience.disabled .lobby-point-eligibility-tooltip-content-experience-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery.disabled .lobby-point-eligibility-tooltip-content-experience-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals.disabled .lobby-point-eligibility-tooltip-content-experience-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges.disabled .lobby-point-eligibility-tooltip-content-experience-icon { background-image: url(/fe/lol-parties/icon-xp-disabled.png); } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence.disabled .lobby-point-eligibility-tooltip-content-mastery-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience.disabled .lobby-point-eligibility-tooltip-content-mastery-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery.disabled .lobby-point-eligibility-tooltip-content-mastery-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals.disabled .lobby-point-eligibility-tooltip-content-mastery-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges.disabled .lobby-point-eligibility-tooltip-content-mastery-icon { background-image: url(/fe/lol-parties/icon-mastery-disabled.png); } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence.disabled .lobby-point-eligibility-tooltip-content-eternals-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience.disabled .lobby-point-eligibility-tooltip-content-eternals-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery.disabled .lobby-point-eligibility-tooltip-content-eternals-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals.disabled .lobby-point-eligibility-tooltip-content-eternals-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges.disabled .lobby-point-eligibility-tooltip-content-eternals-icon { background-image: url(/fe/lol-parties/icon-eternals-disabled.png); } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence.disabled .lobby-point-eligibility-tooltip-content-challenges-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience.disabled .lobby-point-eligibility-tooltip-content-challenges-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery.disabled .lobby-point-eligibility-tooltip-content-challenges-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals.disabled .lobby-point-eligibility-tooltip-content-challenges-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges.disabled .lobby-point-eligibility-tooltip-content-challenges-icon { background-image: url(/fe/lol-parties/icon-challenges-disabled.svg); } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence .lobby-point-eligibility-tooltip-content-description, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience .lobby-point-eligibility-tooltip-content-description, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery .lobby-point-eligibility-tooltip-content-description, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals .lobby-point-eligibility-tooltip-content-description, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges .lobby-point-eligibility-tooltip-content-description { margin-top: 1px; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence .lobby-point-eligibility-tooltip-content-influence-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience .lobby-point-eligibility-tooltip-content-influence-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery .lobby-point-eligibility-tooltip-content-influence-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals .lobby-point-eligibility-tooltip-content-influence-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges .lobby-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 6px 0 0 ; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence .lobby-point-eligibility-tooltip-content-experience-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience .lobby-point-eligibility-tooltip-content-experience-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery .lobby-point-eligibility-tooltip-content-experience-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals .lobby-point-eligibility-tooltip-content-experience-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges .lobby-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 6px 0 0 ; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence .lobby-point-eligibility-tooltip-content-mastery-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience .lobby-point-eligibility-tooltip-content-mastery-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery .lobby-point-eligibility-tooltip-content-mastery-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals .lobby-point-eligibility-tooltip-content-mastery-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges .lobby-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 6px 0 0 ; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence .lobby-point-eligibility-tooltip-content-eternals-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience .lobby-point-eligibility-tooltip-content-eternals-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery .lobby-point-eligibility-tooltip-content-eternals-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals .lobby-point-eligibility-tooltip-content-eternals-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges .lobby-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 6px 0 0 ; } .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-influence .lobby-point-eligibility-tooltip-content-challenges-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-experience .lobby-point-eligibility-tooltip-content-challenges-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-mastery .lobby-point-eligibility-tooltip-content-challenges-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-eternals .lobby-point-eligibility-tooltip-content-challenges-icon, .lobby-point-eligibility-tooltip-content .lobby-point-eligibility-tooltip-content-challenges .lobby-point-eligibility-tooltip-content-challenges-icon { height: 16px; width: 16px; background-image: url(/fe/lol-parties/icon-challenges.png); background-size: contain; margin: 0 7px 0 1px ; } .v2-position-selector-component { width: 100px; } .v2-position-selector-component .position-selector-buttons-container { display: flex; align-items: center; padding-left: 14px; } .horizontal-options-showcase { position: relative; height: 75px; top: 0; } .horizontal-options-showcase .horizontal-options-showcase-background { position: absolute; width: 532px; height: 158px; bottom: -22px; left: 50%; transform: translate(-50%, 0%); display: flex; justify-content: center; background: url(/fe/lol-parties/role-selector-tray-background.png); background-size: contain; background-repeat: no-repeat; pointer-events: none; } .horizontal-options-showcase .horizontal-options-showcase-content { display: flex; height: 100%; justify-content: center; align-items: flex-end; width: 360px; } .horizontal-options-showcase .horizontal-options-showcase-content.no-overflow { overflow: hidden; } .horizontal-options-showcase .horizontal-options-showcase-vertical-divider { position: relative; width: 1px; height: 28px; margin: 0 9px; border-right: solid #3c3c41 1px; } .horizontal-options-showcase .animations-wrapper .animation-intro-container { position: absolute; top: 25%; left: -1%; right: 0; margin: auto; pointer-events: none; } .horizontal-options-showcase .animations-wrapper .animation-intro-container #lottie-intro-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .horizontal-options-showcase .animations-wrapper .animation-outro-base-container { position: absolute; top: 16px; left: -2px; right: 0; margin: auto; pointer-events: none; } .horizontal-options-showcase .animations-wrapper .animation-outro-magic-container { position: absolute; top: -42px; left: 160px; pointer-events: none; } .horizontal-options-showcase .animations-wrapper .animation-outro-magic-container.centered { left: 180px; } .horizontal-options-showcase .animations-wrapper .animation-button-icon { position: absolute; top: 100px; left: 158px; pointer-events: none; } .horizontal-options-showcase .animations-wrapper video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .v2-position-icon-component { display: flex; justify-content: center; align-items: center; cursor: pointer; } .v2-position-icon-component .position-image-container { position: relative; width: 30px; height: 30px; margin: 0 7px; } .v2-position-icon-component .position-image-container .position-image { width: 100%; height: 100%; background-size: contain; } .v2-position-icon-component .position-image-container .position-image-glow { position: absolute; height: 74px; width: 61px; top: -22px; left: -16px; background-image: url(/fe/lol-parties/icon-position-glow.png); background-size: cover; opacity: 0; } .v2-position-icon-component.hovered .position-image-glow { opacity: 1; } .v2-position-icon-component.selected .position-image-glow { opacity: 0; } .TOP .position-image { background-image: url(/fe/lol-parties/icon-position-top.png); } .JUNGLE .position-image { background-image: url(/fe/lol-parties/icon-position-jungle.png); } .MIDDLE .position-image { background-image: url(/fe/lol-parties/icon-position-middle.png); } .BOTTOM .position-image { background-image: url(/fe/lol-parties/icon-position-bottom.png); } .UTILITY .position-image { background-image: url(/fe/lol-parties/icon-position-utility.png); } .FILL .position-image { background-image: url(/fe/lol-parties/icon-position-fill.png); } :hover.TOP .position-image { background-image: url(/fe/lol-parties/icon-position-top-hover.png); } :hover.JUNGLE .position-image { background-image: url(/fe/lol-parties/icon-position-jungle-hover.png); } :hover.MIDDLE .position-image { background-image: url(/fe/lol-parties/icon-position-middle-hover.png); } :hover.BOTTOM .position-image { background-image: url(/fe/lol-parties/icon-position-bottom-hover.png); } :hover.UTILITY .position-image { background-image: url(/fe/lol-parties/icon-position-utility-hover.png); } :hover.FILL .position-image { background-image: url(/fe/lol-parties/icon-position-fill-hover.png); } .in-demand.TOP .position-image { background-image: url(/fe/lol-parties/icon-position-top-priority.png); } .in-demand.JUNGLE .position-image { background-image: url(/fe/lol-parties/icon-position-jungle-priority.png); } .in-demand.MIDDLE .position-image { background-image: url(/fe/lol-parties/icon-position-middle-priority.png); } .in-demand.BOTTOM .position-image { background-image: url(/fe/lol-parties/icon-position-bottom-priority.png); } .in-demand.UTILITY .position-image { background-image: url(/fe/lol-parties/icon-position-utility-priority.png); } .in-demand.FILL .position-image { background-image: url(/fe/lol-parties/icon-position-fill-priority.png); } .selected.TOP .position-image { background-image: url(/fe/lol-parties/icon-position-top-blue.png); } .selected.JUNGLE .position-image { background-image: url(/fe/lol-parties/icon-position-jungle-blue.png); } .selected.MIDDLE .position-image { background-image: url(/fe/lol-parties/icon-position-middle-blue.png); } .selected.BOTTOM .position-image { background-image: url(/fe/lol-parties/icon-position-bottom-blue.png); } .selected.UTILITY .position-image { background-image: url(/fe/lol-parties/icon-position-utility-blue.png); } .selected.FILL .position-image { background-image: url(/fe/lol-parties/icon-position-fill-blue.png); } .v2-banner-position-icon-component .position-image-container { width: 24px; height: 24px; margin: 0 7px; } .v2-banner-position-icon-component .position-image-container .position-image { background-size: contain; width: 100%; height: 100%; } .position-selector-button { position: relative; margin: 0 3px; } .position-selector-button.disabled { pointer-events: none; filter: grayscale(1) brightness(0.8); } .position-selector-button.hidden { opacity: 0; pointer-events: none; } .position-selector-button .position-selector-button-background { height: 32px; width: 32px; display: flex; justify-content: center; align-items: center; background-image: url(/fe/lol-parties/button-role-selector.png); background-size: cover; cursor: pointer; } .position-selector-button .position-selector-button-background:hover { background-image: url(/fe/lol-parties/button-role-selector-over.png); } .position-selector-button .position-selector-button-background:active { background-image: url(/fe/lol-parties/button-role-selector-down.png); } .position-selector-button .position-selector-button-background .position-image { background-size: contain; width: 18px; height: 18px; } .position-selector-button .position-selector-button-animation-container { position: absolute; pointer-events: none; top: 2px; height: 100%; width: 100%; opacity: 0; } .position-selector-button .position-selector-button-animation-container #lottie-intro-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .position-selector-button .position-selector-button-animation-container.visible { opacity: 1; } .v2-position-selector-option .position-selector-option-container .position-selector-text.position { font-family: var(--font-display); } .v2-position-selector-option .position-selector-option-container .position-selector-text.in-demand { font-family: var(--font-body); } .v2-position-selector-option .position-selector-option-container .position-selector-text.position, .v2-position-selector-option .position-selector-option-container .position-selector-text.in-demand { -webkit-user-select: none; } .v2-position-selector-option .position-selector-option-container .position-selector-text.position, .v2-position-selector-option .position-selector-option-container .position-selector-text.in-demand { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .v2-position-selector-option .position-selector-option-container .position-selector-text.position { text-transform: uppercase; } .v2-position-selector-option .position-selector-option-container .position-selector-text.position:lang(ko-kr), .v2-position-selector-option .position-selector-option-container .position-selector-text.position:lang(ja-jp), .v2-position-selector-option .position-selector-option-container .position-selector-text.position:lang(tr-tr), .v2-position-selector-option .position-selector-option-container .position-selector-text.position:lang(el-gr), .v2-position-selector-option .position-selector-option-container .position-selector-text.position:lang(th-th), .v2-position-selector-option .position-selector-option-container .position-selector-text.position:lang(zh-tw) { text-transform: none; } .v2-position-selector-option .position-selector-option-container .position-selector-text.position { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .v2-position-selector-option .position-selector-option-container .position-selector-text.position:lang(ar-ae) { letter-spacing: 0; } .v2-position-selector-option .position-selector-option-container .position-selector-text.in-demand { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .v2-position-selector-option .position-selector-option-container .position-selector-text.in-demand:lang(ja-jp) { font-size: 13px; } .v2-position-selector-option .position-selector-option-container .position-selector-text.in-demand:lang(ar-ae) { letter-spacing: 0; } .v2-position-selector-option { position: relative; margin: 0 5px; } .v2-position-selector-option .position-selector-wrapper { position: absolute; height: 116px; width: 54px; top: -58px; left: -4px; cursor: pointer; display: none; } .v2-position-selector-option .position-selector-wrapper.visible { display: block; } .v2-position-selector-option:nth-of-type(1) .position-selector-wrapper { width: 120px; left: -70px; } .v2-position-selector-option:nth-of-type(5) .position-selector-wrapper { width: 64px; } .v2-position-selector-option.fill .position-selector-wrapper { width: 120px; left: -14px; } .v2-position-selector-option .position-selector-option-container { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .v2-position-selector-option .position-selector-option-container .position-selector-text { position: absolute; width: 200px; text-align: center; height: 20px; pointer-events: none; opacity: 0; } .v2-position-selector-option .position-selector-option-container .position-selector-text.position { top: -40px; } .v2-position-selector-option .position-selector-option-container .position-selector-text.in-demand { top: -20px; } .v2-position-selector-option.hovered .position-selector-option-container .position-selector-text.position { opacity: 1; } .v2-position-selector-option.hovered .position-selector-option-container .position-selector-text.in-demand { opacity: 0; } .v2-position-selector-option.hovered .position-selector-option-container .position-selector-text.in-demand.visible { opacity: 1; } .v2-position-selector-option.hovered .position-selector-option-container .position-icon-component { background-image: radial-gradient(ellipse at center, rgba(240,244,245,0.51) 0%, rgba(235,248,253,0.37) 25%, rgba(236,236,236,0.06) 57%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 100%); } .v2-position-selector-option.already-selected .position-selector-option-container .position-icon-component { background-image: radial-gradient(ellipse at center, rgba(128,200,216,0.51) 0%, rgba(53,116,142,0.51) 25%, rgba(0,40,68,0.46) 57%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 100%); } .selection-modal { position: absolute; top: 0; height: 100%; width: 100%; } .selection-modal.is-closing { pointer-events: none; } .selection-modal.is-closing .selection-modal-wrapper { opacity: 0; transition: opacity 0.2s linear; } .selection-modal .selection-modal-wrapper { position: absolute; height: 100%; width: 100%; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8) 93%); opacity: 1; transition: opacity 0.2s linear; } .selection-modal .selection-modal-content { position: relative; } .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text, .v2-parties-invite-info-panel .split-panel-header-title, .v2-parties-invite-info-panel .split-panel-header-left, .v2-parties-invite-info-panel .split-panel-header-right { font-family: var(--font-display); } .v2-parties-invite-info-panel .parties-invite-info-panel-list, .v2-parties-invite-info-panel .invite-privilege-tooltip-content, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played { font-family: var(--font-body); } .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text, .v2-parties-invite-info-panel .split-panel-header-title, .v2-parties-invite-info-panel .split-panel-header-left, .v2-parties-invite-info-panel .split-panel-header-right { font-family: var(--font-display); } .v2-parties-invite-info-panel .parties-invite-info-panel-list, .v2-parties-invite-info-panel .invite-privilege-tooltip-content, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played { font-family: var(--font-body); } .v2-parties-invite-info-panel .parties-invite-info-panel-list, .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text, .v2-parties-invite-info-panel .invite-privilege-tooltip-content, .v2-parties-invite-info-panel .split-panel-header-title, .v2-parties-invite-info-panel .split-panel-header-left, .v2-parties-invite-info-panel .split-panel-header-right, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played { -webkit-user-select: none; } .v2-parties-invite-info-panel .parties-invite-info-panel-list, .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text, .v2-parties-invite-info-panel .invite-privilege-tooltip-content, .v2-parties-invite-info-panel .split-panel-header-title, .v2-parties-invite-info-panel .split-panel-header-left, .v2-parties-invite-info-panel .split-panel-header-right, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text, .v2-parties-invite-info-panel .split-panel-header-title, .v2-parties-invite-info-panel .split-panel-header-left, .v2-parties-invite-info-panel .split-panel-header-right { text-transform: uppercase; } .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text:lang(ko-kr), .v2-parties-invite-info-panel .split-panel-header-title:lang(ko-kr), .v2-parties-invite-info-panel .split-panel-header-left:lang(ko-kr), .v2-parties-invite-info-panel .split-panel-header-right:lang(ko-kr), .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text:lang(ja-jp), .v2-parties-invite-info-panel .split-panel-header-title:lang(ja-jp), .v2-parties-invite-info-panel .split-panel-header-left:lang(ja-jp), .v2-parties-invite-info-panel .split-panel-header-right:lang(ja-jp), .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text:lang(tr-tr), .v2-parties-invite-info-panel .split-panel-header-title:lang(tr-tr), .v2-parties-invite-info-panel .split-panel-header-left:lang(tr-tr), .v2-parties-invite-info-panel .split-panel-header-right:lang(tr-tr), .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text:lang(el-gr), .v2-parties-invite-info-panel .split-panel-header-title:lang(el-gr), .v2-parties-invite-info-panel .split-panel-header-left:lang(el-gr), .v2-parties-invite-info-panel .split-panel-header-right:lang(el-gr), .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text:lang(th-th), .v2-parties-invite-info-panel .split-panel-header-title:lang(th-th), .v2-parties-invite-info-panel .split-panel-header-left:lang(th-th), .v2-parties-invite-info-panel .split-panel-header-right:lang(th-th), .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text:lang(zh-tw), .v2-parties-invite-info-panel .split-panel-header-title:lang(zh-tw), .v2-parties-invite-info-panel .split-panel-header-left:lang(zh-tw), .v2-parties-invite-info-panel .split-panel-header-right:lang(zh-tw) { text-transform: none; } .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text:lang(ar-ae) { letter-spacing: 0; } .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text { color: #a09b8c; } .v2-parties-invite-info-panel .split-panel-header-title, .v2-parties-invite-info-panel .split-panel-header-left, .v2-parties-invite-info-panel .split-panel-header-right { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .v2-parties-invite-info-panel .split-panel-header-title:lang(ja-jp), .v2-parties-invite-info-panel .split-panel-header-left:lang(ja-jp), .v2-parties-invite-info-panel .split-panel-header-right:lang(ja-jp) { font-size: 13px; } .v2-parties-invite-info-panel .split-panel-header-title:lang(ar-ae), .v2-parties-invite-info-panel .split-panel-header-left:lang(ar-ae), .v2-parties-invite-info-panel .split-panel-header-right:lang(ar-ae) { letter-spacing: 0; } .v2-parties-invite-info-panel .split-panel-header-title, .v2-parties-invite-info-panel .split-panel-header-left, .v2-parties-invite-info-panel .split-panel-header-right { color: #a09b8c; } .v2-parties-invite-info-panel .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; } .v2-parties-invite-info-panel .parties-invite-info-panel-list:lang(ar-ae) { letter-spacing: 0; } .v2-parties-invite-info-panel .invite-privilege-tooltip-content, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .v2-parties-invite-info-panel .invite-privilege-tooltip-content:lang(ja-jp), .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors:lang(ja-jp), .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends:lang(ja-jp), .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played:lang(ja-jp) { font-size: 13px; } .v2-parties-invite-info-panel .invite-privilege-tooltip-content:lang(ar-ae), .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors:lang(ar-ae), .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends:lang(ar-ae), .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played:lang(ar-ae) { letter-spacing: 0; } .v2-parties-invite-info-panel .parties-invite-info-panel-body::-webkit-scrollbar, .v2-parties-invite-info-panel .parties-invite-info-panel-body ::-webkit-scrollbar { width: 11px; height: 11px; background-color: transparent; } .v2-parties-invite-info-panel .parties-invite-info-panel-body::-webkit-scrollbar-thumb, .v2-parties-invite-info-panel .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; } .v2-parties-invite-info-panel .parties-invite-info-panel-body::-webkit-scrollbar-thumb:hover, .v2-parties-invite-info-panel .parties-invite-info-panel-body ::-webkit-scrollbar-thumb:hover { background-color: #c8aa6e; } .v2-parties-invite-info-panel .parties-invite-info-panel-body::-webkit-scrollbar-thumb:active, .v2-parties-invite-info-panel .parties-invite-info-panel-body ::-webkit-scrollbar-thumb:active { background-color: #463714; } .v2-parties-invite-info-panel .parties-invite-info-panel-body::-webkit-scrollbar-thumb:disabled, .v2-parties-invite-info-panel .parties-invite-info-panel-body ::-webkit-scrollbar-thumb:disabled { background-color: #a09b8c; } .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text, .v2-parties-invite-info-panel .split-panel-header-title, .v2-parties-invite-info-panel .split-panel-header-left, .v2-parties-invite-info-panel .split-panel-header-right { font-family: var(--font-display); } .v2-parties-invite-info-panel .parties-invite-info-panel-list, .v2-parties-invite-info-panel .invite-privilege-tooltip-content, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played { font-family: var(--font-body); } .v2-parties-invite-info-panel .parties-invite-info-panel-list, .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text, .v2-parties-invite-info-panel .invite-privilege-tooltip-content, .v2-parties-invite-info-panel .split-panel-header-title, .v2-parties-invite-info-panel .split-panel-header-left, .v2-parties-invite-info-panel .split-panel-header-right, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played { -webkit-user-select: none; } .v2-parties-invite-info-panel .parties-invite-info-panel-list, .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text, .v2-parties-invite-info-panel .invite-privilege-tooltip-content, .v2-parties-invite-info-panel .split-panel-header-title, .v2-parties-invite-info-panel .split-panel-header-left, .v2-parties-invite-info-panel .split-panel-header-right, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text, .v2-parties-invite-info-panel .split-panel-header-title, .v2-parties-invite-info-panel .split-panel-header-left, .v2-parties-invite-info-panel .split-panel-header-right { text-transform: uppercase; } .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text:lang(ko-kr), .v2-parties-invite-info-panel .split-panel-header-title:lang(ko-kr), .v2-parties-invite-info-panel .split-panel-header-left:lang(ko-kr), .v2-parties-invite-info-panel .split-panel-header-right:lang(ko-kr), .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text:lang(ja-jp), .v2-parties-invite-info-panel .split-panel-header-title:lang(ja-jp), .v2-parties-invite-info-panel .split-panel-header-left:lang(ja-jp), .v2-parties-invite-info-panel .split-panel-header-right:lang(ja-jp), .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text:lang(tr-tr), .v2-parties-invite-info-panel .split-panel-header-title:lang(tr-tr), .v2-parties-invite-info-panel .split-panel-header-left:lang(tr-tr), .v2-parties-invite-info-panel .split-panel-header-right:lang(tr-tr), .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text:lang(el-gr), .v2-parties-invite-info-panel .split-panel-header-title:lang(el-gr), .v2-parties-invite-info-panel .split-panel-header-left:lang(el-gr), .v2-parties-invite-info-panel .split-panel-header-right:lang(el-gr), .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text:lang(th-th), .v2-parties-invite-info-panel .split-panel-header-title:lang(th-th), .v2-parties-invite-info-panel .split-panel-header-left:lang(th-th), .v2-parties-invite-info-panel .split-panel-header-right:lang(th-th), .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text:lang(zh-tw), .v2-parties-invite-info-panel .split-panel-header-title:lang(zh-tw), .v2-parties-invite-info-panel .split-panel-header-left:lang(zh-tw), .v2-parties-invite-info-panel .split-panel-header-right:lang(zh-tw) { text-transform: none; } .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text:lang(ar-ae) { letter-spacing: 0; } .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text { color: #a09b8c; } .v2-parties-invite-info-panel .split-panel-header-title, .v2-parties-invite-info-panel .split-panel-header-left, .v2-parties-invite-info-panel .split-panel-header-right { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .v2-parties-invite-info-panel .split-panel-header-title:lang(ja-jp), .v2-parties-invite-info-panel .split-panel-header-left:lang(ja-jp), .v2-parties-invite-info-panel .split-panel-header-right:lang(ja-jp) { font-size: 13px; } .v2-parties-invite-info-panel .split-panel-header-title:lang(ar-ae), .v2-parties-invite-info-panel .split-panel-header-left:lang(ar-ae), .v2-parties-invite-info-panel .split-panel-header-right:lang(ar-ae) { letter-spacing: 0; } .v2-parties-invite-info-panel .split-panel-header-title, .v2-parties-invite-info-panel .split-panel-header-left, .v2-parties-invite-info-panel .split-panel-header-right { color: #a09b8c; } .v2-parties-invite-info-panel .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; } .v2-parties-invite-info-panel .parties-invite-info-panel-list:lang(ar-ae) { letter-spacing: 0; } .v2-parties-invite-info-panel .invite-privilege-tooltip-content, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .v2-parties-invite-info-panel .invite-privilege-tooltip-content:lang(ja-jp), .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors:lang(ja-jp), .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends:lang(ja-jp), .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played:lang(ja-jp) { font-size: 13px; } .v2-parties-invite-info-panel .invite-privilege-tooltip-content:lang(ar-ae), .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors:lang(ar-ae), .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends:lang(ar-ae), .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played:lang(ar-ae) { letter-spacing: 0; } .v2-parties-invite-info-panel .invite-privilege-tooltip-content { text-align: center; color: #a09b8c; margin: 15px; width: 110px; } .v2-parties-invite-info-panel { display: flex; flex-direction: column; height: 100%; width: 100%; 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; } .v2-parties-invite-info-panel.collapsed { height: 35px; } .v2-parties-invite-info-panel .parties-invite-info-panel-body { overflow-y: auto; flex: 1 0 0; border-bottom: thin solid #785a28; transition: opacity 0.15s ease-in-out; } .v2-parties-invite-info-panel .parties-invite-info-panel-body.collapsed { opacity: 0; } .v2-parties-invite-info-panel .parties-invite-info-panel-list { direction: ltr; padding: 0; margin: 0; width: 100%; height: 100%; } .v2-parties-invite-info-panel .parties-invite-info-panel-list:not(.viewing-suggested) { display: flex; list-style-type: none; flex-flow: row wrap; align-items: flex-start; align-content: flex-start; } .v2-parties-invite-info-panel .parties-invite-info-panel-list:not(.viewing-suggested) .v2-parties-invite-info-panel-player { line-height: 1.7em; display: flex; } .v2-parties-invite-info-panel .parties-invite-info-panel-list:not(.viewing-suggested) .v2-parties-invite-info-panel-player:nth-child(odd) { width: 147px; } .v2-parties-invite-info-panel .parties-invite-info-panel-list:not(.viewing-suggested) .v2-parties-invite-info-panel-player:nth-child(even) { width: 140px; } .v2-parties-invite-info-panel .parties-invite-info-panel-list:not(.viewing-suggested) .v2-parties-invite-info-panel-player .invite-info-tag { display: none; } .v2-parties-invite-info-panel .parties-invite-info-panel-list.viewing-suggested .v2-parties-invite-info-panel-player { display: flex; align-items: center; list-style-type: none; line-height: 1.7em; padding: 0 0 0 10px ; } .v2-parties-invite-info-panel .parties-invite-info-panel-list.viewing-suggested .v2-parties-invite-info-panel-player .invite-info-name { margin: 0 0 0 10px ; flex: none; } .v2-parties-invite-info-panel .parties-invite-info-panel-list.parties-invite-info-is-custom .v2-parties-invite-info-panel-player:nth-child(odd) { margin-left: 0px; } .v2-parties-invite-info-panel .custom-invite-header { display: flex; } .v2-parties-invite-info-panel .custom-invite-header .custom-invite-header-text { direction: ltr; color: #a09b8c; display: flex; flex-direction: row ; position: relative; line-height: 32px; flex: 2 0 0; } .v2-parties-invite-info-panel .parties-invite-info-empty { display: flex; flex-direction: row ; margin-left: 7px; width: 100%; } .v2-parties-invite-info-panel .parties-invite-info-empty .parties-invite-info-empty-text { color: #a09b8c; line-height: 2.7em; } .v2-parties-invite-info-panel .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; } .v2-parties-invite-info-panel .split-panel-header:hover { background: rgba(240,230,210,0.1); } .v2-parties-invite-info-panel .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); } .v2-parties-invite-info-panel .split-panel-header.left-tab-active:after { left: 0; } .v2-parties-invite-info-panel .split-panel-header.right-tab-active:after { left: 50%; } .v2-parties-invite-info-panel .split-panel-header .split-panel-header-title { display: flex; justify-content: center; } .v2-parties-invite-info-panel .split-panel-header .split-panel-header-title .invite-header-suggested-info-icon { height: 15px; width: 15px; margin-left: 5px; background-image: url(/fe/lol-parties/icon-point-eligibility.png); background-size: contain; } .v2-parties-invite-info-panel .split-panel-header-title { direction: ltr; color: #cdbe91; padding: 12px 0; flex-grow: 1; text-align: center; } .v2-parties-invite-info-panel .split-panel-header-title:hover { cursor: pointer; color: #f0e6d2; } .v2-parties-invite-info-panel .split-panel-header-title:active { color: #c8aa6e; } .v2-parties-invite-info-panel .split-panel-header-title.active { color: #cdbe91; } .v2-parties-invite-info-panel .split-panel-header-title.active:active, .v2-parties-invite-info-panel .split-panel-header-title.active:hover { cursor: default; color: #f0e6d2; } .v2-parties-invite-info-panel .split-panel-header-title.disabled { color: #3c3c41; cursor: default; } .v2-parties-invite-info-panel .split-panel-arrow { display: flex; justify-content: flex-end; align-items: center; padding: 0.25em 0.1em; cursor: pointer; transition: color 150ms ease-out; } .v2-parties-invite-info-panel .split-panel-arrow:hover::before { border-top-color: #f0e6d2; } .v2-parties-invite-info-panel .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); } .v2-parties-invite-info-panel .split-panel-arrow.collapsed::before { transform: rotate(90deg); } .v2-parties-invite-info-panel .tft-progression { position: relative; width: 100%; height: 100%; } .invite-header-suggested-tooltip-content { padding: 15px; min-width: 240px; background: #1a1c21; box-shadow: 0 4px 24px rgba(0,0,0,0.75); } .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-title { letter-spacing: 0.05em; } .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-divider-container { width: 100%; text-align: center; } .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-divider-container .invite-header-suggested-tooltip-content-divider { width: 206px; height: 1px; background: #1e2328; margin: 5px 0 5px 0; } .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list { list-style-type: none; display: flex; flex-direction: column; margin: 0; padding: 0; } .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played { display: flex; align-items: center; height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: lighter; } .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors .invite-header-suggested-tooltip-content-description, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends .invite-header-suggested-tooltip-content-description, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played .invite-header-suggested-tooltip-content-description { margin-top: 1px; } .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors .invite-header-suggested-tooltip-content-honors-icon, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends .invite-header-suggested-tooltip-content-honors-icon, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played .invite-header-suggested-tooltip-content-honors-icon, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors .invite-header-suggested-tooltip-content-friend-icon, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends .invite-header-suggested-tooltip-content-friend-icon, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played .invite-header-suggested-tooltip-content-friend-icon, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-honors .invite-header-suggested-tooltip-content-recently-played-icon, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-friends .invite-header-suggested-tooltip-content-recently-played-icon, .invite-header-suggested-tooltip-content .invite-header-suggested-tooltip-content-list .invite-header-suggested-tooltip-content-recently-played .invite-header-suggested-tooltip-content-recently-played-icon { width: 18px; height: 18px; margin: 0 10px 0 0 ; } .v2-parties-invite-info-panel-player:hover .invite-info-name .invite-info-recently-honored-icon, .v2-parties-invite-info-panel-player:hover .invite-info-name .invite-info-recently-played-icon, .v2-parties-invite-info-panel-player:hover .invite-info-name .invite-info-friend-icon { display: none; } .v2-parties-invite-info-panel-player:hover .invite-info-name .invite-info-recently-honored-hover-icon, .v2-parties-invite-info-panel-player:hover .invite-info-name .invite-info-recently-played-hover-icon, .v2-parties-invite-info-panel-player:hover .invite-info-name .invite-info-friend-hover-icon { display: inline-block; width: 18px; height: 18px; margin: 2px 5px 0 0 ; } .v2-parties-invite-info-panel-player .parties-suggested-player { color: #cdbe91; } .v2-parties-invite-info-panel-player .parties-suggested-player .invite-info-name:hover { cursor: pointer; } .v2-parties-invite-info-panel-player .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; margin: auto 0; } .v2-parties-invite-info-panel-player .parties-suggested-player:hover { color: #f0e6d2; cursor: pointer; background-color: rgba(160,155,140,0.3); } .v2-parties-invite-info-panel-player .parties-suggested-player:hover .parties-remove-suggested-player { display: block; margin-top: auto; margin-bottom: auto; } .v2-parties-invite-info-panel-player .parties-suggested-player:hover::before { background-color: #f0e6d2; } .v2-parties-invite-info-panel-player .parties-suggested-player:active { color: #3c3c41; } .v2-parties-invite-info-panel-player .parties-suggested-player:active::before { background-color: #3c3c41; } .v2-parties-invite-info-panel-player .invite-info-name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 0 0 0 10px ; display: flex; justify-content: flex-start; } .v2-parties-invite-info-panel-player .invite-info-name .invite-info-recently-honored-icon, .v2-parties-invite-info-panel-player .invite-info-name .invite-info-recently-played-icon, .v2-parties-invite-info-panel-player .invite-info-name .invite-info-friend-icon { width: 18px; height: 18px; margin: 2px 5px 0 0 ; } .v2-parties-invite-info-panel-player .invite-info-name .invite-info-recently-honored-hover-icon, .v2-parties-invite-info-panel-player .invite-info-name .invite-info-recently-played-hover-icon, .v2-parties-invite-info-panel-player .invite-info-name .invite-info-friend-hover-icon { display: none; } .v2-parties-invite-info-panel-player .invite-info-tag { margin: 1px 0 0 5px; } .v2-parties-invite-info-panel-player .parties-accepted-invite { color: #a09b8c; } .v2-parties-invite-info-panel-player .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; } .v2-parties-invite-info-panel-player .parties-declined-invite { color: #a09b8c; } .v2-parties-invite-info-panel-player .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; } .v2-parties-invite-info-panel-player .parties-declined-invite .invite-info-name { opacity: 0.6; } .v2-parties-invite-info-panel-player .parties-kicked-invite, .v2-parties-invite-info-panel-player .parties-error-invite { color: #a09b8c; } .v2-parties-invite-info-panel-player .parties-kicked-invite:before, .v2-parties-invite-info-panel-player .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; } .v2-parties-invite-info-panel-player .parties-kicked-invite .invite-info-name, .v2-parties-invite-info-panel-player .parties-error-invite .invite-info-name { opacity: 0.6; } .v2-parties-invite-info-panel-player .parties-pending-invite { color: #a09b8c; } .v2-parties-invite-info-panel-player .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 0 0 auto ; } .v2-parties-invite-info-panel-player .parties-remove-suggested-player:hover:not(:disabled) { background-color: #f0e6d2; } .v2-parties-invite-info-panel-player .parties-remove-suggested-player:active:not(:disabled) { background-color: #463714; } .v2-parties-invite-info-panel-player .lol-pending-loader { display: flex; align-items: center; justify-content: space-between; width: 16px; margin: 0 6px 0 8px; box-sizing: border-box; } .v2-parties-invite-info-panel-player .lol-pending-loader-segment { display: inline-block; width: 4px; height: 4px; background-color: #f0e6d2; border-radius: 2px; } .v2-parties-invite-info-panel-player .lol-pending-loader-segment:nth-of-type(1) { animation: bounceLoader 1s -0.2s ease infinite; } .v2-parties-invite-info-panel-player .lol-pending-loader-segment:nth-of-type(2) { animation: bounceLoader 1s -0.1s ease infinite; } .v2-parties-invite-info-panel-player .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); } } .v2-parties-invite-panel-tft-progression .reward-container, .v2-parties-invite-panel-tft-progression .reward-container .reward-label, .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-title { font-family: var(--font-display); } .v2-parties-invite-panel-tft-progression .reward-container .progress-container, .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-body { font-family: var(--font-body); } .v2-parties-invite-panel-tft-progression .reward-container, .v2-parties-invite-panel-tft-progression .reward-container .reward-label, .v2-parties-invite-panel-tft-progression .reward-container .progress-container, .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-title, .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-body { -webkit-user-select: none; } .v2-parties-invite-panel-tft-progression .reward-container, .v2-parties-invite-panel-tft-progression .reward-container .reward-label, .v2-parties-invite-panel-tft-progression .reward-container .progress-container, .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-title, .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-body { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .v2-parties-invite-panel-tft-progression .reward-container, .v2-parties-invite-panel-tft-progression .reward-container .reward-label, .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-title { text-transform: uppercase; } .v2-parties-invite-panel-tft-progression .reward-container:lang(ko-kr), .v2-parties-invite-panel-tft-progression .reward-container .reward-label:lang(ko-kr), .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-title:lang(ko-kr), .v2-parties-invite-panel-tft-progression .reward-container:lang(ja-jp), .v2-parties-invite-panel-tft-progression .reward-container .reward-label:lang(ja-jp), .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-title:lang(ja-jp), .v2-parties-invite-panel-tft-progression .reward-container:lang(tr-tr), .v2-parties-invite-panel-tft-progression .reward-container .reward-label:lang(tr-tr), .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-title:lang(tr-tr), .v2-parties-invite-panel-tft-progression .reward-container:lang(el-gr), .v2-parties-invite-panel-tft-progression .reward-container .reward-label:lang(el-gr), .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-title:lang(el-gr), .v2-parties-invite-panel-tft-progression .reward-container:lang(th-th), .v2-parties-invite-panel-tft-progression .reward-container .reward-label:lang(th-th), .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-title:lang(th-th), .v2-parties-invite-panel-tft-progression .reward-container:lang(zh-tw), .v2-parties-invite-panel-tft-progression .reward-container .reward-label:lang(zh-tw), .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-title:lang(zh-tw) { text-transform: none; } .v2-parties-invite-panel-tft-progression .reward-container .reward-label { text-transform: none; } .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-title:lang(ar-ae) { letter-spacing: 0; } .v2-parties-invite-panel-tft-progression .reward-container, .v2-parties-invite-panel-tft-progression .reward-container .reward-label { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .v2-parties-invite-panel-tft-progression .reward-container:lang(ja-jp), .v2-parties-invite-panel-tft-progression .reward-container .reward-label:lang(ja-jp) { font-size: 13px; } .v2-parties-invite-panel-tft-progression .reward-container:lang(ar-ae), .v2-parties-invite-panel-tft-progression .reward-container .reward-label:lang(ar-ae) { letter-spacing: 0; } .v2-parties-invite-panel-tft-progression .reward-container .reward-label { letter-spacing: 0.0375em; } .v2-parties-invite-panel-tft-progression .reward-container .reward-label:lang(ar-ae) { letter-spacing: 0; } .v2-parties-invite-panel-tft-progression .reward-container .progress-container { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .v2-parties-invite-panel-tft-progression .reward-container .progress-container:lang(ja-jp) { font-size: 13px; } .v2-parties-invite-panel-tft-progression .reward-container .progress-container:lang(ar-ae) { letter-spacing: 0; } .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-body { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-body:lang(ja-jp) { font-size: 13px; } .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-body:lang(ar-ae) { letter-spacing: 0; } .v2-parties-invite-panel-tft-progression { position: relative; width: 100%; height: 100%; display: flex; direction: column; justify-content: center; align-items: center; } .v2-parties-invite-panel-tft-progression .progression-milestone-container { position: relative; display: flex; justify-content: space-between; width: 94%; height: 94%; cursor: pointer; } .v2-parties-invite-panel-tft-progression .progression-milestone:last-of-type { width: 100%; } .v2-parties-invite-panel-tft-progression .reward-container { position: absolute; width: 50%; height: 100%; left: 0; right: 0; display: flex; flex-direction: column; align-items: flex-end; margin: auto; color: #f00; text-align: right; } .v2-parties-invite-panel-tft-progression .reward-container .reward-label { color: #c89b3c; } .v2-parties-invite-panel-tft-progression .reward-container .reward-title { color: #f0e6d2; } .v2-parties-invite-panel-tft-progression .reward-container .progress-container { display: flex; flex-direction: row; color: #5b5a56; padding-top: 2px; } .v2-parties-invite-panel-tft-progression .reward-container .progress-container .progress-current { color: #0acbe6; margin: 2px; } .v2-parties-invite-panel-tft-progression .reward-container .progress-container .progress-divider, .v2-parties-invite-panel-tft-progression .reward-container .progress-container .progress-total { margin: 2px; } .v2-parties-invite-panel-tft-progression .progression-complete { position: relative; width: 100%; height: 100%; background-image: url("/lol-game-data/assets/ASSETS/UX/TFT/OutOfGame/Set7_Act2/Battlepass/UI/misc/progression-pengu.png"); background-size: contain; background-position: center right; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: center; cursor: pointer; } .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-title { width: 50%; padding-bottom: 10px; padding-left: 10px; } .v2-parties-invite-panel-tft-progression .progression-complete .progression-complete-body { width: 50%; padding-bottom: 10px; padding-left: 10px; } .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-title, .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-percentile { font-family: var(--font-display); } .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-title, .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-percentile { -webkit-user-select: none; } .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-title, .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-percentile { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-title, .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-percentile { text-transform: uppercase; } .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-title:lang(ko-kr), .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-percentile:lang(ko-kr), .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-title:lang(ja-jp), .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-percentile:lang(ja-jp), .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-title:lang(tr-tr), .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-percentile:lang(tr-tr), .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-title:lang(el-gr), .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-percentile:lang(el-gr), .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-title:lang(th-th), .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-percentile:lang(th-th), .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-title:lang(zh-tw), .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-percentile:lang(zh-tw) { text-transform: none; } .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-title, .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-percentile { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-title:lang(ar-ae), .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-percentile:lang(ar-ae) { letter-spacing: 0; } .banner-crystal-tooltip-component { padding: 15px 15px 5px; } .banner-crystal-tooltip-component .overall-progress-container { width: 250px; display: flex; margin: 0 10px 5px 5px; } .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-level-image-container { margin-top: 14px; position: relative; width: 48px; height: 48px; flex-shrink: 0; } .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-level-image-container .overall-challenge-level-image { position: absolute; height: 180%; width: 180%; left: -40%; top: -54%; } .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container { width: 100%; display: flex; flex-direction: column; margin-left: 10px; } .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container { display: flex; align-items: center; margin-left: 5px; } .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-title { color: #c8aa6e; } .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-header-separator { width: 5px; height: 1px; background-color: #808080; margin: 0 5px; } .banner-crystal-tooltip-component .overall-progress-container .overall-challenge-details-container .overall-header-container .overall-percentile { color: #a09b8c; } .banner-crystal-tooltip-component .per-category-progress-container { display: flex; margin-top: 8px; } .banner-crystal-tooltip-component .per-category-progress-container .category-progress-radial-container { position: relative; height: 24px; width: 24px; margin: 0 5px; display: flex; align-items: center; justify-content: center; } .banner-crystal-tooltip-component .per-category-progress-container .category-progress-radial-container .category-progress-border { position: absolute; height: 19px; width: 19px; background: linear-gradient(135deg, #1e282c 1.54%, #1e282a 97.96%); transform: rotate(45deg); border: 1px solid rgba(196,196,196,0.4); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon { width: 15px; height: 15px; background-repeat: no-repeat; background-position: center; } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.IMAGINATION { background-image: url("/fe/lol-static-assets/images/challenges-shared/icon_category_imagination.svg"); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.COLLECTION { background-image: url("/fe/lol-static-assets/images/challenges-shared/icon_category_collection.svg"); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.TEAMWORK { background-image: url("/fe/lol-static-assets/images/challenges-shared/icon_category_teamwork.svg"); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.EXPERTISE { background-image: url("/fe/lol-static-assets/images/challenges-shared/icon_category_expertise.svg"); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.VETERANCY { background-image: url("/fe/lol-static-assets/images/challenges-shared/icon_category_veterancy.svg"); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.color-NONE { filter: brightness(0) saturate(100%) invert(89%) sepia(0%) saturate(1%) hue-rotate(180deg) brightness(92%) contrast(84%); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.color-IRON { filter: brightness(0) saturate(100%) invert(89%) sepia(0%) saturate(1%) hue-rotate(180deg) brightness(92%) contrast(84%); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.color-BRONZE { filter: brightness(0) saturate(100%) invert(44%) sepia(13%) saturate(1684%) hue-rotate(330deg) brightness(97%) contrast(83%); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.color-SILVER { filter: brightness(0) saturate(100%) invert(77%) sepia(7%) saturate(834%) hue-rotate(140deg) brightness(94%) contrast(83%); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.color-GOLD { filter: brightness(0) saturate(100%) invert(69%) sepia(57%) saturate(253%) hue-rotate(359deg) brightness(87%) contrast(86%); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.color-PLATINUM { filter: brightness(0) saturate(100%) invert(60%) sepia(31%) saturate(488%) hue-rotate(126deg) brightness(101%) contrast(88%); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.color-DIAMOND { filter: brightness(0) saturate(100%) invert(49%) sepia(91%) saturate(284%) hue-rotate(207deg) brightness(110%) contrast(89%); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.color-MASTER { filter: brightness(0) saturate(100%) invert(64%) sepia(78%) saturate(3345%) hue-rotate(241deg) brightness(103%) contrast(99%); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.color-GRANDMASTER { filter: brightness(0) saturate(100%) invert(38%) sepia(61%) saturate(2581%) hue-rotate(325deg) brightness(96%) contrast(90%); } .banner-crystal-tooltip-component .per-category-progress-container .category-icon.color-CHALLENGER { filter: brightness(0) saturate(100%) invert(90%) sepia(39%) saturate(593%) hue-rotate(311deg) brightness(105%) contrast(103%); } .v2-banner-placeholder { position: relative; transition: transform 0.5s cubic-bezier(0.2, 0.9, 0, 1), opacity 0.4s ease-out; width: 196px; height: 592px; margin: 0 4px; } .v2-banner-placeholder .invite-button-container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .v2-banner-placeholder .invite-button-container .invite-button { width: 80px; height: 80px; } .v2-banner-placeholder .placeholder-invited-container { position: absolute; width: 100%; height: 100%; } .v2-banner-placeholder .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%; } .v2-banner-placeholder .placeholder-invited-container .placeholder-invited-video { width: 100%; height: 100%; opacity: 0; animation: 0.5s ease-in-out parties-invited-banner-fadein 0.2s 1 normal forwards; } .v2-banner-placeholder:nth-of-type(1) { order: 30; } .v2-banner-placeholder:nth-of-type(2) { order: 20; } .v2-banner-placeholder:nth-of-type(3) { order: 40; } .v2-banner-placeholder:nth-of-type(4) { order: 10; } .v2-banner-placeholder:nth-of-type(5) { order: 50; } @-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; } } .identity-tooltip-component { display: flex; flex-direction: column; background: linear-gradient(180deg, #1a1c21 0%, #090c14 100%); } .identity-tooltip-component .identity-tooltip-divider { height: 1px; width: 85%; background: #1e2328; align-self: center; } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank, .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank span { font-family: var(--font-display); } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-past-rank { font-family: var(--font-body); } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank, .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank span, .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-past-rank { -webkit-user-select: none; } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank, .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank span, .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-past-rank { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank, .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank span { text-transform: uppercase; } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank:lang(ko-kr), .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank span:lang(ko-kr), .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank:lang(ja-jp), .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank span:lang(ja-jp), .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank:lang(tr-tr), .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank span:lang(tr-tr), .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank:lang(el-gr), .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank span:lang(el-gr), .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank:lang(th-th), .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank span:lang(th-th), .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank:lang(zh-tw), .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank span:lang(zh-tw) { text-transform: none; } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank, .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank span { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank:lang(ar-ae), .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank span:lang(ar-ae) { letter-spacing: 0; } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-past-rank { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-past-rank:lang(ja-jp) { font-size: 13px; } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-past-rank:lang(ar-ae) { letter-spacing: 0; } .rank-identity-tooltip-component { display: flex; min-width: 150px; height: 74px; flex-direction: row; align-items: center; } .rank-identity-tooltip-component .rank-identity-tooltip-rank-icon { position: relative; width: 74px; height: 74px; margin-left: 6px; } .rank-identity-tooltip-component .rank-identity-tooltip-details { display: flex; flex-direction: column; margin-left: 4px; white-space: nowrap; margin-right: 12px; } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank { color: #c8aa6e; line-height: 24px; } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-rank span { color: #a09b8c; } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-past-rank { display: flex; align-items: center; } .rank-identity-tooltip-component .rank-identity-tooltip-details .rank-identity-tooltip-past-rank .rank-identity-tooltip-past-rank-icon { width: 22px; height: 22px; margin-right: 5px; } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-name { font-family: var(--font-display); } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-desc { font-family: var(--font-body); } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-name, .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-desc { -webkit-user-select: none; } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-name, .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-desc { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-name { text-transform: uppercase; } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-name:lang(ko-kr), .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-name:lang(ja-jp), .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-name:lang(tr-tr), .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-name:lang(el-gr), .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-name:lang(th-th), .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-name:lang(zh-tw) { text-transform: none; } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-name:lang(ar-ae) { letter-spacing: 0; } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-desc { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-desc:lang(ja-jp) { font-size: 13px; } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-desc:lang(ar-ae) { letter-spacing: 0; } .icon-identity-tooltip-component { display: flex; min-width: 300px; height: 74px; flex-direction: row; align-items: center; } .icon-identity-tooltip-component .icon-identity-tooltip-icon { display: flex; flex-shrink: 0; position: relative; width: 50px; height: 50px; margin-left: 18px; } .icon-identity-tooltip-component .icon-identity-tooltip-details { display: flex; flex-direction: column; margin-left: 16px; margin-right: 16px; } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-name { color: #c8aa6e; line-height: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-desc { display: flex; align-items: center; margin-top: 8px; } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-desc .icon-identity-tooltip-rarity-icon { width: 12px; height: 12px; margin-right: 5px; } .icon-identity-tooltip-component .icon-identity-tooltip-details .icon-identity-tooltip-desc .icon-identity-tooltip-rarity-desc { line-height: normal; } .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-level { font-family: var(--font-display); } .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-desc { font-family: var(--font-body); } .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-level, .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-desc { -webkit-user-select: none; } .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-level, .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-desc { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-level { text-transform: uppercase; } .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-level:lang(ko-kr), .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-level:lang(ja-jp), .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-level:lang(tr-tr), .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-level:lang(el-gr), .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-level:lang(th-th), .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-level:lang(zh-tw) { text-transform: none; } .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-level { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-level:lang(ar-ae) { letter-spacing: 0; } .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-desc { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-desc:lang(ja-jp) { font-size: 13px; } .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-desc:lang(ar-ae) { letter-spacing: 0; } .prestige-identity-tooltip-component { display: flex; min-width: 150px; height: 74px; flex-direction: row; align-items: center; } .prestige-identity-tooltip-component .level-ring-wrapper { position: relative; width: 50px; height: 50px; margin-left: 18px; } .prestige-identity-tooltip-component .prestige-identity-tooltip-icon { position: absolute; width: 88px; height: 88px; top: -17px; left: -20px; } .prestige-identity-tooltip-component .prestige-identity-tooltip-details { display: flex; flex-direction: column; margin-left: 16px; margin-right: 16px; white-space: nowrap; } .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-level { color: #c8aa6e; line-height: 24px; } .prestige-identity-tooltip-component .prestige-identity-tooltip-details .prestige-identity-tooltip-desc { color: #5b5a56; } .generic-button.match-w, .generic-button.match-w .generic-button-root, .generic-button.match-w .generic-button-state, .generic-button.match-w img { width: 100%; } .generic-button.match-h, .generic-button.match-h .generic-button-root, .generic-button.match-h .generic-button-state, .generic-button.match-h img { height: 100%; } .generic-button.flip-x .generic-button-root .generic-button-state .generic-button-primary-img-container { transform: scaleX(-1); } .generic-button.flip-y .generic-button-root .generic-button-state .generic-button-primary-img-container { transform: scaleY(-1); } .generic-button .generic-button-root { pointer-events: auto; cursor: pointer; } .generic-button .generic-button-root .generic-button-state { position: relative; display: flex; align-items: center; justify-content: center; } .generic-button .generic-button-root .generic-button-state:not(.active) { display: none; } .generic-button .generic-button-root .generic-button-state .generic-button-primary-img-container { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } .generic-button .generic-button-root .generic-button-state .generic-button-primary-img-container.has-bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .generic-button .generic-button-root .generic-button-state .generic-button-text { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } .generic-button .generic-button-root .generic-button-state .generic-button-custom-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } .generic-button .generic-button-root .disabled { cursor: auto; } .find-match-button-wrapper { height: 100%; width: 100%; cursor: pointer; } .find-match-button-wrapper .find-match-button { position: relative; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } .find-match-button-wrapper .find-match-button .button-text { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: #fff; } .find-match-button-wrapper .find-match-button .button-text.disabled { color: #808080; } .find-match-button-wrapper .find-match-button .button-text.down { color: #005a82; } .find-match-button-wrapper .find-match-button .find-match-button-video { position: absolute; height: 100%; width: 100%; top: -27px; left: -21px; right: 0; bottom: 0; } .find-match-button-wrapper .find-match-button .find-match-state { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .find-match-button-wrapper .find-match-button .find-match-state .img-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .find-match-button-wrapper .find-match-button .find-match-state.disabled { cursor: auto; } .rcp-fe-lol-parties-reward-celebration .reward-description { font-family: var(--font-display); } .rcp-fe-lol-parties-reward-celebration .reward { font-family: var(--font-body); } .rcp-fe-lol-parties-reward-celebration .reward, .rcp-fe-lol-parties-reward-celebration .reward-description { -webkit-user-select: none; } .rcp-fe-lol-parties-reward-celebration .reward, .rcp-fe-lol-parties-reward-celebration .reward-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-parties-reward-celebration .reward-description { text-transform: uppercase; } .rcp-fe-lol-parties-reward-celebration .reward-description:lang(ko-kr), .rcp-fe-lol-parties-reward-celebration .reward-description:lang(ja-jp), .rcp-fe-lol-parties-reward-celebration .reward-description:lang(tr-tr), .rcp-fe-lol-parties-reward-celebration .reward-description:lang(el-gr), .rcp-fe-lol-parties-reward-celebration .reward-description:lang(th-th), .rcp-fe-lol-parties-reward-celebration .reward-description:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-parties-reward-celebration .reward-description { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .rcp-fe-lol-parties-reward-celebration .reward-description:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-parties-reward-celebration .reward { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-parties-reward-celebration .reward:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-parties-reward-celebration .reward:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-parties-reward-celebration { cursor: default; box-sizing: border-box; } .rcp-fe-lol-parties-reward-celebration * { box-sizing: border-box; } .rcp-fe-lol-parties-reward-celebration .rewards-container { display: flex; flex-direction: row; justify-content: center; align-items: center; top: 0; left: 0; position: absolute; width: 100%; height: 100%; } .rcp-fe-lol-parties-reward-celebration .reward { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; flex-basis: 100%; min-width: 300px; max-width: 300px; height: 330px; position: relative; margin: 0 8px; } .rcp-fe-lol-parties-reward-celebration .reward-icon { position: absolute; width: 256px; height: 256px; top: 10px; left: 22px; display: flex; align-items: center; justify-content: center; } .rcp-fe-lol-parties-reward-celebration .reward-icon img { max-width: 100%; max-height: none; } .rcp-fe-lol-parties-reward-celebration .reward-icon.MISSION_PROGRESS img, .rcp-fe-lol-parties-reward-celebration .reward-icon.SUMMONER_ICON img { max-width: 148px; border: 2px solid #c89b3c; box-shadow: 0px 0px 1px 2px rgba(1,10,19,0.4); border-image: linear-gradient(to bottom, #c29739, #503c23) 2; } .rcp-fe-lol-parties-reward-celebration .reward-description-wrapper { position: absolute; width: 100%; bottom: 15px; height: 56px; display: flex; align-items: center; justify-content: center; } .rcp-fe-lol-parties-reward-celebration .reward-description { text-align: center; word-break: break-word; font-size: 14px; padding: 0; } .rcp-fe-lol-parties-reward-celebration .reward.selectable { cursor: pointer; } .rcp-fe-lol-parties-reward-celebration .reward.selectable .brightener-bg { -webkit-filter: opacity(0); transition: -webkit-filter 0.15s; position: absolute; top: 0px; left: 0; right: 0; bottom: 0px; background: linear-gradient(transparent, rgba(255,255,255,0.1)); } .rcp-fe-lol-parties-reward-celebration .reward.selectable .radial-glow { height: 120px; width: 100%; bottom: -2px; background-position: bottom center; background-image: '../../../images/lobby/tft/reward-hover-highlight.png'; background-repeat: no-repeat; background-position: center; background-size: contain; transition: -webkit-filter 0.15s ease-in; position: absolute; -webkit-filter: opacity(0); z-index: 1; pointer-events: none; } .rcp-fe-lol-parties-reward-celebration .reward.selectable:not(.selected):hover .brightener-bg { -webkit-filter: opacity(1); } .rcp-fe-lol-parties-reward-celebration .reward.selectable:not(.selected):hover .radial-glow { -webkit-filter: opacity(0.5); } .rcp-fe-lol-parties-reward-celebration .reward.selectable.selected .brightener-bg { -webkit-filter: opacity(1); background: radial-gradient(rgba(255,255,255,0.4), transparent 60%); } .rcp-fe-lol-parties-reward-celebration .reward.selectable.selected .radial-glow { -webkit-filter: opacity(0.5); } .rcp-fe-lol-parties-reward-celebration .reward.selectable.selection-made:not(.selected):not(:hover) { -webkit-filter: opacity(0.5); } .rcp-fe-lol-parties-reward-celebration .reward.selectable.selection-made:not(.selected):not(:hover) .reward-icon { -webkit-filter: saturate(0.5); } .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners, .leaver-buster-lockout-modal .lockout-timer-label.subhead, .leaver-buster-lockout-modal .lockout-player-punishment-timer { font-family: var(--font-display); } .leaver-buster-lockout-modal .lockout-player-name { font-family: var(--font-body); } .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners, .leaver-buster-lockout-modal .lockout-timer-label.subhead, .leaver-buster-lockout-modal .lockout-player-name, .leaver-buster-lockout-modal .lockout-player-punishment-timer { -webkit-user-select: none; } .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners, .leaver-buster-lockout-modal .lockout-timer-label.subhead, .leaver-buster-lockout-modal .lockout-player-name, .leaver-buster-lockout-modal .lockout-player-punishment-timer { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners, .leaver-buster-lockout-modal .lockout-timer-label.subhead, .leaver-buster-lockout-modal .lockout-player-punishment-timer { text-transform: uppercase; } .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners:lang(ko-kr), .leaver-buster-lockout-modal .lockout-timer-label.subhead:lang(ko-kr), .leaver-buster-lockout-modal .lockout-player-punishment-timer:lang(ko-kr), .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners:lang(ja-jp), .leaver-buster-lockout-modal .lockout-timer-label.subhead:lang(ja-jp), .leaver-buster-lockout-modal .lockout-player-punishment-timer:lang(ja-jp), .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners:lang(tr-tr), .leaver-buster-lockout-modal .lockout-timer-label.subhead:lang(tr-tr), .leaver-buster-lockout-modal .lockout-player-punishment-timer:lang(tr-tr), .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners:lang(el-gr), .leaver-buster-lockout-modal .lockout-timer-label.subhead:lang(el-gr), .leaver-buster-lockout-modal .lockout-player-punishment-timer:lang(el-gr), .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners:lang(th-th), .leaver-buster-lockout-modal .lockout-timer-label.subhead:lang(th-th), .leaver-buster-lockout-modal .lockout-player-punishment-timer:lang(th-th), .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners:lang(zh-tw), .leaver-buster-lockout-modal .lockout-timer-label.subhead:lang(zh-tw), .leaver-buster-lockout-modal .lockout-player-punishment-timer:lang(zh-tw) { text-transform: none; } .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners { text-transform: none; } .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners, .leaver-buster-lockout-modal .lockout-timer-label.subhead { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners:lang(ar-ae), .leaver-buster-lockout-modal .lockout-timer-label.subhead:lang(ar-ae) { letter-spacing: 0; } .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners { letter-spacing: 0.0375em; } .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners:lang(ar-ae) { letter-spacing: 0; } .leaver-buster-lockout-modal .lockout-player-name { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .leaver-buster-lockout-modal .lockout-player-name:lang(ja-jp) { font-size: 13px; } .leaver-buster-lockout-modal .lockout-player-name:lang(ar-ae) { letter-spacing: 0; } .leaver-buster-lockout-modal .lockout-player-punishment-timer { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: #cdbe91; -webkit-font-smoothing: subpixel-antialiased; } .leaver-buster-lockout-modal .lockout-player-punishment-timer.active { position: relative; color: #f0e6d2; } .leaver-buster-lockout-modal .lockout-player-punishment-timer:lang(ja-jp) { font-size: 13px; } .leaver-buster-lockout-modal .lockout-player-punishment-timer:lang(zh-tw) { font-size: 14px; } .leaver-buster-lockout-modal .lockout-player-punishment-timer:lang(ar-ae) { letter-spacing: 0; } .leaver-buster-lockout-modal .lockout-error-body { margin-left: 35px; margin-right: 35px; } .leaver-buster-lockout-modal .lockout-error-body .parties-queue-dodge-summoners { margin-bottom: 0; } .leaver-buster-lockout-modal .lockout-player-table { display: flex; flex-direction: column; } .leaver-buster-lockout-modal .lockout-player-row { display: flex; justify-content: center; margin: 3px; } .leaver-buster-lockout-modal .lockout-player-name { text-align: left; width: 124px; margin-right: 5px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .leaver-buster-lockout-modal .lockout-player-punishment-timer { width: 85px; text-align: right; margin-left: 5px; } .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: ltr; 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 10px 0 0 ; padding: 0 5px; } .parties-invite-dialog .search-box-container .search-box-input::-webkit-input-placeholder { padding: 0 0 0 5px ; } .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: bottom ; } .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(0deg) ; margin: 6px 10px; } .invite-dialog-group .invite-dialog-friend { height: 0; opacity: 0; cursor: pointer; display: flex; align-items: center; padding: 0 0 0 1rem ; 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: ltr; 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 { flex-shrink: 0; 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; } .social-leaderboard-container { width: 550px; height: 400px; } .social-leaderboard-container .social-leaderboard-loading-animation-container { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .social-leaderboard-header-container .social-leaderboard-header-text-container .social-leaderboard-header-text, .social-leaderboard-header-container .social-leaderboard-queue-container .social-leaderboard-queue-visual { font-family: var(--font-display); } .social-leaderboard-header-container .social-leaderboard-header-text-container .social-leaderboard-header-text, .social-leaderboard-header-container .social-leaderboard-queue-container .social-leaderboard-queue-visual { -webkit-user-select: none; } .social-leaderboard-header-container .social-leaderboard-header-text-container .social-leaderboard-header-text, .social-leaderboard-header-container .social-leaderboard-queue-container .social-leaderboard-queue-visual { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .social-leaderboard-header-container .social-leaderboard-header-text-container .social-leaderboard-header-text, .social-leaderboard-header-container .social-leaderboard-queue-container .social-leaderboard-queue-visual { text-transform: uppercase; } .social-leaderboard-header-container .social-leaderboard-header-text-container .social-leaderboard-header-text:lang(ko-kr), .social-leaderboard-header-container .social-leaderboard-queue-container .social-leaderboard-queue-visual:lang(ko-kr), .social-leaderboard-header-container .social-leaderboard-header-text-container .social-leaderboard-header-text:lang(ja-jp), .social-leaderboard-header-container .social-leaderboard-queue-container .social-leaderboard-queue-visual:lang(ja-jp), .social-leaderboard-header-container .social-leaderboard-header-text-container .social-leaderboard-header-text:lang(tr-tr), .social-leaderboard-header-container .social-leaderboard-queue-container .social-leaderboard-queue-visual:lang(tr-tr), .social-leaderboard-header-container .social-leaderboard-header-text-container .social-leaderboard-header-text:lang(el-gr), .social-leaderboard-header-container .social-leaderboard-queue-container .social-leaderboard-queue-visual:lang(el-gr), .social-leaderboard-header-container .social-leaderboard-header-text-container .social-leaderboard-header-text:lang(th-th), .social-leaderboard-header-container .social-leaderboard-queue-container .social-leaderboard-queue-visual:lang(th-th), .social-leaderboard-header-container .social-leaderboard-header-text-container .social-leaderboard-header-text:lang(zh-tw), .social-leaderboard-header-container .social-leaderboard-queue-container .social-leaderboard-queue-visual:lang(zh-tw) { text-transform: none; } .social-leaderboard-header-container .social-leaderboard-header-text-container .social-leaderboard-header-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .social-leaderboard-header-container .social-leaderboard-header-text-container .social-leaderboard-header-text:lang(ar-ae) { letter-spacing: 0; } .social-leaderboard-header-container .social-leaderboard-queue-container .social-leaderboard-queue-visual { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .social-leaderboard-header-container .social-leaderboard-queue-container .social-leaderboard-queue-visual:lang(ja-jp) { font-size: 13px; } .social-leaderboard-header-container .social-leaderboard-queue-container .social-leaderboard-queue-visual:lang(ar-ae) { letter-spacing: 0; } .social-leaderboard-header-container { height: 34px; width: 530px; display: flex; padding: 10px 10px 0 10px; } .social-leaderboard-header-container .social-leaderboard-header-icon { width: 34px; height: 34px; margin-left: 5px; background: url(/fe/lol-parties/button-icon.svg) no-repeat; background-size: 34px 34px; flex: 0 0 auto; } .social-leaderboard-header-container .social-leaderboard-header-text-container { margin-left: 10px; width: 100%; color: #f0e6d2; } .social-leaderboard-header-container .social-leaderboard-queue-container { display: flex; flex-direction: column; justify-content: center; margin-right: 2px; } .social-leaderboard-header-container .social-leaderboard-queue-container .social-leaderboard-queue-visual { background: #a09b8c; color: #000; border-radius: 3px; padding: 0 2px; height: 16px; text-align: center; white-space: nowrap; } .countdown-timer-component { font-family: var(--font-body); } .countdown-timer-component { -webkit-user-select: none; } .countdown-timer-component { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .countdown-timer-component { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .countdown-timer-component:lang(ja-jp) { font-size: 13px; } .countdown-timer-component:lang(ar-ae) { letter-spacing: 0; } .countdown-timer-component { display: flex; color: #a09b8c; } .countdown-timer-component .countdown-time-left { margin-left: 5px; color: #c8aa6e; } .social-leaderboard-table-container .social-leaderboard-table .social-leaderboard-table-header { font-family: var(--font-display); } .social-leaderboard-table-container .social-leaderboard-table .social-leaderboard-table-header { -webkit-user-select: none; } .social-leaderboard-table-container .social-leaderboard-table .social-leaderboard-table-header { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .social-leaderboard-table-container .social-leaderboard-table .social-leaderboard-table-header { text-transform: uppercase; } .social-leaderboard-table-container .social-leaderboard-table .social-leaderboard-table-header:lang(ko-kr), .social-leaderboard-table-container .social-leaderboard-table .social-leaderboard-table-header:lang(ja-jp), .social-leaderboard-table-container .social-leaderboard-table .social-leaderboard-table-header:lang(tr-tr), .social-leaderboard-table-container .social-leaderboard-table .social-leaderboard-table-header:lang(el-gr), .social-leaderboard-table-container .social-leaderboard-table .social-leaderboard-table-header:lang(th-th), .social-leaderboard-table-container .social-leaderboard-table .social-leaderboard-table-header:lang(zh-tw) { text-transform: none; } .social-leaderboard-table-container .social-leaderboard-table .social-leaderboard-table-header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .social-leaderboard-table-container .social-leaderboard-table .social-leaderboard-table-header:lang(ja-jp) { font-size: 13px; } .social-leaderboard-table-container .social-leaderboard-table .social-leaderboard-table-header:lang(ar-ae) { letter-spacing: 0; } .social-leaderboard-table-container { height: 100%; width: 100%; margin-top: 10px; } .social-leaderboard-table-container .social-leaderboard-table { height: 304px; width: 100%; } .social-leaderboard-table-container .social-leaderboard-table th { text-align: left; } .social-leaderboard-table-container .social-leaderboard-table td { vertical-align: middle; } .social-leaderboard-table-container .social-leaderboard-table td:nth-child(1), .social-leaderboard-table-container .social-leaderboard-table th:nth-child(1) { width: 40px; text-align: center; } .social-leaderboard-table-container .social-leaderboard-table td:nth-child(2), .social-leaderboard-table-container .social-leaderboard-table th:nth-child(2) { width: 166px; } .social-leaderboard-table-container .social-leaderboard-table td:nth-child(3), .social-leaderboard-table-container .social-leaderboard-table th:nth-child(3) { width: 224px; } .social-leaderboard-table-container .social-leaderboard-table td:nth-child(4), .social-leaderboard-table-container .social-leaderboard-table th:nth-child(4) { width: 90px; text-align: center; } .social-leaderboard-table-container .social-leaderboard-table th:nth-child(1) { padding-left: 2px; } .social-leaderboard-table-container .social-leaderboard-table th:nth-child(4), .social-leaderboard-table-container .social-leaderboard-table th:nth-child(2) { padding-left: 4px; } .social-leaderboard-table-container .social-leaderboard-table .social-leaderboard-table-header { display: flex; } .social-leaderboard-table-container .social-leaderboard-table-body { height: 284px; } .social-leaderboard-row { font-family: var(--font-body); } .social-leaderboard-row { -webkit-user-select: none; } .social-leaderboard-row { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .social-leaderboard-row { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .social-leaderboard-row:lang(ja-jp) { font-size: 13px; } .social-leaderboard-row:lang(ar-ae) { letter-spacing: 0; } .social-leaderboard-row { color: #a09b8c; } .social-leaderboard-row:hover { color: #f0e6d2; } .social-leaderboard-row .social-leaderboard-table-row { height: 26px; } .social-leaderboard-row .social-leaderboard-table-row .social-leaderboard-cell { align-items: center; display: flex; flex-wrap: nowrap; height: 100%; } .social-leaderboard-row .social-leaderboard-table-row .social-leaderboard-cell .social-leaderboard-rank-image { padding: 0 6px 2px 0; width: 22px; height: 22px; } .social-leaderboard-row .social-leaderboard-table-row .social-leaderboard-cell .social-leaderboard-rank-image.social-leaderboard-unranked { width: 18px; height: 18px; margin: 1px 4px 1px 2px; } .social-leaderboard-row .social-leaderboard-table-row .social-leaderboard-cell .social-leaderboard-avatar { margin-right: 12px; } .social-leaderboard-row.is-player-row { position: sticky; bottom: 0px; top: 0px; background-image: linear-gradient(to right, rgba(55,144,212,0.3) 0%, rgba(10,150,170,0.1) 100%); background-color: #010a13; background-position: top left; background-repeat: no-repeat; color: #fabe0a; cursor: pointer; z-index: 1; } .social-leaderboard-filter-input { margin: 10px 10px 0 10px; } .social-leaderboard-friend-not-found-container .social-leaderboard-friend-not-found-text { font-family: var(--font-display); } .social-leaderboard-friend-not-found-container .social-leaderboard-friend-not-found-text { -webkit-user-select: none; } .social-leaderboard-friend-not-found-container .social-leaderboard-friend-not-found-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .social-leaderboard-friend-not-found-container .social-leaderboard-friend-not-found-text { text-transform: uppercase; } .social-leaderboard-friend-not-found-container .social-leaderboard-friend-not-found-text:lang(ko-kr), .social-leaderboard-friend-not-found-container .social-leaderboard-friend-not-found-text:lang(ja-jp), .social-leaderboard-friend-not-found-container .social-leaderboard-friend-not-found-text:lang(tr-tr), .social-leaderboard-friend-not-found-container .social-leaderboard-friend-not-found-text:lang(el-gr), .social-leaderboard-friend-not-found-container .social-leaderboard-friend-not-found-text:lang(th-th), .social-leaderboard-friend-not-found-container .social-leaderboard-friend-not-found-text:lang(zh-tw) { text-transform: none; } .social-leaderboard-friend-not-found-container .social-leaderboard-friend-not-found-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .social-leaderboard-friend-not-found-container .social-leaderboard-friend-not-found-text:lang(ar-ae) { letter-spacing: 0; } .social-leaderboard-friend-not-found-container { width: 100%; height: 300px; display: flex; flex-direction: column; } .social-leaderboard-friend-not-found-container .friend-not-found-image { background: url(/fe/lol-parties/poro-question.png) no-repeat center; width: 120px; height: 120px; background-size: 120px 120px; margin: 60px auto 0; } .social-leaderboard-friend-not-found-container .social-leaderboard-friend-not-found-text { text-align: center; width: 300px; color: #f0e6d2; margin: 20px auto 0; } .social-leaderboard-not-enough-friends-container .social-leaderboard-add-friends-text { font-family: var(--font-display); } .social-leaderboard-not-enough-friends-container .social-leaderboard-add-friends-text { -webkit-user-select: none; } .social-leaderboard-not-enough-friends-container .social-leaderboard-add-friends-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .social-leaderboard-not-enough-friends-container .social-leaderboard-add-friends-text { text-transform: uppercase; } .social-leaderboard-not-enough-friends-container .social-leaderboard-add-friends-text:lang(ko-kr), .social-leaderboard-not-enough-friends-container .social-leaderboard-add-friends-text:lang(ja-jp), .social-leaderboard-not-enough-friends-container .social-leaderboard-add-friends-text:lang(tr-tr), .social-leaderboard-not-enough-friends-container .social-leaderboard-add-friends-text:lang(el-gr), .social-leaderboard-not-enough-friends-container .social-leaderboard-add-friends-text:lang(th-th), .social-leaderboard-not-enough-friends-container .social-leaderboard-add-friends-text:lang(zh-tw) { text-transform: none; } .social-leaderboard-not-enough-friends-container .social-leaderboard-add-friends-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .social-leaderboard-not-enough-friends-container .social-leaderboard-add-friends-text:lang(ar-ae) { letter-spacing: 0; } .social-leaderboard-not-enough-friends-container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; } .social-leaderboard-not-enough-friends-container .not-enough-friends-image { background: url(/fe/lol-parties/poro_sad.png) no-repeat center; width: 120px; height: 120px; background-size: 120px 120px; margin: 90px auto 0; } .social-leaderboard-not-enough-friends-container .social-leaderboard-add-friends-text { text-align: center; width: 300px; color: #f0e6d2; margin: 15px auto 0; } .social-leaderboard-not-enough-friends-container .social-leaderboard-add-friend-button { margin: 20px auto 0; } .social-leaderboard-not-enough-friends-container lol-uikit-flat-button { width: 190px; } .social-leaderboard-error-state-container .social-leaderboard-error-state-text { font-family: var(--font-display); } .social-leaderboard-error-state-container .social-leaderboard-error-state-text { -webkit-user-select: none; } .social-leaderboard-error-state-container .social-leaderboard-error-state-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .social-leaderboard-error-state-container .social-leaderboard-error-state-text { text-transform: uppercase; } .social-leaderboard-error-state-container .social-leaderboard-error-state-text:lang(ko-kr), .social-leaderboard-error-state-container .social-leaderboard-error-state-text:lang(ja-jp), .social-leaderboard-error-state-container .social-leaderboard-error-state-text:lang(tr-tr), .social-leaderboard-error-state-container .social-leaderboard-error-state-text:lang(el-gr), .social-leaderboard-error-state-container .social-leaderboard-error-state-text:lang(th-th), .social-leaderboard-error-state-container .social-leaderboard-error-state-text:lang(zh-tw) { text-transform: none; } .social-leaderboard-error-state-container .social-leaderboard-error-state-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .social-leaderboard-error-state-container .social-leaderboard-error-state-text:lang(ar-ae) { letter-spacing: 0; } .social-leaderboard-error-state-container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; } .social-leaderboard-error-state-container .error-state-image { background: url(/fe/lol-parties/poro_shocked.png) no-repeat center; width: 120px; height: 120px; background-size: 120px 120px; margin: 100px auto 0; } .social-leaderboard-error-state-container .social-leaderboard-error-state-text { text-align: center; width: 400px; color: #f0e6d2; margin: 15px auto 0; }