.style-profile-overview-component { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: default; -webkit-user-select: none; overflow: hidden; } .style-profile-overview-component .style-profile-overview-content { position: absolute; top: 0; left: 35px; right: 35px; bottom: 0; display: flex; flex-direction: row; overflow: visible; opacity: 0; transition: opacity 0.5s ease; } .style-profile-overview-component .style-profile-emblems-container { position: relative; width: 100%; height: 240px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-self: flex-end; margin-left: 10px; } .style-profile-overview-component .style-profile-emblem-slot { position: relative; width: 144px; height: 100%; } .style-profile-overview-component.loaded .style-profile-overview-content { opacity: 1; pointer-events: initial; } .style-profile-overview-component.loading .style-profile-overview-content { pointer-events: none; } .style-profile-overview-component .style-profile-loading-spinner { visibility: hidden; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: transparent url(/fe/lol-profiles/spinner.png) no-repeat 50% 50%; background-size: contain; } .style-profile-overview-component.loading .style-profile-loading-spinner { animation: profile-fadein 250ms forwards, profile-spin 4000ms infinite linear; } .style-profile-overview-component.loaded .style-profile-loading-spinner { animation: profile-fadeout 250ms forwards, profile-spin 4000ms infinite linear; } @-moz-keyframes profile-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes profile-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes profile-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes profile-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes profile-fadeout { 0% { visibility: visible; opacity: 1; } 99% { visibility: visible; opacity: 0; } 100% { visibility: hidden; opacity: 0; } } @-webkit-keyframes profile-fadeout { 0% { visibility: visible; opacity: 1; } 99% { visibility: visible; opacity: 0; } 100% { visibility: hidden; opacity: 0; } } @-o-keyframes profile-fadeout { 0% { visibility: visible; opacity: 1; } 99% { visibility: visible; opacity: 0; } 100% { visibility: hidden; opacity: 0; } } @keyframes profile-fadeout { 0% { visibility: visible; opacity: 1; } 99% { visibility: visible; opacity: 0; } 100% { visibility: hidden; opacity: 0; } } @-moz-keyframes profile-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @-webkit-keyframes profile-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @-o-keyframes profile-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @keyframes profile-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } .rcp-fe-lol-profiles-main { position: relative; cursor: default; width: 100%; height: 100%; } .rcp-fe-lol-profiles-modal { position: relative; cursor: default; width: 100%; height: 100%; } .style-profile-sub-nav { top: 79px; left: 35px; position: absolute; border: 0; margin: 0; padding: 0; -webkit-user-select: none; } .style-profile-sub-nav lol-uikit-navigation-item { margin-top: 9px; } div.rcp-fe-lol-profiles-modal .style-profile-sub-nav { top: 0; left: 290px; } /** * pointer-events are disabled by default for all children of lol-regalia-profile-element. * You must enable them explicitly for any child component wanting to enable mouse * events, such as hover detection to show a tooltip, etc. */ .style-profile-summoner-info-component { position: relative; height: 100%; width: 220px; flex-shrink: 0; } .style-profile-summoner-info-component.rank-identity-override { width: 194px; } .style-profile-summoner-info-component.rank-identity-override lol-regalia-profile-v2-element { display: flex; width: 100%; height: 100%; } .style-profile-summoner-info-component .style-profile-summoner-xp-bar { position: absolute; display: flex; flex-direction: row; justify-content: center; width: 100%; top: 204px; } .style-profile-summoner-info-component .style-profile-summoner-status-icons { position: absolute; bottom: 50px; width: 100%; display: flex; flex-direction: row; justify-content: center; pointer-events: auto; } div.rcp-fe-lol-profiles-modal .style-profile-summoner-info-component { top: -79px; } .style-profile-summoner-namings-component .style-profile-summoner-name { font-family: var(--font-display); } .style-profile-summoner-namings-component .style-profile-summoner-name { -webkit-user-select: none; } .style-profile-summoner-namings-component .style-profile-summoner-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-summoner-namings-component .style-profile-summoner-name { text-transform: uppercase; } .style-profile-summoner-namings-component .style-profile-summoner-name:lang(ko-kr), .style-profile-summoner-namings-component .style-profile-summoner-name:lang(ja-jp), .style-profile-summoner-namings-component .style-profile-summoner-name:lang(tr-tr), .style-profile-summoner-namings-component .style-profile-summoner-name:lang(el-gr), .style-profile-summoner-namings-component .style-profile-summoner-name:lang(th-th), .style-profile-summoner-namings-component .style-profile-summoner-name:lang(zh-tw) { text-transform: none; } .style-profile-summoner-namings-component .style-profile-summoner-name { text-transform: none; } .style-profile-summoner-namings-component .style-profile-summoner-name { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .style-profile-summoner-namings-component .style-profile-summoner-name:lang(ar-ae) { letter-spacing: 0; } .style-profile-summoner-namings-component .style-profile-summoner-name { letter-spacing: 0.025em; } .style-profile-summoner-namings-component .style-profile-summoner-name:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-profiles-main { position: relative; cursor: default; width: 100%; height: 100%; } .rcp-fe-lol-profiles-modal { position: relative; cursor: default; width: 100%; height: 100%; } .style-profile-sub-nav { top: 79px; left: 35px; position: absolute; border: 0; margin: 0; padding: 0; -webkit-user-select: none; } .style-profile-sub-nav lol-uikit-navigation-item { margin-top: 9px; } div.rcp-fe-lol-profiles-modal .style-profile-sub-nav { top: 0; left: 290px; } .style-profile-summoner-namings-component { position: absolute; display: flex; flex-direction: column; align-items: center; width: 100%; top: 147px; } .style-profile-summoner-namings-component.rank-identity-override { top: 357px; } .style-profile-summoner-namings-component .style-profile-summoner-name { display: inline-block; white-space: nowrap; margin-bottom: 4px; } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-numbers { font-family: var(--font-display); } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-hover-text { font-family: var(--font-body); } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-numbers, .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-hover-text { -webkit-user-select: none; } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-numbers, .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-hover-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-numbers { text-transform: uppercase; } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-numbers:lang(ko-kr), .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-numbers:lang(ja-jp), .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-numbers:lang(tr-tr), .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-numbers:lang(el-gr), .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-numbers:lang(th-th), .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-numbers:lang(zh-tw) { text-transform: none; } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-numbers { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-numbers:lang(ja-jp) { font-size: 13px; } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-numbers:lang(ar-ae) { letter-spacing: 0; } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-hover-text { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-hover-text:lang(ja-jp) { font-size: 13px; } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-hover-text:lang(ar-ae) { letter-spacing: 0; } .style-summoner-xp-radial-component { display: flex; position: absolute; top: 165px; width: 100%; } .style-summoner-xp-radial-component .summoner-xp-radial-container { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; } .style-summoner-xp-radial-component .summoner-xp-radial { display: flex; flex-direction: row; align-items: center; min-width: 40px; height: 20px; background-image: url(/fe/lol-profiles/xp-radial-bg.png); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; pointer-events: all; } .style-summoner-xp-radial-component .summoner-xp-radial:hover .summoner-xp-radial-hover-text { display: flex; } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-progress { margin-left: 7px; transform: rotate(90deg); } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-progress .summoner-xp-radial-progress-circle { transition: 0.35s stroke-dashoffset; transform-origin: 50% 50%; stroke: #0a96aa; } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-progress .summoner-xp-radial-progress-circle.summoner-xp-radial-progress-circle-bg { stroke: #1e2328; } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-numbers { display: flex; color: #a09b8c; margin-right: 5px; margin-left: 3px; min-width: 15px; justify-content: center; } .style-summoner-xp-radial-component .summoner-xp-radial .summoner-xp-radial-hover-text { display: none; position: absolute; top: 25px; left: 0px; width: 100%; justify-content: center; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-value { font-family: var(--font-display); } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-xp-progress-numbers-display { font-family: var(--font-body); } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-value, .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-xp-progress-numbers-display { -webkit-user-select: none; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-value, .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-xp-progress-numbers-display { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-value { text-transform: uppercase; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-value:lang(ko-kr), .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-value:lang(ja-jp), .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-value:lang(tr-tr), .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-value:lang(el-gr), .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-value:lang(th-th), .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-value:lang(zh-tw) { text-transform: none; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-value { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-value:lang(ja-jp) { font-size: 13px; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-value:lang(ar-ae) { letter-spacing: 0; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-xp-progress-numbers-display { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-xp-progress-numbers-display:lang(ja-jp) { font-size: 13px; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-xp-progress-numbers-display:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-profiles-main { position: relative; cursor: default; width: 100%; height: 100%; } .rcp-fe-lol-profiles-modal { position: relative; cursor: default; width: 100%; height: 100%; } .style-profile-sub-nav { top: 79px; left: 35px; position: absolute; border: 0; margin: 0; padding: 0; -webkit-user-select: none; } .style-profile-sub-nav lol-uikit-navigation-item { margin-top: 9px; } div.rcp-fe-lol-profiles-modal .style-profile-sub-nav { top: 0; left: 290px; } .style-profile-summoner-level-bar-component { position: relative; width: 100%; height: 20px; pointer-events: auto; } .style-profile-summoner-level-bar-component.rank-identity-override { width: 175px; } .style-profile-summoner-level-bar-component.rank-identity-override .style-profile-summoner-level-bar-number-plate { left: 0; } .style-profile-summoner-level-bar-component.rank-identity-override .style-profile-summoner-level-bar-number-value { left: 12px; } .style-profile-summoner-level-bar-component.rank-identity-override .style-profile-summoner-level-bar-xp-progress-fill-container { left: 50px; } .style-profile-summoner-level-bar-component.rank-identity-override .style-profile-summoner-level-bar-xp-progress-fill-container { right: 5px; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-xp-progress-background { background-image: url(/fe/lol-profiles/level-bar-bottom.png); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-xp-progress-fill-container { position: absolute; left: 65px; right: 22px; height: 100%; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-xp-progress-fill-preloader { display: none; background-image: url(/fe/lol-profiles/level-bar-fill.png), url(/fe/lol-profiles/level-bar-fill-hover.png); } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-xp-progress-fill { background-image: url(/fe/lol-profiles/level-bar-fill.png); background-size: 100% 100%; height: 100%; image-rendering: -webkit-optimize-contrast; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-plate { background-image: url(/fe/lol-profiles/level-bar-top.png); background-size: contain; background-repeat: no-repeat; background-position: left; position: absolute; top: 0; left: 15px; width: 100%; height: 100%; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-number-value { position: absolute; top: 1px; left: 27px; width: 34px; text-align: center; color: #f0e6d2; } .style-profile-summoner-level-bar-component .style-profile-summoner-level-bar-xp-progress-numbers-display { position: absolute; top: 22px; left: 0; width: 100%; text-align: center; display: none; } .style-profile-summoner-level-bar-component:hover .style-profile-summoner-level-bar-xp-progress-fill { background-image: url(/fe/lol-profiles/level-bar-fill-hover.png); } .style-profile-summoner-level-bar-component:hover .style-profile-summoner-level-bar-xp-progress-numbers-display { display: block; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-name, .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-tier { font-family: var(--font-display); } .profile-ranked-emblem-tooltip-container div.style-profile-ranked-crest-tooltip-lp { font-family: var(--font-body); } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .profile-ranked-emblem-tooltip-container div.style-profile-ranked-crest-tooltip-lp, .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-name, .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-tier { -webkit-user-select: none; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .profile-ranked-emblem-tooltip-container div.style-profile-ranked-crest-tooltip-lp, .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-name, .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-tier { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-name, .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-tier { text-transform: uppercase; } .style-profile-emblem-header-title:lang(ko-kr), .style-profile-emblem-header-subtitle:lang(ko-kr), .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-name:lang(ko-kr), .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-tier:lang(ko-kr), .style-profile-emblem-header-title:lang(ja-jp), .style-profile-emblem-header-subtitle:lang(ja-jp), .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-name:lang(ja-jp), .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-tier:lang(ja-jp), .style-profile-emblem-header-title:lang(tr-tr), .style-profile-emblem-header-subtitle:lang(tr-tr), .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-name:lang(tr-tr), .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-tier:lang(tr-tr), .style-profile-emblem-header-title:lang(el-gr), .style-profile-emblem-header-subtitle:lang(el-gr), .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-name:lang(el-gr), .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-tier:lang(el-gr), .style-profile-emblem-header-title:lang(th-th), .style-profile-emblem-header-subtitle:lang(th-th), .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-name:lang(th-th), .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-tier:lang(th-th), .style-profile-emblem-header-title:lang(zh-tw), .style-profile-emblem-header-subtitle:lang(zh-tw), .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-name:lang(zh-tw), .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-tier:lang(zh-tw) { text-transform: none; } .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-tier { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-tier:lang(ar-ae) { letter-spacing: 0; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-name { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .style-profile-emblem-header-title:lang(ja-jp), .style-profile-emblem-header-subtitle:lang(ja-jp), .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-name:lang(ja-jp) { font-size: 13px; } .style-profile-emblem-header-title:lang(ar-ae), .style-profile-emblem-header-subtitle:lang(ar-ae), .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-name:lang(ar-ae) { letter-spacing: 0; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-name { color: #a09b8c; } .profile-ranked-emblem-tooltip-container div.style-profile-ranked-crest-tooltip-lp { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .profile-ranked-emblem-tooltip-container div.style-profile-ranked-crest-tooltip-lp:lang(ja-jp) { font-size: 13px; } .profile-ranked-emblem-tooltip-container div.style-profile-ranked-crest-tooltip-lp:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-profiles-main { position: relative; cursor: default; width: 100%; height: 100%; } .rcp-fe-lol-profiles-modal { position: relative; cursor: default; width: 100%; height: 100%; } .style-profile-sub-nav { top: 79px; left: 35px; position: absolute; border: 0; margin: 0; padding: 0; -webkit-user-select: none; } .style-profile-sub-nav lol-uikit-navigation-item { margin-top: 9px; } div.rcp-fe-lol-profiles-modal .style-profile-sub-nav { top: 0; left: 290px; } .style-profile-emblem-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; background-size: contain; background-image: url(/fe/lol-profiles/Profile_Emblem_BG.png); background-repeat: no-repeat; } .style-profile-emblem-wrapper:hover { background-image: url(/fe/lol-profiles/Profile_Emblem_Hover.png); } .style-profile-emblem-header { width: 100%; min-height: 50px; display: flex; flex-direction: column; align-items: center; height: fit-content; flex-shrink: 0; margin-top: 10px; } .style-profile-emblem-header-title { overflow: hidden; white-space: normal; text-align: center; flex-shrink: 0; color: #cdbe91; margin-bottom: 2px; direction: rtl; } .style-profile-emblem-header-subtitle { font-size: 10px; line-height: 14px; color: #f0e6d2; overflow: hidden; white-space: normal; text-align: center; flex-shrink: 0; } .style-profile-emblem-wrapper:hover .style-profile-emblem-header-title { color: #f0e6d2; } .style-profile-emblem-content-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; position: relative; } .style-profile-emblem-content-container .style-profile-emblem-content { width: 100%; height: 100%; } .style-profile-ranked-component { width: 100%; height: 100%; } .style-profile-ranked-component * { box-sizing: border-box; } .style-profile-emblem-subheader-ranked { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: 100%; } .style-profile-emblem-subheader-ranked .style-profile-emblem-subheader-position { margin-right: 5px; width: 17px; height: 17px; } .style-profile-demotion-shield-warning { position: absolute; bottom: 40px; right: 20px; width: 16px; height: 16px; } .style-profile-ranked-position-tooltip-wrapper { display: flex; flex-flow: row nowrap; justify-content: space-around; width: 100%; height: 220px; } .style-profile-ranked-position-tooltip-wrapper.show-warning { height: 230px; } .style-profile-ranked-position-tooltip-flex-wrapper { display: flex; flex-flow: column nowrap; justify-content: flex-start; width: 100%; height: 100%; } .style-profile-ranked-position-tooltip-flex-row { display: flex; flex-flow: row nowrap; justify-content: space-around; width: 100%; } .style-profile-ranked-non-position-tooltip-wrapper { display: flex; flex-flow: row nowrap; justify-content: space-around; width: 100%; height: 210px; background-repeat: no-repeat; background-position: 10px 80px; background-size: 500px 15px; background-color: transparent; background-image: url(/fe/lol-profiles/triple_tooltip_bar.png); } .style-profile-ranked-non-position-tooltip-wrapper.show-warning { height: 230px; } .style-profile-ranked-non-position-tooltip-queue-wrapper { display: flex; flex-flow: column nowrap; justify-content: flex-start; width: 100%; height: 100%; min-width: 520px; } .style-profile-ranked-non-position-tooltip-queue-row { display: flex; flex-flow: row nowrap; justify-content: space-around; width: 100%; } .style-profile-ranked-reference-modal-button { position: absolute; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: 100%; bottom: 170px; } .profile-ranked-emblem-tooltip-container { display: flex; width: 100%; height: 224px; align-items: center; background: #1a1c21; position: relative; } .profile-ranked-emblem-tooltip-container lol-regalia-emblem-element { position: relative; width: 150px; height: 145px; } .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue { display: flex; flex-direction: column; width: 200px; height: 200px; align-items: center; } .profile-ranked-emblem-tooltip-container .ranked-tooltip-last-season { display: flex; flex-direction: column; width: 200px; height: 200px; align-items: center; border-left: 1px solid #000; border-image: linear-gradient(to bottom, rgba(0,0,0,0), #3c3c41, rgba(0,0,0,0)) 1 100%; border-image-slice: 1; } .profile-ranked-emblem-tooltip-container div.style-profile-ranked-crest-tooltip-crest-dividing-line { height: 1px; width: 90px; margin-top: 0.1em; margin-bottom: 0.3em; align-self: center; background: linear-gradient(to left, transparent, #785a28, transparent); } .profile-ranked-emblem-tooltip-container div.style-profile-ranked-crest-tooltip-crest-dividing-line.unranked { display: none; } .profile-ranked-emblem-tooltip-container div.style-profile-ranked-crest-tooltip-lp { text-transform: none; } .profile-ranked-emblem-tooltip-container div.style-profile-ranked-crest-tooltip-lp span + span { padding-left: 4px; border-left: 1px solid #a09b8c; } .profile-ranked-emblem-tooltip-container .ranked-tooltip-queue-tier { line-height: 24px; } .style-profile-ranked-warning-wrapper .style-profile-ranked-warning-message { font-family: var(--font-body); } .style-profile-ranked-warning-wrapper .style-profile-ranked-warning-message { -webkit-user-select: none; } .style-profile-ranked-warning-wrapper .style-profile-ranked-warning-message { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-ranked-warning-wrapper .style-profile-ranked-warning-message { text-transform: none; } .style-profile-ranked-warning-wrapper .style-profile-ranked-warning-message { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .style-profile-ranked-warning-wrapper .style-profile-ranked-warning-message:lang(ja-jp) { font-size: 13px; } .style-profile-ranked-warning-wrapper .style-profile-ranked-warning-message:lang(ar-ae) { letter-spacing: 0; } .style-profile-ranked-warning-wrapper .style-profile-ranked-warning-icon, .style-profile-ranked-demotion-warning { width: 16px; height: 16px; -webkit-mask: url(/fe/lol-profiles/icon-warning.png) no-repeat 50% 50%; -webkit-mask-size: contain; flex-shrink: 0; } .style-profile-ranked-warning-wrapper .style-profile-ranked-warning-icon.warning-1, .style-profile-ranked-demotion-warning.warning-1 { background-color: #c89b3c; } .style-profile-ranked-warning-wrapper .style-profile-ranked-warning-icon.warning-1:hover, .style-profile-ranked-demotion-warning.warning-1:hover { background-color: #fabe0a; } .style-profile-ranked-warning-wrapper .style-profile-ranked-warning-icon.warning-2, .style-profile-ranked-demotion-warning.warning-2 { background-color: #be1e37; } .style-profile-ranked-warning-wrapper .style-profile-ranked-warning-icon.warning-2:hover, .style-profile-ranked-demotion-warning.warning-2:hover { background-color: #ff2345; } .style-profile-ranked-warning-wrapper { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; } .style-profile-ranked-warning-wrapper .style-profile-ranked-warning-message { margin-top: 5px; margin-left: 10px; margin-right: 10px; } .style-profile-ranked-demotion-warning { position: absolute; left: 50%; transform: translateX(-50%); transition: background-color 250ms ease; } .style-profile-ranked-icon-component { height: 100%; } .style-profile-ranked-icon-component .style-profile-ranked-crest-wrapper { width: 100%; height: 100%; } .style-profile-ranked-icon-component .style-profile-ranked-crest-unranked { width: 100%; height: 100%; background-size: contain; background-image: url(/fe/lol-profiles/profile_unranked.png); background-repeat: no-repeat; } .style-profile-ranked-icon-component .style-profile-ranked-crest-ranked { width: 80px; height: 80px; position: absolute; left: 50%; transform: translateX(-50%); margin-top: 35px; } .style-profile-ranked-icon-component .style-profile-ranked-crest-ranked.rank-identity-override { width: 100%; height: 134px; margin-top: 10px; } .style-profile-ranked-icon-component .style-profile-ranked-crest-ranked.provisional { -webkit-filter: brightness(0.5) saturate(0.5); } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-queue, .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-tier-division { font-family: var(--font-display); } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-stats-wrapper .style-profile-ranked-crest-tooltip-lp { font-family: var(--font-body); } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-queue, .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-tier-division, .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-stats-wrapper .style-profile-ranked-crest-tooltip-lp { -webkit-user-select: none; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-queue, .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-tier-division, .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-stats-wrapper .style-profile-ranked-crest-tooltip-lp { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-queue, .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-tier-division { text-transform: uppercase; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-queue:lang(ko-kr), .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-tier-division:lang(ko-kr), .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-queue:lang(ja-jp), .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-tier-division:lang(ja-jp), .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-queue:lang(tr-tr), .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-tier-division:lang(tr-tr), .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-queue:lang(el-gr), .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-tier-division:lang(el-gr), .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-queue:lang(th-th), .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-tier-division:lang(th-th), .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-queue:lang(zh-tw), .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-tier-division:lang(zh-tw) { text-transform: none; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-queue { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-queue:lang(ar-ae) { letter-spacing: 0; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-queue { color: #a09b8c; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-tier-division { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-tier-division:lang(ja-jp) { font-size: 13px; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-tier-division:lang(ar-ae) { letter-spacing: 0; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-stats-wrapper .style-profile-ranked-crest-tooltip-lp { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-stats-wrapper .style-profile-ranked-crest-tooltip-lp:lang(ja-jp) { font-size: 13px; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-stats-wrapper .style-profile-ranked-crest-tooltip-lp:lang(ar-ae) { letter-spacing: 0; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-warning-1, .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-warning-2 { position: absolute; bottom: -10px; right: -10px; width: 16px; height: 16px; -webkit-mask: url(/fe/lol-profiles/icon-warning.png) no-repeat 50% 50%; -webkit-mask-size: contain; flex-shrink: 0; } .style-profile-ranked-icon-tooltip-component { width: 100%; height: 100%; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; width: 100%; height: 100%; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner lol-uikit-content-block { text-align: center; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-unranked { position: relative; background-position: center; background-image: url(/fe/lol-profiles/profile_unranked_tooltip.png); background-repeat: no-repeat; width: 94px; height: 94px; margin-top: 25px; margin-bottom: 13px; background-size: 100% 100%; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-ranked { position: relative; width: 62px; height: 62px; margin-top: 40px; margin-bottom: 30px; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-ranked.provisional { -webkit-filter: brightness(0.5) saturate(0.5); } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-warning-1 { background-color: #c89b3c; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-warning-1:hover { background-color: #fabe0a; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-warning-2 { background-color: #be1e37; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-warning-2:hover { background-color: #ff2345; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner div.style-profile-ranked-crest-tooltip-crest-dividing-line { height: 1px; width: 90px; margin-top: 0.1em; margin-bottom: 0.3em; align-self: center; background: linear-gradient(to left, transparent, #785a28, transparent); } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner div.style-profile-ranked-crest-tooltip-crest-dividing-line.unranked { display: none; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division { display: flex; flex: 0 0 auto; flex-flow: column nowrap; width: 100%; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-queue.unranked { color: #3c3c41; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-queue-and-division .style-profile-ranked-crest-tooltip-tier-division.unranked { color: #3c3c41; } .style-profile-ranked-icon-tooltip-component .style-profile-ranked-crest-tooltip-crest-inner .style-profile-ranked-crest-tooltip-stats-wrapper { display: flex; flex-flow: column nowrap; flex: 0 0 auto; justify-content: center; text-transform: uppercase; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title, .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank { font-family: var(--font-display); } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title, .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank { -webkit-user-select: none; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title, .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title, .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank { text-transform: uppercase; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title:lang(ko-kr), .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank:lang(ko-kr), .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title:lang(ja-jp), .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank:lang(ja-jp), .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title:lang(tr-tr), .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank:lang(tr-tr), .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title:lang(el-gr), .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank:lang(el-gr), .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title:lang(th-th), .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank:lang(th-th), .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title:lang(zh-tw), .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank:lang(zh-tw) { text-transform: none; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title:lang(ar-ae) { letter-spacing: 0; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title { color: #a09b8c; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank:lang(ja-jp) { font-size: 13px; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank:lang(ar-ae) { letter-spacing: 0; } .style-profile-ranked-last-season-tooltip-component { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 215px; height: 100%; flex-shrink: 0; border-left-width: 1px; border-left-color: #463714; border-left-style: solid; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-trim { width: 180px; height: 132px; position: relative; margin-right: 20px; margin-left: 20px; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title { text-align: center; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-title.unranked { color: #3c3c41; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank { text-align: center; } .style-profile-ranked-last-season-tooltip-component .style-profile-ranked-tooltip-last-rank.unranked { color: #3c3c41; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle { font-family: var(--font-display); } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle { -webkit-user-select: none; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle { text-transform: uppercase; } .style-profile-emblem-header-title:lang(ko-kr), .style-profile-emblem-header-subtitle:lang(ko-kr), .style-profile-emblem-header-title:lang(ja-jp), .style-profile-emblem-header-subtitle:lang(ja-jp), .style-profile-emblem-header-title:lang(tr-tr), .style-profile-emblem-header-subtitle:lang(tr-tr), .style-profile-emblem-header-title:lang(el-gr), .style-profile-emblem-header-subtitle:lang(el-gr), .style-profile-emblem-header-title:lang(th-th), .style-profile-emblem-header-subtitle:lang(th-th), .style-profile-emblem-header-title:lang(zh-tw), .style-profile-emblem-header-subtitle:lang(zh-tw) { text-transform: none; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .style-profile-emblem-header-title:lang(ja-jp), .style-profile-emblem-header-subtitle:lang(ja-jp) { font-size: 13px; } .style-profile-emblem-header-title:lang(ar-ae), .style-profile-emblem-header-subtitle:lang(ar-ae) { letter-spacing: 0; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle { color: #a09b8c; } .rcp-fe-lol-profiles-main { position: relative; cursor: default; width: 100%; height: 100%; } .rcp-fe-lol-profiles-modal { position: relative; cursor: default; width: 100%; height: 100%; } .style-profile-sub-nav { top: 79px; left: 35px; position: absolute; border: 0; margin: 0; padding: 0; -webkit-user-select: none; } .style-profile-sub-nav lol-uikit-navigation-item { margin-top: 9px; } div.rcp-fe-lol-profiles-modal .style-profile-sub-nav { top: 0; left: 290px; } .style-profile-emblem-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; background-size: contain; background-image: url(/fe/lol-profiles/Profile_Emblem_BG.png); background-repeat: no-repeat; } .style-profile-emblem-wrapper:hover { background-image: url(/fe/lol-profiles/Profile_Emblem_Hover.png); } .style-profile-emblem-header { width: 100%; min-height: 50px; display: flex; flex-direction: column; align-items: center; height: fit-content; flex-shrink: 0; margin-top: 10px; } .style-profile-emblem-header-title { overflow: hidden; white-space: normal; text-align: center; flex-shrink: 0; color: #cdbe91; margin-bottom: 2px; direction: rtl; } .style-profile-emblem-header-subtitle { font-size: 10px; line-height: 14px; color: #f0e6d2; overflow: hidden; white-space: normal; text-align: center; flex-shrink: 0; } .style-profile-emblem-wrapper:hover .style-profile-emblem-header-title { color: #f0e6d2; } .style-profile-emblem-content-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; position: relative; } .style-profile-emblem-content-container .style-profile-emblem-content { width: 100%; height: 100%; } .style-profile-honor-component { width: 100%; height: 100%; } .style-profile-honor-component .style-profile-honor-icon { width: 100%; margin-top: 10px; } .style-profile-honor-component .style-profile-honor-empty { width: 100%; height: 100%; background-color: transparent; background-size: contain; background-position-y: -5px; background-image: url(/fe/lol-profiles/Honor_Empty.png); background-repeat: no-repeat; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .style-profile-champion-mastery-component .style-profile-champion-mastery-score, .style-profile-progression-section .style-profile-mastery-section .style-profile-mastery-title, .style-profile-progression-section .style-profile-eternals-section .style-profile-eternals-title { font-family: var(--font-display); } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .style-profile-champion-mastery-component .style-profile-champion-mastery-score, .style-profile-progression-section .style-profile-mastery-section .style-profile-mastery-title, .style-profile-progression-section .style-profile-eternals-section .style-profile-eternals-title { -webkit-user-select: none; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .style-profile-champion-mastery-component .style-profile-champion-mastery-score, .style-profile-progression-section .style-profile-mastery-section .style-profile-mastery-title, .style-profile-progression-section .style-profile-eternals-section .style-profile-eternals-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .style-profile-champion-mastery-component .style-profile-champion-mastery-score, .style-profile-progression-section .style-profile-mastery-section .style-profile-mastery-title, .style-profile-progression-section .style-profile-eternals-section .style-profile-eternals-title { text-transform: uppercase; } .style-profile-emblem-header-title:lang(ko-kr), .style-profile-emblem-header-subtitle:lang(ko-kr), .style-profile-champion-mastery-component .style-profile-champion-mastery-score:lang(ko-kr), .style-profile-progression-section .style-profile-mastery-section .style-profile-mastery-title:lang(ko-kr), .style-profile-progression-section .style-profile-eternals-section .style-profile-eternals-title:lang(ko-kr), .style-profile-emblem-header-title:lang(ja-jp), .style-profile-emblem-header-subtitle:lang(ja-jp), .style-profile-champion-mastery-component .style-profile-champion-mastery-score:lang(ja-jp), .style-profile-progression-section .style-profile-mastery-section .style-profile-mastery-title:lang(ja-jp), .style-profile-progression-section .style-profile-eternals-section .style-profile-eternals-title:lang(ja-jp), .style-profile-emblem-header-title:lang(tr-tr), .style-profile-emblem-header-subtitle:lang(tr-tr), .style-profile-champion-mastery-component .style-profile-champion-mastery-score:lang(tr-tr), .style-profile-progression-section .style-profile-mastery-section .style-profile-mastery-title:lang(tr-tr), .style-profile-progression-section .style-profile-eternals-section .style-profile-eternals-title:lang(tr-tr), .style-profile-emblem-header-title:lang(el-gr), .style-profile-emblem-header-subtitle:lang(el-gr), .style-profile-champion-mastery-component .style-profile-champion-mastery-score:lang(el-gr), .style-profile-progression-section .style-profile-mastery-section .style-profile-mastery-title:lang(el-gr), .style-profile-progression-section .style-profile-eternals-section .style-profile-eternals-title:lang(el-gr), .style-profile-emblem-header-title:lang(th-th), .style-profile-emblem-header-subtitle:lang(th-th), .style-profile-champion-mastery-component .style-profile-champion-mastery-score:lang(th-th), .style-profile-progression-section .style-profile-mastery-section .style-profile-mastery-title:lang(th-th), .style-profile-progression-section .style-profile-eternals-section .style-profile-eternals-title:lang(th-th), .style-profile-emblem-header-title:lang(zh-tw), .style-profile-emblem-header-subtitle:lang(zh-tw), .style-profile-champion-mastery-component .style-profile-champion-mastery-score:lang(zh-tw), .style-profile-progression-section .style-profile-mastery-section .style-profile-mastery-title:lang(zh-tw), .style-profile-progression-section .style-profile-eternals-section .style-profile-eternals-title:lang(zh-tw) { text-transform: none; } .style-profile-champion-mastery-component .style-profile-champion-mastery-score { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .style-profile-champion-mastery-component .style-profile-champion-mastery-score:lang(ar-ae) { letter-spacing: 0; } .style-profile-progression-section .style-profile-mastery-section .style-profile-mastery-title, .style-profile-progression-section .style-profile-eternals-section .style-profile-eternals-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .style-profile-progression-section .style-profile-mastery-section .style-profile-mastery-title:lang(ar-ae), .style-profile-progression-section .style-profile-eternals-section .style-profile-eternals-title:lang(ar-ae) { letter-spacing: 0; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .style-profile-emblem-header-title:lang(ja-jp), .style-profile-emblem-header-subtitle:lang(ja-jp) { font-size: 13px; } .style-profile-emblem-header-title:lang(ar-ae), .style-profile-emblem-header-subtitle:lang(ar-ae) { letter-spacing: 0; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle { color: #a09b8c; } .rcp-fe-lol-profiles-main { position: relative; cursor: default; width: 100%; height: 100%; } .rcp-fe-lol-profiles-modal { position: relative; cursor: default; width: 100%; height: 100%; } .style-profile-sub-nav { top: 79px; left: 35px; position: absolute; border: 0; margin: 0; padding: 0; -webkit-user-select: none; } .style-profile-sub-nav lol-uikit-navigation-item { margin-top: 9px; } div.rcp-fe-lol-profiles-modal .style-profile-sub-nav { top: 0; left: 290px; } .style-profile-emblem-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; background-size: contain; background-image: url(/fe/lol-profiles/Profile_Emblem_BG.png); background-repeat: no-repeat; } .style-profile-emblem-wrapper:hover { background-image: url(/fe/lol-profiles/Profile_Emblem_Hover.png); } .style-profile-emblem-header { width: 100%; min-height: 50px; display: flex; flex-direction: column; align-items: center; height: fit-content; flex-shrink: 0; margin-top: 10px; } .style-profile-emblem-header-title { overflow: hidden; white-space: normal; text-align: center; flex-shrink: 0; color: #cdbe91; margin-bottom: 2px; direction: rtl; } .style-profile-emblem-header-subtitle { font-size: 10px; line-height: 14px; color: #f0e6d2; overflow: hidden; white-space: normal; text-align: center; flex-shrink: 0; } .style-profile-emblem-wrapper:hover .style-profile-emblem-header-title { color: #f0e6d2; } .style-profile-emblem-content-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; position: relative; } .style-profile-emblem-content-container .style-profile-emblem-content { width: 100%; height: 100%; } .style-profile-champion-mastery-component { width: 100%; height: 100%; } .style-profile-progression-section { display: flex; flex-direction: row; height: 100%; } .style-profile-progression-section .style-profile-mastery-section { width: 390px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 6px 6px 0 6px; } .style-profile-progression-section .style-profile-mastery-section .style-profile-mastery-title { width: 390px; color: #f0e6d2; text-align: center; padding-top: 12px; padding-bottom: 3px; } .style-profile-progression-section .style-profile-tooltip-divider { display: inline-block; position: relative; min-width: 2px; height: 279px; background: linear-gradient(to bottom, rgba(70,55,20,0), 20%, #463714, 80%, rgba(70,55,20,0)); background-repeat: no-repeat; background-position: center; background-size: 100% 95%; } .style-profile-progression-section .style-profile-eternals-section { display: flex; flex-direction: column; justify-content: space-around; width: 100%; height: 100%; padding: 6px 6px 0 6px; } .style-profile-progression-section .style-profile-eternals-section .style-profile-eternals-title { color: #f0e6d2; text-align: center; padding-top: 8px; padding-bottom: 10px; } .style-profile-progression-section .style-profile-eternals-section .style-profile-eternals-tripple-tooltip { display: flex; flex-direction: row; align-items: center; } .style-profile-champion-mastery-icon-component { width: 100%; height: 100%; } .style-profile-champion-mastery-icon-component .style-profile-champion-icon { width: 80px; height: 80px; position: relative; top: 20px; margin: 0 auto; padding: 0; border: 0; background-color: transparent; background-size: contain; background-image: url(/fe/lol-profiles/mastery_backcomplete.png);    } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.disabled { background-image: none; } .style-profile-champion-mastery-icon-component .style-profile-champion-icon .style-profile-champion-icon-masked, .style-profile-champion-mastery-icon-component .style-profile-champion-icon .style-profile-champion-icon-top-frame, .style-profile-champion-mastery-icon-component .style-profile-champion-icon .style-profile-champion-icon-clickable-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .style-profile-champion-mastery-icon-component .style-profile-champion-icon .style-profile-mastery-radial-progress { width: 85%; height: 85%; top: 8%; left: 8%; } .style-profile-champion-mastery-icon-component .style-profile-champion-icon .style-profile-champion-icon-masked { -webkit-mask-size: 100% 100%; -webkit-mask-clip: content; -webkit-mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; -webkit-mask-image: url(/fe/lol-profiles/mastery_maskcomplete.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon .style-profile-champion-icon-masked img { position: absolute; width: 80%; height: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon .style-profile-champion-icon-top-frame { background-color: transparent; background-size: contain; background-image: url(/fe/lol-profiles/mastery_framelevel0.png); background-repeat: no-repeat; } .style-profile-champion-mastery-icon-component .style-profile-champion-icon .style-profile-champion-icon-clickable-area { background-color: transparent; border-radius: 50%; top: 3%; left: 3%; width: 94%; height: 94%; } .style-profile-champion-mastery-icon-component .style-profile-champion-icon .style-profile-champion-icon-layer { width: 100%; height: 100%; position: relative; } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.show-level { background-image: url(/fe/lol-profiles/mastery_backing.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.show-level .style-profile-champion-icon-masked { -webkit-mask-image: url(/fe/lol-profiles/mastery_iconmask.png); -webkit-mask-size: 84% 84%; } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.show-level .style-profile-champion-icon-top-frame { background-image: url(/fe/lol-profiles/mastery_frame.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.show-level .style-profile-champion-icon-clickable-area { top: 10%; left: 10%; width: 80%; height: 80%; } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.completed { background-image: url(/fe/lol-profiles/mastery_backcomplete.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.completed .style-profile-champion-icon-top-frame { background-image: url(/fe/lol-profiles/mastery_framecomplete.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon .style-profile-champion-icon-banner-layer { position: absolute; top: 48%; left: 50%; transform: translateX(-50%); width: 70%; height: 70%; } .style-profile-champion-mastery-icon-component .style-profile-champion-icon .style-profile-champion-icon-banner-layer .style-profile-banner-image { background-image: url(/fe/lol-profiles/mastery_level0banner.png); background-size: contain; background-repeat: no-repeat; width: 100%; height: 100%; } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level0 .style-profile-champion-icon-banner-layer .style-profile-banner-image { background-image: url(/fe/lol-profiles/mastery_level0banner.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level1 .style-profile-champion-icon-banner-layer .style-profile-banner-image { background-image: url(/fe/lol-profiles/mastery_level1banner.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level2 .style-profile-champion-icon-banner-layer .style-profile-banner-image { background-image: url(/fe/lol-profiles/mastery_level2banner.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level3 .style-profile-champion-icon-banner-layer .style-profile-banner-image { background-image: url(/fe/lol-profiles/mastery_level3banner.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level4 .style-profile-champion-icon-banner-layer .style-profile-banner-image { background-image: url(/fe/lol-profiles/mastery_level4banner.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level5 .style-profile-champion-icon-banner-layer .style-profile-banner-image { background-image: url(/fe/lol-profiles/mastery_level5banner.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level6 .style-profile-champion-icon-banner-layer .style-profile-banner-image { background-image: url(/fe/lol-profiles/mastery_level6banner.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level7 .style-profile-champion-icon-banner-layer .style-profile-banner-image { background-image: url(/fe/lol-profiles/mastery_level7banner.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon .style-profile-champion-icon-accent-layer { position: absolute; top: 73%; left: 50%; transform: translateX(-50%); pointer-events: none; } .style-profile-champion-mastery-icon-component .style-profile-champion-icon .style-profile-champion-icon-accent-layer .style-profile-accent-image { background: none; background-size: contain; background-repeat: no-repeat; width: 62px; height: 66px; } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level1 .style-profile-champion-icon-accent-layer .style-profile-accent-image { display: none; } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level2 .style-profile-champion-icon-accent-layer .style-profile-accent-image { background-image: url(/fe/lol-profiles/mastery_level2.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level3 .style-profile-champion-icon-accent-layer .style-profile-accent-image { background-image: url(/fe/lol-profiles/mastery_level3.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level4 .style-profile-champion-icon-accent-layer .style-profile-accent-image { background-image: url(/fe/lol-profiles/mastery_level4.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level5 .style-profile-champion-icon-accent-layer .style-profile-accent-image { background-image: url(/fe/lol-profiles/mastery_level5.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level6 .style-profile-champion-icon-accent-layer .style-profile-accent-image { background-image: url(/fe/lol-profiles/mastery_level6.png); } .style-profile-champion-mastery-icon-component .style-profile-champion-icon.level7 .style-profile-champion-icon-accent-layer .style-profile-accent-image { background-image: url(/fe/lol-profiles/mastery_level7.png); } .style-profile-champion-mastery-level-up-details { padding-top: 8px; white-space: normal; color: #c89b3c; } .style-profile-champion-mastery-triple-tooltip { display: flex; flex-flow: row nowrap; justify-content: center; width: 390px; height: 240px; background: transparent url(/fe/lol-profiles/triple_tooltip_bar.png) center 80px/340px 10px no-repeat; } .style-profile-champion-icon-inner-container { position: relative; width: 130px; height: 250px; margin-top: 13px; } .style-profile-champion-icon-inner-container.primary { width: 132px; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner { width: 100px; height: 100px; position: relative; top: 30px; left: 0; margin: 0 auto; padding: 0; border: 0; background-color: transparent; background-size: contain; background-image: url(/fe/lol-profiles/mastery_backcomplete.png);    } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.disabled { background-image: none; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.primary { top: -3px; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.secondary { width: 70px; height: 70px; top: 20px; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.secondary .style-profile-champion-icon-accent-layer-inner .style-profile-accent-image-inner { width: 60px; height: 54px; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner .style-profile-champion-icon-masked-inner, .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner .style-profile-champion-icon-top-frame-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner .style-profile-mastery-radial-progress-inner { width: 85%; height: 85%; top: 8%; left: 8%; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner .style-profile-champion-icon-masked-inner { -webkit-mask-size: 100% 100%; -webkit-mask-clip: content; -webkit-mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; -webkit-mask-image: url(/fe/lol-profiles/mastery_maskcomplete.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner .style-profile-champion-icon-masked-inner img { position: absolute; width: 80%; height: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #000; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner .style-profile-champion-icon-top-frame-inner { background-color: transparent; background-size: contain; background-image: url(/fe/lol-profiles/mastery_framelevel0.png); background-repeat: no-repeat; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner .style-profile-champion-icon-layer-inner { width: 100%; height: 100%; position: relative; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.show-level { background-image: url(/fe/lol-profiles/mastery_backing.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.show-level .style-profile-champion-icon-masked-inner { -webkit-mask-image: url(/fe/lol-profiles/mastery_iconmask.png); -webkit-mask-size: 84% 84%; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.show-level .style-profile-champion-icon-top-frame-inner { background-image: url(/fe/lol-profiles/mastery_frame.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.completed { background-image: url(/fe/lol-profiles/mastery_backcomplete.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.completed .style-profile-champion-icon-top-frame-inner { background-image: url(/fe/lol-profiles/mastery_framecomplete.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner .style-profile-champion-icon-banner-layer-inner { position: absolute; top: 48%; left: 50%; transform: translateX(-50%); width: 70%; height: 70%; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner .style-profile-champion-icon-banner-layer-inner .style-profile-banner-image-inner { background-image: url(/fe/lol-profiles/mastery_level0banner.png); background-size: contain; background-repeat: no-repeat; width: 100%; height: 100%; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level0 .style-profile-champion-icon-banner-layer-inner .style-profile-banner-image-inner { background-image: url(/fe/lol-profiles/mastery_level0banner.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level1 .style-profile-champion-icon-banner-layer-inner .style-profile-banner-image-inner { background-image: url(/fe/lol-profiles/mastery_level1banner.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level2 .style-profile-champion-icon-banner-layer-inner .style-profile-banner-image-inner { background-image: url(/fe/lol-profiles/mastery_level2banner.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level3 .style-profile-champion-icon-banner-layer-inner .style-profile-banner-image-inner { background-image: url(/fe/lol-profiles/mastery_level3banner.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level4 .style-profile-champion-icon-banner-layer-inner .style-profile-banner-image-inner { background-image: url(/fe/lol-profiles/mastery_level4banner.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level5 .style-profile-champion-icon-banner-layer-inner .style-profile-banner-image-inner { background-image: url(/fe/lol-profiles/mastery_level5banner.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level6 .style-profile-champion-icon-banner-layer-inner .style-profile-banner-image-inner { background-image: url(/fe/lol-profiles/mastery_level6banner.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level7 .style-profile-champion-icon-banner-layer-inner .style-profile-banner-image-inner { background-image: url(/fe/lol-profiles/mastery_level7banner.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner .style-profile-champion-icon-accent-layer-inner { position: absolute; top: 73%; left: 50%; transform: translateX(-50%); pointer-events: none; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner .style-profile-champion-icon-accent-layer-inner .style-profile-accent-image-inner { background: none; background-size: contain; background-repeat: no-repeat; width: 62px; height: 66px; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level1 .style-profile-champion-icon-accent-layer-inner .style-profile-accent-image-inner { display: none; } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level2 .style-profile-champion-icon-accent-layer-inner .style-profile-accent-image-inner { background-image: url(/fe/lol-profiles/mastery_level2.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level3 .style-profile-champion-icon-accent-layer-inner .style-profile-accent-image-inner { background-image: url(/fe/lol-profiles/mastery_level3.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level4 .style-profile-champion-icon-accent-layer-inner .style-profile-accent-image-inner { background-image: url(/fe/lol-profiles/mastery_level4.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level5 .style-profile-champion-icon-accent-layer-inner .style-profile-accent-image-inner { background-image: url(/fe/lol-profiles/mastery_level5.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level6 .style-profile-champion-icon-accent-layer-inner .style-profile-accent-image-inner { background-image: url(/fe/lol-profiles/mastery_level6.png); } .style-profile-champion-icon-inner-container .style-profile-champion-icon-inner.level7 .style-profile-champion-icon-accent-layer-inner .style-profile-accent-image-inner { background-image: url(/fe/lol-profiles/mastery_level7.png); } .style-profile-champion-mastery-tooltip-inner { position: absolute; bottom: 40px; height: 80px; width: 100%; min-width: 0px; padding: 0px; display: flex; justify-content: center; white-space: normal; --champion-mastery-tooltip-name-text-align: center; --champion-mastery-tooltip-name-width: 100%; --champion-mastery-tooltip-name-font-size: 12px; --champion-mastery-tooltip-name-line-height: 16px; --champion-mastery-tooltip-name-letter-spacing: 0.075em; --champion-mastery-tooltip-separator-display: block; --champion-mastery-tooltip-separator-width: 80px; --champion-mastery-tooltip-separator-margin: 3px auto 5px auto; --champion-mastery-tooltip-separator-background-color: transparent; --champion-mastery-tooltip-separator-background-size: 100% 1px; --champion-mastery-tooltip-mastery-justify-content: center; --champion-mastery-tooltip-mastery-flex-direction: row; --champion-mastery-tooltip-mastery-flex-wrap: nowrap; --champion-mastery-tooltip-mastery-score-padding: 0 0 0 23px; --champion-mastery-tooltip-mastery-score-padding-rtl: 0 23px 0 0; --champion-mastery-tooltip-mastery-score-before-right: auto; --champion-mastery-tooltip-mastery-title-display: none; --champion-mastery-tooltip-detail-text-align: center; --champion-mastery-tooltip-detail-direction: rtl; } .style-profile-champion-mastery-tooltip-inner .style-profile-champion-mastery-tooltip-inner-grade { min-height: 15px; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle { font-family: var(--font-display); } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle { -webkit-user-select: none; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle { text-transform: uppercase; } .style-profile-emblem-header-title:lang(ko-kr), .style-profile-emblem-header-subtitle:lang(ko-kr), .style-profile-emblem-header-title:lang(ja-jp), .style-profile-emblem-header-subtitle:lang(ja-jp), .style-profile-emblem-header-title:lang(tr-tr), .style-profile-emblem-header-subtitle:lang(tr-tr), .style-profile-emblem-header-title:lang(el-gr), .style-profile-emblem-header-subtitle:lang(el-gr), .style-profile-emblem-header-title:lang(th-th), .style-profile-emblem-header-subtitle:lang(th-th), .style-profile-emblem-header-title:lang(zh-tw), .style-profile-emblem-header-subtitle:lang(zh-tw) { text-transform: none; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .style-profile-emblem-header-title:lang(ja-jp), .style-profile-emblem-header-subtitle:lang(ja-jp) { font-size: 13px; } .style-profile-emblem-header-title:lang(ar-ae), .style-profile-emblem-header-subtitle:lang(ar-ae) { letter-spacing: 0; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle { color: #a09b8c; } .rcp-fe-lol-profiles-main { position: relative; cursor: default; width: 100%; height: 100%; } .rcp-fe-lol-profiles-modal { position: relative; cursor: default; width: 100%; height: 100%; } .style-profile-sub-nav { top: 79px; left: 35px; position: absolute; border: 0; margin: 0; padding: 0; -webkit-user-select: none; } .style-profile-sub-nav lol-uikit-navigation-item { margin-top: 9px; } div.rcp-fe-lol-profiles-modal .style-profile-sub-nav { top: 0; left: 290px; } .style-profile-emblem-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; background-size: contain; background-image: url(/fe/lol-profiles/Profile_Emblem_BG.png); background-repeat: no-repeat; } .style-profile-emblem-wrapper:hover { background-image: url(/fe/lol-profiles/Profile_Emblem_Hover.png); } .style-profile-emblem-header { width: 100%; min-height: 50px; display: flex; flex-direction: column; align-items: center; height: fit-content; flex-shrink: 0; margin-top: 10px; } .style-profile-emblem-header-title { overflow: hidden; white-space: normal; text-align: center; flex-shrink: 0; color: #cdbe91; margin-bottom: 2px; direction: rtl; } .style-profile-emblem-header-subtitle { font-size: 10px; line-height: 14px; color: #f0e6d2; overflow: hidden; white-space: normal; text-align: center; flex-shrink: 0; } .style-profile-emblem-wrapper:hover .style-profile-emblem-header-title { color: #f0e6d2; } .style-profile-emblem-content-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; position: relative; } .style-profile-emblem-content-container .style-profile-emblem-content { width: 100%; height: 100%; } .style-profile-trophy-component { width: 100%; height: 100%; } .style-profile-trophy-component .style-profile-trophy-container { position: relative; width: 100%; height: 100%; margin-top: 5px; } .style-profile-trophy-component .style-profile-trophy-pedestal, .style-profile-trophy-component .style-profile-trophy-cupgem { position: absolute; left: 50%; transform: translateX(-50%); } .style-profile-trophy-component .style-profile-trophy-pedestal { top: 99px; width: 70px; } .style-profile-trophy-component .style-profile-trophy-cupgem { height: 126px; } .style-profile-trophy-component .style-profile-trophy-empty { width: 100%; height: 100%; background-color: transparent; background-size: contain; background-position-y: 2px; background-image: url(/fe/lol-profiles/Trophy_Empty.png); background-repeat: no-repeat; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-theme, .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-level { font-family: var(--font-display); } .style-profile-clash-banner-tooltip-details-group { font-family: var(--font-body); } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .style-profile-clash-banner-tooltip-details-group, .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-theme, .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-level { -webkit-user-select: none; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .style-profile-clash-banner-tooltip-details-group, .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-theme, .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-level { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-theme, .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-level { text-transform: uppercase; } .style-profile-emblem-header-title:lang(ko-kr), .style-profile-emblem-header-subtitle:lang(ko-kr), .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-theme:lang(ko-kr), .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-level:lang(ko-kr), .style-profile-emblem-header-title:lang(ja-jp), .style-profile-emblem-header-subtitle:lang(ja-jp), .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-theme:lang(ja-jp), .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-level:lang(ja-jp), .style-profile-emblem-header-title:lang(tr-tr), .style-profile-emblem-header-subtitle:lang(tr-tr), .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-theme:lang(tr-tr), .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-level:lang(tr-tr), .style-profile-emblem-header-title:lang(el-gr), .style-profile-emblem-header-subtitle:lang(el-gr), .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-theme:lang(el-gr), .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-level:lang(el-gr), .style-profile-emblem-header-title:lang(th-th), .style-profile-emblem-header-subtitle:lang(th-th), .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-theme:lang(th-th), .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-level:lang(th-th), .style-profile-emblem-header-title:lang(zh-tw), .style-profile-emblem-header-subtitle:lang(zh-tw), .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-theme:lang(zh-tw), .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-level:lang(zh-tw) { text-transform: none; } .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-theme { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-theme:lang(ar-ae) { letter-spacing: 0; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-level { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .style-profile-emblem-header-title:lang(ja-jp), .style-profile-emblem-header-subtitle:lang(ja-jp), .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-level:lang(ja-jp) { font-size: 13px; } .style-profile-emblem-header-title:lang(ar-ae), .style-profile-emblem-header-subtitle:lang(ar-ae), .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-level:lang(ar-ae) { letter-spacing: 0; } .style-profile-emblem-header-title, .style-profile-emblem-header-subtitle, .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-details-level { color: #a09b8c; } .style-profile-clash-banner-tooltip-details-group { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .style-profile-clash-banner-tooltip-details-group:lang(ja-jp) { font-size: 13px; } .style-profile-clash-banner-tooltip-details-group:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-profiles-main { position: relative; cursor: default; width: 100%; height: 100%; } .rcp-fe-lol-profiles-modal { position: relative; cursor: default; width: 100%; height: 100%; } .style-profile-sub-nav { top: 79px; left: 35px; position: absolute; border: 0; margin: 0; padding: 0; -webkit-user-select: none; } .style-profile-sub-nav lol-uikit-navigation-item { margin-top: 9px; } div.rcp-fe-lol-profiles-modal .style-profile-sub-nav { top: 0; left: 290px; } .style-profile-emblem-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; background-size: contain; background-image: url(/fe/lol-profiles/Profile_Emblem_BG.png); background-repeat: no-repeat; } .style-profile-emblem-wrapper:hover { background-image: url(/fe/lol-profiles/Profile_Emblem_Hover.png); } .style-profile-emblem-header { width: 100%; min-height: 50px; display: flex; flex-direction: column; align-items: center; height: fit-content; flex-shrink: 0; margin-top: 10px; } .style-profile-emblem-header-title { overflow: hidden; white-space: normal; text-align: center; flex-shrink: 0; color: #cdbe91; margin-bottom: 2px; direction: rtl; } .style-profile-emblem-header-subtitle { font-size: 10px; line-height: 14px; color: #f0e6d2; overflow: hidden; white-space: normal; text-align: center; flex-shrink: 0; } .style-profile-emblem-wrapper:hover .style-profile-emblem-header-title { color: #f0e6d2; } .style-profile-emblem-content-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; position: relative; } .style-profile-emblem-content-container .style-profile-emblem-content { width: 100%; height: 100%; } .style-profile-clash-banner-component { width: 100%; height: 100%; } .style-profile-clash-banner-component.clickable { cursor: pointer; } .style-profile-clash-banner-component .style-profile-emblem-content { position: relative; } .style-profile-clash-banner-component .style-profile-clash-banner-image { width: 60px; margin-top: 30px; position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; } .style-profile-clash-banner-component .style-profile-clash-banner-frame { width: 90px; margin-top: 13px; position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; } .style-profile-clash-banner-component .style-profile-clash-banner-picker-preloader { display: none; background-image: url(/fe/lol-profiles/Edit_Disabled.png), url(/fe/lol-profiles/Edit_Hover.png), url(/fe/lol-profiles/Edit_Click.png); } .style-profile-clash-banner-component .style-profile-clash-banner-picker-button { width: 64px; height: 64px; position: absolute; top: 50px; left: 50%; transform: translate(-50%, -50%); background-size: contain; background-repeat: no-repeat; } .style-profile-clash-banner-component.pick-disabled:hover .style-profile-clash-banner-picker-button { background-image: url(/fe/lol-profiles/Edit_Disabled.png); } .style-profile-clash-banner-component.clickable:hover .style-profile-clash-banner-picker-button { background-image: url(/fe/lol-profiles/Edit_Hover.png); } .style-profile-clash-banner-component.clickable:active .style-profile-clash-banner-picker-button { background-image: url(/fe/lol-profiles/Edit_Click.png); } .style-profile-clash-banner-component .style-profile-clash-banner-empty { width: 100%; height: 100%; background-size: contain; background-image: url(/fe/lol-profiles/Banner_Empty.png); background-repeat: no-repeat; } .style-profile-clash-banner-tooltip-details-group { text-align: center; } .style-profile-clash-banner-tooltip-details-group .style-profile-clash-banner-tooltip-call-to-action-separator { margin-top: 1em; margin-bottom: 1em; } .style-profile-eternals-component .profile-eternals-value { font-family: var(--font-display); } .style-profile-eternals-component .profile-eternals-name { font-family: var(--font-body); } .style-profile-eternals-component .profile-eternals-value, .style-profile-eternals-component .profile-eternals-name { -webkit-user-select: none; } .style-profile-eternals-component .profile-eternals-value, .style-profile-eternals-component .profile-eternals-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-eternals-component .profile-eternals-value { text-transform: uppercase; } .style-profile-eternals-component .profile-eternals-value:lang(ko-kr), .style-profile-eternals-component .profile-eternals-value:lang(ja-jp), .style-profile-eternals-component .profile-eternals-value:lang(tr-tr), .style-profile-eternals-component .profile-eternals-value:lang(el-gr), .style-profile-eternals-component .profile-eternals-value:lang(th-th), .style-profile-eternals-component .profile-eternals-value:lang(zh-tw) { text-transform: none; } .style-profile-eternals-component .profile-eternals-value { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .style-profile-eternals-component .profile-eternals-value:lang(ar-ae) { letter-spacing: 0; } .style-profile-eternals-component .profile-eternals-name { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .style-profile-eternals-component .profile-eternals-name:lang(ja-jp) { font-size: 13px; } .style-profile-eternals-component .profile-eternals-name:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-profiles-main { position: relative; cursor: default; width: 100%; height: 100%; } .rcp-fe-lol-profiles-modal { position: relative; cursor: default; width: 100%; height: 100%; } .style-profile-sub-nav { top: 79px; left: 35px; position: absolute; border: 0; margin: 0; padding: 0; -webkit-user-select: none; } .style-profile-sub-nav lol-uikit-navigation-item { margin-top: 9px; } div.rcp-fe-lol-profiles-modal .style-profile-sub-nav { top: 0; left: 290px; } .style-profile-eternals-component { display: flex; position: relative; align-items: center; justify-content: center; flex-direction: column; width: 120px; height: 100%; padding-bottom: 10px; } .style-profile-eternals-component.primary { order: 1; } .style-profile-eternals-component.secondary { order: 0; } .style-profile-eternals-component.tertiary { order: 2; } .style-profile-eternals-component .profile-eternals-image { width: 100px; height: 100px; padding-bottom: 8px; background-position: center; background-repeat: no-repeat; } .style-profile-eternals-component .profile-eternals-image.primary { background-size: contain; } .style-profile-eternals-component .profile-eternals-image.secondary, .style-profile-eternals-component .profile-eternals-image.tertiary { background-size: 80px, 80px; background-position-y: 18px; } .style-profile-eternals-component .profile-eternals-value { text-align: center; text-transform: none; } .style-profile-eternals-component .profile-eternals-name { text-align: center; min-height: 50px; } .style-profile-eternals-component .profile-eternals-champion { position: relative; height: 30px; } .style-profile-eternals-component .profile-eternals-champion .profile-eternals-champion-framing { background-image: url(/fe/lol-profiles/hextech-framing.png); width: 88px; height: 6px; background-size: contain; background-repeat: no-repeat; } .style-profile-eternals-component .profile-eternals-champion .profile-eternals-champion-icon { position: absolute; top: -5px; left: 27px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #785a28; } .style-profile-boosts-component .style-profile-perks-icon, .style-profile-reroll-tooltip .style-profile-small-progress-radial-container h5, .style-profile-reroll-tooltip h6 { font-family: var(--font-display); } .style-profile-reroll-tooltip p { font-family: var(--font-body); } .style-profile-boosts-component .style-profile-perks-icon, .style-profile-reroll-tooltip .style-profile-small-progress-radial-container h5, .style-profile-reroll-tooltip p, .style-profile-reroll-tooltip h6 { -webkit-user-select: none; } .style-profile-boosts-component .style-profile-perks-icon, .style-profile-reroll-tooltip .style-profile-small-progress-radial-container h5, .style-profile-reroll-tooltip p, .style-profile-reroll-tooltip h6 { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-boosts-component .style-profile-perks-icon, .style-profile-reroll-tooltip .style-profile-small-progress-radial-container h5, .style-profile-reroll-tooltip h6 { text-transform: uppercase; } .style-profile-boosts-component .style-profile-perks-icon:lang(ko-kr), .style-profile-reroll-tooltip .style-profile-small-progress-radial-container h5:lang(ko-kr), .style-profile-reroll-tooltip h6:lang(ko-kr), .style-profile-boosts-component .style-profile-perks-icon:lang(ja-jp), .style-profile-reroll-tooltip .style-profile-small-progress-radial-container h5:lang(ja-jp), .style-profile-reroll-tooltip h6:lang(ja-jp), .style-profile-boosts-component .style-profile-perks-icon:lang(tr-tr), .style-profile-reroll-tooltip .style-profile-small-progress-radial-container h5:lang(tr-tr), .style-profile-reroll-tooltip h6:lang(tr-tr), .style-profile-boosts-component .style-profile-perks-icon:lang(el-gr), .style-profile-reroll-tooltip .style-profile-small-progress-radial-container h5:lang(el-gr), .style-profile-reroll-tooltip h6:lang(el-gr), .style-profile-boosts-component .style-profile-perks-icon:lang(th-th), .style-profile-reroll-tooltip .style-profile-small-progress-radial-container h5:lang(th-th), .style-profile-reroll-tooltip h6:lang(th-th), .style-profile-boosts-component .style-profile-perks-icon:lang(zh-tw), .style-profile-reroll-tooltip .style-profile-small-progress-radial-container h5:lang(zh-tw), .style-profile-reroll-tooltip h6:lang(zh-tw) { text-transform: none; } .style-profile-reroll-tooltip .style-profile-small-progress-radial-container h5 { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .style-profile-reroll-tooltip .style-profile-small-progress-radial-container h5:lang(ar-ae) { letter-spacing: 0; } .style-profile-boosts-component .style-profile-perks-icon, .style-profile-reroll-tooltip h6 { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .style-profile-boosts-component .style-profile-perks-icon:lang(ja-jp), .style-profile-reroll-tooltip h6:lang(ja-jp) { font-size: 13px; } .style-profile-boosts-component .style-profile-perks-icon:lang(ar-ae), .style-profile-reroll-tooltip h6:lang(ar-ae) { letter-spacing: 0; } .style-profile-boosts-component .style-profile-perks-icon { color: #a09b8c; } .style-profile-reroll-tooltip p { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .style-profile-reroll-tooltip p:lang(ja-jp) { font-size: 13px; } .style-profile-reroll-tooltip p:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-profiles-main { position: relative; cursor: default; width: 100%; height: 100%; } .rcp-fe-lol-profiles-modal { position: relative; cursor: default; width: 100%; height: 100%; } .style-profile-sub-nav { top: 79px; left: 35px; position: absolute; border: 0; margin: 0; padding: 0; -webkit-user-select: none; } .style-profile-sub-nav lol-uikit-navigation-item { margin-top: 9px; } div.rcp-fe-lol-profiles-modal .style-profile-sub-nav { top: 0; left: 290px; } .style-profile-boosts-component { display: flex; } .style-profile-boosts-component .style-profile-perks-icon { min-width: 32px; height: 41px; box-sizing: border-box; padding-top: 28px; margin: auto 2px; text-align: center; } .style-profile-boosts-component .style-profile-perks-icon .style-profile-val { position: absolute; width: 34px; margin-top: -3px; margin-left: -16px; } .style-profile-boosts-component .style-profile-perks-icon.style-profile-reroll { background: url(/fe/lol-profiles/perks_reroll.png) no-repeat top center; background-size: 24px; } .style-profile-boosts-component .style-profile-perks-icon.style-profile-reroll.disabled { background: url(/fe/lol-profiles/perks_reroll_disabled.png) no-repeat top center; background-size: 24px; } .style-profile-boosts-component .style-profile-perks-icon.style-profile-boost { background: url(/fe/lol-profiles/perks_boost.png) no-repeat top center; background-size: 24px; } .style-profile-boosts-component .style-profile-perks-icon.style-profile-boost.disabled { background: url(/fe/lol-profiles/perks_boost_disabled.png) no-repeat top center; background-size: 24px; } .style-profile-boosts-component .style-profile-perks-icon.style-profile-chests { background: url(/fe/lol-profiles/perks_chest.png) no-repeat top center; background-size: 28px; background-position-y: -1px; } .style-profile-boosts-component .style-profile-perks-icon.style-profile-chests.disabled { background: url(/fe/lol-profiles/perks_chest_disabled.png) no-repeat top center; background-size: 28px; background-position-y: -1px; } .style-profile-boosts-component .style-profile-perks-icon.style-profile-chests.tencent { background: url(/fe/lol-profiles/perks_core.png) no-repeat top center; background-size: 28px; background-position-y: -1px; } .style-profile-boosts-component .style-profile-perks-icon.style-profile-chests.tencent.disabled { background: url(/fe/lol-profiles/perks_core_disabled.png) no-repeat top center; background-size: 28px; background-position-y: -1px; } .style-profile-boosts-tooltip .style-profile-boosts-tooltip-title.left { text-align: left; } .style-profile-boosts-tooltip .lol-typekit-label, .style-profile-boosts-tooltip .lol-typekit-value { white-space: nowrap; } .style-profile-reroll-tooltip { direction: rtl; box-sizing: border-box; padding: 12px 18px 12px 12px; min-width: 166px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; } .style-profile-reroll-tooltip .style-profile-small-progress-radial-container { position: relative; width: 34px; height: 34px; padding: 0 0 0 12px; } .style-profile-reroll-tooltip .style-profile-small-progress-radial-container lol-uikit-radial-progress { width: 34px; height: 34px; } .style-profile-reroll-tooltip .style-profile-small-progress-radial-container .top { height: 100%; } .style-profile-reroll-tooltip .style-profile-small-progress-radial-container h5 { position: relative; top: 50%; transform: translateY(-50%); text-align: center; margin: 0; padding-left: 1px; padding-bottom: 1px; } .style-profile-reroll-tooltip .style-profile-small-progress-radial-desc { flex-grow: 1; } .style-profile-reroll-tooltip p { flex-grow: 1; margin: 0; white-space: nowrap; } .style-profile-reroll-tooltip h6 { margin: 0; white-space: nowrap; } .style-profile-eos { display: inline-block; height: 44px; min-width: 32px; background: url(/fe/lol-profiles/eos_icon.png) no-repeat top center; background-size: contain; } .style-profile-eos-tooltip-title, .style-profile-eos-queue-title { font-family: var(--font-display); } .style-profile-eos-tooltip-subtitle, .style-profile-eos-tooltip-text, .style-profile-eos-queue-reward-name, .style-profile-eos-queue-subtitle { font-family: var(--font-body); } .style-profile-eos-tooltip-title, .style-profile-eos-tooltip-subtitle, .style-profile-eos-tooltip-text, .style-profile-eos-queue-reward-name, .style-profile-eos-queue-title, .style-profile-eos-queue-subtitle { -webkit-user-select: none; } .style-profile-eos-tooltip-title, .style-profile-eos-tooltip-subtitle, .style-profile-eos-tooltip-text, .style-profile-eos-queue-reward-name, .style-profile-eos-queue-title, .style-profile-eos-queue-subtitle { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-eos-tooltip-title, .style-profile-eos-queue-title { text-transform: uppercase; } .style-profile-eos-tooltip-title:lang(ko-kr), .style-profile-eos-queue-title:lang(ko-kr), .style-profile-eos-tooltip-title:lang(ja-jp), .style-profile-eos-queue-title:lang(ja-jp), .style-profile-eos-tooltip-title:lang(tr-tr), .style-profile-eos-queue-title:lang(tr-tr), .style-profile-eos-tooltip-title:lang(el-gr), .style-profile-eos-queue-title:lang(el-gr), .style-profile-eos-tooltip-title:lang(th-th), .style-profile-eos-queue-title:lang(th-th), .style-profile-eos-tooltip-title:lang(zh-tw), .style-profile-eos-queue-title:lang(zh-tw) { text-transform: none; } .style-profile-eos-queue-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .style-profile-eos-queue-title:lang(ar-ae) { letter-spacing: 0; } .style-profile-eos-tooltip-title { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .style-profile-eos-tooltip-title:lang(ja-jp) { font-size: 13px; } .style-profile-eos-tooltip-title:lang(ar-ae) { letter-spacing: 0; } .style-profile-eos-tooltip-subtitle, .style-profile-eos-tooltip-text, .style-profile-eos-queue-reward-name, .style-profile-eos-queue-subtitle { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .style-profile-eos-tooltip-subtitle:lang(ja-jp), .style-profile-eos-tooltip-text:lang(ja-jp), .style-profile-eos-queue-reward-name:lang(ja-jp), .style-profile-eos-queue-subtitle:lang(ja-jp) { font-size: 13px; } .style-profile-eos-tooltip-subtitle:lang(ar-ae), .style-profile-eos-tooltip-text:lang(ar-ae), .style-profile-eos-queue-reward-name:lang(ar-ae), .style-profile-eos-queue-subtitle:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-profiles-main { position: relative; cursor: default; width: 100%; height: 100%; } .rcp-fe-lol-profiles-modal { position: relative; cursor: default; width: 100%; height: 100%; } .style-profile-sub-nav { top: 79px; left: 35px; position: absolute; border: 0; margin: 0; padding: 0; -webkit-user-select: none; } .style-profile-sub-nav lol-uikit-navigation-item { margin-top: 9px; } div.rcp-fe-lol-profiles-modal .style-profile-sub-nav { top: 0; left: 290px; } #eosTooltip { box-sizing: border-box; padding: 0; min-width: 400px; min-height: 253px; justify-content: center; align-items: center; display: block; } .style-profile-eos-tooltip-title { color: #f0e6d2; display: block; text-align: center; padding-top: 17px; padding-bottom: 3px; margin: 0px; } .style-profile-eos-tooltip-subtitle { color: #a09b8c; display: block; text-align: center; padding-top: 3px; padding-bottom: 1px; } .style-profile-eos-tooltip-text { color: #785a28; display: block; text-align: center; padding-top: 1px; padding-bottom: 14px; } .style-profile-eos-tooltip-status, .style-profile-eos-tooltip-checkmark, .style-profile-eos-tooltip-warning { position: absolute; top: 35px; right: 20px; width: 18px; height: 18px; } .style-profile-eos-tooltip-checkmark { background: url(/fe/lol-profiles/Status_Checkmark.png) no-repeat top center; background-size: 18px; } .style-profile-eos-tooltip-warning { background: url(/fe/lol-profiles/Status_Warning.png) no-repeat top center; background-size: 18px; } .style-profile-eos-queues { border-width: 0px; border-top-width: 1px; border-image: linear-gradient(to top, #614a1f 0, #463714 5px, #463714 100%) 1 stretch; border-top-color: #785a28; border-top-style: solid; padding: 4px; display: flex; justify-content: center; } .style-profile-eos-queue { margin-top: 10px; margin-left: 5px; margin-right: 5px; } .style-profile-eos-queue:first-child { margin-left: 10px; } .style-profile-eos-queue:last-child { margin-right: 10px; } .style-profile-eos-queue-lock, .style-profile-eos-queue-lock-restricted, .style-profile-eos-queue-lock-ineligible { position: absolute; margin: auto; left: 0; right: 0; top: 30px; height: 80px; } .style-profile-eos-queue-lock-restricted { background: url(/fe/lol-profiles/Restricted.png) no-repeat top center; background-size: 80px; } .style-profile-eos-queue-lock-ineligible { background: url(/fe/lol-profiles/Ineligible.png) no-repeat top center; background-size: 80px; } .style-profile-eos-queue-image-container { position: relative; width: 130px; } .style-profile-eos-queue-image-container.dark { opacity: 0.8; } .style-profile-eos-queue-image { max-width: 100%; height: auto; } .style-profile-eos-queue-image-placeholder1 { height: 120px; background: url(/fe/lol-profiles/eos_reward_placeholder1.png) no-repeat top center; background-size: contain; padding: 10px; } .style-profile-eos-queue-image-placeholder2 { height: 120px; background: url(/fe/lol-profiles/eos_reward_placeholder2.png) no-repeat top center; background-size: contain; padding: 10px; } .style-profile-eos-queue-reward-name { color: #5b5a56; text-align: center; margin-bottom: 30px; } .style-profile-eos-queue-title { display: block; text-align: center; position: relative; top: -20px; overflow: auto; width: 129px; color: #cdbe91; } .style-profile-eos-queue-title.eligible { color: #f0e6d2; } .style-profile-eos-queue-title.insufficient { color: #cdbe91; } .style-profile-eos-queue-title.restricted { color: #5b5a56; } .style-profile-eos-queue-subtitle { display: block; text-align: center; position: relative; top: -14px; color: #5b5a56; } .style-profile-eos-queue-subtitle.eligible { color: #c89b3c; } .ranked-reference-modal-question-mark { height: 18px; width: 18px; cursor: pointer; } .ranked-reference-modal-component .title-text, .ranked-reference-modal-component .summary-body .summary-title, .ranked-reference-modal-component .visual_caption_division, .ranked-reference-modal-component .visual_caption, .ranked-reference-modal-component .carousel-item-container .rank-tier-title-text, .ranked-reference-modal-component .carousel-item-container .apex-lp-text, .ranked-reference-modal-component .carousel-item-container .reward-title, .ranked-reference-modal-component .carousel-item-container .current-rank-overlay .current-rank-text { font-family: var(--font-display); } .ranked-reference-modal-component .summary-body .summary-content, .ranked-reference-modal-component .summary-body .provisional-warning-text, .ranked-reference-modal-component .carousel-item-container .reward-text-line, .ranked-reference-modal-component .carousel-item-container .more-rewards-text { font-family: var(--font-body); } .ranked-reference-modal-component .title-text, .ranked-reference-modal-component .summary-body .summary-title, .ranked-reference-modal-component .summary-body .summary-content, .ranked-reference-modal-component .summary-body .provisional-warning-text, .ranked-reference-modal-component .visual_caption_division, .ranked-reference-modal-component .visual_caption, .ranked-reference-modal-component .carousel-item-container .rank-tier-title-text, .ranked-reference-modal-component .carousel-item-container .apex-lp-text, .ranked-reference-modal-component .carousel-item-container .reward-title, .ranked-reference-modal-component .carousel-item-container .reward-text-line, .ranked-reference-modal-component .carousel-item-container .more-rewards-text, .ranked-reference-modal-component .carousel-item-container .current-rank-overlay .current-rank-text { -webkit-user-select: none; } .ranked-reference-modal-component .title-text, .ranked-reference-modal-component .summary-body .summary-title, .ranked-reference-modal-component .summary-body .summary-content, .ranked-reference-modal-component .summary-body .provisional-warning-text, .ranked-reference-modal-component .visual_caption_division, .ranked-reference-modal-component .visual_caption, .ranked-reference-modal-component .carousel-item-container .rank-tier-title-text, .ranked-reference-modal-component .carousel-item-container .apex-lp-text, .ranked-reference-modal-component .carousel-item-container .reward-title, .ranked-reference-modal-component .carousel-item-container .reward-text-line, .ranked-reference-modal-component .carousel-item-container .more-rewards-text, .ranked-reference-modal-component .carousel-item-container .current-rank-overlay .current-rank-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .ranked-reference-modal-component .title-text, .ranked-reference-modal-component .summary-body .summary-title, .ranked-reference-modal-component .visual_caption_division, .ranked-reference-modal-component .visual_caption, .ranked-reference-modal-component .carousel-item-container .rank-tier-title-text, .ranked-reference-modal-component .carousel-item-container .apex-lp-text, .ranked-reference-modal-component .carousel-item-container .reward-title, .ranked-reference-modal-component .carousel-item-container .current-rank-overlay .current-rank-text { text-transform: uppercase; } .ranked-reference-modal-component .title-text:lang(ko-kr), .ranked-reference-modal-component .summary-body .summary-title:lang(ko-kr), .ranked-reference-modal-component .visual_caption_division:lang(ko-kr), .ranked-reference-modal-component .visual_caption:lang(ko-kr), .ranked-reference-modal-component .carousel-item-container .rank-tier-title-text:lang(ko-kr), .ranked-reference-modal-component .carousel-item-container .apex-lp-text:lang(ko-kr), .ranked-reference-modal-component .carousel-item-container .reward-title:lang(ko-kr), .ranked-reference-modal-component .carousel-item-container .current-rank-overlay .current-rank-text:lang(ko-kr), .ranked-reference-modal-component .title-text:lang(ja-jp), .ranked-reference-modal-component .summary-body .summary-title:lang(ja-jp), .ranked-reference-modal-component .visual_caption_division:lang(ja-jp), .ranked-reference-modal-component .visual_caption:lang(ja-jp), .ranked-reference-modal-component .carousel-item-container .rank-tier-title-text:lang(ja-jp), .ranked-reference-modal-component .carousel-item-container .apex-lp-text:lang(ja-jp), .ranked-reference-modal-component .carousel-item-container .reward-title:lang(ja-jp), .ranked-reference-modal-component .carousel-item-container .current-rank-overlay .current-rank-text:lang(ja-jp), .ranked-reference-modal-component .title-text:lang(tr-tr), .ranked-reference-modal-component .summary-body .summary-title:lang(tr-tr), .ranked-reference-modal-component .visual_caption_division:lang(tr-tr), .ranked-reference-modal-component .visual_caption:lang(tr-tr), .ranked-reference-modal-component .carousel-item-container .rank-tier-title-text:lang(tr-tr), .ranked-reference-modal-component .carousel-item-container .apex-lp-text:lang(tr-tr), .ranked-reference-modal-component .carousel-item-container .reward-title:lang(tr-tr), .ranked-reference-modal-component .carousel-item-container .current-rank-overlay .current-rank-text:lang(tr-tr), .ranked-reference-modal-component .title-text:lang(el-gr), .ranked-reference-modal-component .summary-body .summary-title:lang(el-gr), .ranked-reference-modal-component .visual_caption_division:lang(el-gr), .ranked-reference-modal-component .visual_caption:lang(el-gr), .ranked-reference-modal-component .carousel-item-container .rank-tier-title-text:lang(el-gr), .ranked-reference-modal-component .carousel-item-container .apex-lp-text:lang(el-gr), .ranked-reference-modal-component .carousel-item-container .reward-title:lang(el-gr), .ranked-reference-modal-component .carousel-item-container .current-rank-overlay .current-rank-text:lang(el-gr), .ranked-reference-modal-component .title-text:lang(th-th), .ranked-reference-modal-component .summary-body .summary-title:lang(th-th), .ranked-reference-modal-component .visual_caption_division:lang(th-th), .ranked-reference-modal-component .visual_caption:lang(th-th), .ranked-reference-modal-component .carousel-item-container .rank-tier-title-text:lang(th-th), .ranked-reference-modal-component .carousel-item-container .apex-lp-text:lang(th-th), .ranked-reference-modal-component .carousel-item-container .reward-title:lang(th-th), .ranked-reference-modal-component .carousel-item-container .current-rank-overlay .current-rank-text:lang(th-th), .ranked-reference-modal-component .title-text:lang(zh-tw), .ranked-reference-modal-component .summary-body .summary-title:lang(zh-tw), .ranked-reference-modal-component .visual_caption_division:lang(zh-tw), .ranked-reference-modal-component .visual_caption:lang(zh-tw), .ranked-reference-modal-component .carousel-item-container .rank-tier-title-text:lang(zh-tw), .ranked-reference-modal-component .carousel-item-container .apex-lp-text:lang(zh-tw), .ranked-reference-modal-component .carousel-item-container .reward-title:lang(zh-tw), .ranked-reference-modal-component .carousel-item-container .current-rank-overlay .current-rank-text:lang(zh-tw) { text-transform: none; } .ranked-reference-modal-component .title-text, .ranked-reference-modal-component .summary-body .summary-title, .ranked-reference-modal-component .carousel-item-container .rank-tier-title-text, .ranked-reference-modal-component .carousel-item-container .apex-lp-text, .ranked-reference-modal-component .carousel-item-container .reward-title, .ranked-reference-modal-component .carousel-item-container .current-rank-overlay .current-rank-text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .ranked-reference-modal-component .title-text:lang(ar-ae), .ranked-reference-modal-component .summary-body .summary-title:lang(ar-ae), .ranked-reference-modal-component .carousel-item-container .rank-tier-title-text:lang(ar-ae), .ranked-reference-modal-component .carousel-item-container .apex-lp-text:lang(ar-ae), .ranked-reference-modal-component .carousel-item-container .reward-title:lang(ar-ae), .ranked-reference-modal-component .carousel-item-container .current-rank-overlay .current-rank-text:lang(ar-ae) { letter-spacing: 0; } .ranked-reference-modal-component .visual_caption_division, .ranked-reference-modal-component .visual_caption { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .ranked-reference-modal-component .visual_caption_division:lang(ja-jp), .ranked-reference-modal-component .visual_caption:lang(ja-jp) { font-size: 13px; } .ranked-reference-modal-component .visual_caption_division:lang(ar-ae), .ranked-reference-modal-component .visual_caption:lang(ar-ae) { letter-spacing: 0; } .ranked-reference-modal-component .summary-body .summary-content, .ranked-reference-modal-component .summary-body .provisional-warning-text, .ranked-reference-modal-component .carousel-item-container .reward-text-line, .ranked-reference-modal-component .carousel-item-container .more-rewards-text { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .ranked-reference-modal-component .summary-body .summary-content:lang(ar-ae), .ranked-reference-modal-component .summary-body .provisional-warning-text:lang(ar-ae), .ranked-reference-modal-component .carousel-item-container .reward-text-line:lang(ar-ae), .ranked-reference-modal-component .carousel-item-container .more-rewards-text:lang(ar-ae) { letter-spacing: 0; } .ranked-reference-modal-component .title-text, .ranked-reference-modal-component .summary-body .summary-title, .ranked-reference-modal-component .visual_caption_division, .ranked-reference-modal-component .visual_caption, .ranked-reference-modal-component .carousel-item-container .rank-tier-title-text, .ranked-reference-modal-component .carousel-item-container .apex-lp-text, .ranked-reference-modal-component .carousel-item-container .reward-title, .ranked-reference-modal-component .carousel-item-container .current-rank-overlay .current-rank-text { font-family: var(--font-display); } .ranked-reference-modal-component .summary-body .summary-content, .ranked-reference-modal-component .summary-body .provisional-warning-text, .ranked-reference-modal-component .carousel-item-container .reward-text-line, .ranked-reference-modal-component .carousel-item-container .more-rewards-text { font-family: var(--font-body); } .rcp-fe-lol-profiles-main { position: relative; cursor: default; width: 100%; height: 100%; } .rcp-fe-lol-profiles-modal { position: relative; cursor: default; width: 100%; height: 100%; } .style-profile-sub-nav { top: 79px; left: 35px; position: absolute; border: 0; margin: 0; padding: 0; -webkit-user-select: none; } .style-profile-sub-nav lol-uikit-navigation-item { margin-top: 9px; } div.rcp-fe-lol-profiles-modal .style-profile-sub-nav { top: 0; left: 290px; } .ranked-reference-modal-component .ranked-reference-modal-container { background-color: #010a13; position: relative; width: 916px; height: 646px; } .ranked-reference-modal-component .ranked-reference-modal-background { position: absolute; width: 100%; height: 100%; top: 0px; background-image: url("/fe/lol-static-assets/images/ranked-reference-modal-background-bottom.png"), url("/fe/lol-static-assets/images/ranked-reference-modal-background-top.png"); background-repeat: no-repeat; background-size: contain; } .ranked-reference-modal-component .title-container { position: relative; height: 80px; width: 100%; display: flex; justify-content: center; align-items: center; } .ranked-reference-modal-component .title-text { font-size: 24px; text-align: center; text-transform: uppercase; color: #c8aa6e; letter-spacing: 0.02em; padding: 16px; } .ranked-reference-modal-component .title-wing-left, .ranked-reference-modal-component .title-wing-right { width: 220px; height: 10%; background-image: url("/fe/lol-static-assets/images/ranked-reference-modal-title-wing.png"); background-repeat: no-repeat; background-size: contain; } .ranked-reference-modal-component .title-wing-left { transform: scaleY(-1); } .ranked-reference-modal-component .title-wing-right { transform: rotate(180deg); } .ranked-reference-modal-component .summary-body { position: absolute; width: 418px; height: 164px; left: 35px; top: 80px; display: flex; flex-direction: column; align-items: start; justify-content: center; } .ranked-reference-modal-component .summary-body .summary-title { font-size: 18px; line-height: 24px; letter-spacing: 0.02em; text-transform: uppercase; color: #f0e6d2; padding-bottom: 8px; } .ranked-reference-modal-component .summary-body .summary-content { width: 398px; font-size: 14px; line-height: 24px; letter-spacing: 0.03em; color: $color_palette_gray1; padding-bottom: 8px; } .ranked-reference-modal-component .summary-body .provisional-warning-container { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .ranked-reference-modal-component .summary-body .provisional-warning-icon { width: 20px; height: 20px; background-image: url("/fe/lol-static-assets/images/warning_icon.svg"); background-repeat: no-repeat; pointer-events: none; padding-right: 5px; } .ranked-reference-modal-component .summary-body .provisional-warning-text { font-size: 12px; line-height: 24px; letter-spacing: 0.03em; color: #f0e6d2; } .ranked-reference-modal-component .visual { position: absolute; width: 414px; height: 164px; right: 27px; background-image: url("/fe/lol-static-assets/images/ranked-reference-modal-visual.png"); background-repeat: no-repeat; background-position: center bottom; background-size: cover; } .ranked-reference-modal-component .visual_caption_division, .ranked-reference-modal-component .visual_caption { line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: #a09b8c; text-align: center; font-size: 12px; } .ranked-reference-modal-component .visual_caption_division { position: absolute; width: 100%; height: 100%; font-size: 13px; padding-top: 30px; } .ranked-reference-modal-component .visual_caption { width: inherit; overflow-wrap: break-word; } .ranked-reference-modal-component .visual_content_container { display: flex; justify-content: space-between; align-items: center; height: 185px; } .ranked-reference-modal-component .visual_content_container .visual_tier { width: 187px; height: 154px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; background-repeat: no-repeat; background-position: center; background-size: contain; } .ranked-reference-modal-component .visual_content_container .visual_tier .visual_regalia_emblem_container { width: 70px; height: 70px; position: relative; } .ranked-reference-modal-component .visual_content_container .visual_tier .visual_regalia_emblem_container .visual_regalia_emblem_sizer { width: 100%; height: 100%; position: absolute; } .ranked-reference-modal-component .visual_content_container.rank-identity-override { height: 160px; } .ranked-reference-modal-component .visual_content_container.rank-identity-override .visual_tier { height: 150px; } .ranked-reference-modal-component .visual_content_container.rank-identity-override .visual_tier .visual_regalia_emblem_container { width: 110px; height: 110px; } .ranked-reference-modal-component .carousel-left-arrow-mask, .ranked-reference-modal-component .carousel-right-arrow-mask { position: absolute; top: 280px; width: 100px; height: 330px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("/fe/lol-static-assets/images/gradient_left.png"); pointer-events: none; } .ranked-reference-modal-component .carousel-left-arrow-mask.reveal, .ranked-reference-modal-component .carousel-right-arrow-mask.reveal { animation: toShow 0.6s forwards; pointer-events: auto; } .ranked-reference-modal-component .carousel-left-arrow-mask.hidden, .ranked-reference-modal-component .carousel-right-arrow-mask.hidden { animation: toDisappear 0.6s forwards; pointer-events: none; } @-moz-keyframes toShow { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes toShow { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes toShow { from { opacity: 0; } to { opacity: 1; } } @keyframes toShow { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes toDisappear { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes toDisappear { from { opacity: 1; } to { opacity: 0; } } @-o-keyframes toDisappear { from { opacity: 1; } to { opacity: 0; } } @keyframes toDisappear { from { opacity: 1; } to { opacity: 0; } } .ranked-reference-modal-component .carousel-right-arrow-mask { left: 815px; background-image: url("/fe/lol-static-assets/images/gradient_right.png"); } .ranked-reference-modal-component .carousel-left-arrow, .ranked-reference-modal-component .carousel-right-arrow { position: relative; width: 96px; height: 96px; left: -8px; top: 110px; background-image: url("/fe/lol-static-assets/images/left_arrow.png"); background-repeat: no-repeat; background-position: center; background-size: contain; } .ranked-reference-modal-component .carousel-left-arrow:after, .ranked-reference-modal-component .carousel-right-arrow:after { content: url("/fe/lol-static-assets/images/left_arrow_hover.png") url("/fe/lol-static-assets/images/left_arrow_pressed.png"); display: none; height: 0; width: 0; } .ranked-reference-modal-component .carousel-left-arrow:hover, .ranked-reference-modal-component .carousel-right-arrow:hover { background-image: url("/fe/lol-static-assets/images/left_arrow_hover.png"); } .ranked-reference-modal-component .carousel-left-arrow:active, .ranked-reference-modal-component .carousel-right-arrow:active { background-image: url("/fe/lol-static-assets/images/left_arrow_pressed.png"); } .ranked-reference-modal-component .carousel-right-arrow { left: 8px; top: 110px; transform: scaleX(-1); } .ranked-reference-modal-component .carousel-container { position: relative; width: 912px; height: 329px; padding-top: 210px; overflow: hidden; } .ranked-reference-modal-component .carousel-body { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin: 0px 10px; } .ranked-reference-modal-component .carousel-item-container { display: flex; align-items: center; justify-content: center; width: 216px; height: 305px; margin: 0px 10px; } .ranked-reference-modal-component .carousel-item-container .carousel-item-text-anchor { position: absolute; pointer-events: none; width: 216px; transition: top 0.75s ease; } .ranked-reference-modal-component .carousel-item-container .anchor-0 .carousel-item-text-anchor { top: 100px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-0 .carousel-item-text-anchor { top: 100px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-0 .reward-text-container .reward-text-container-bottom-half { opacity: 1; } .ranked-reference-modal-component .carousel-item-container .anchor-1 .carousel-item-text-anchor { top: 100px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-1 .carousel-item-text-anchor { top: 85px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-1 .reward-text-container .reward-text-container-bottom-half { opacity: 1; } .ranked-reference-modal-component .carousel-item-container .anchor-2 .carousel-item-text-anchor { top: 100px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-2 .carousel-item-text-anchor { top: 70px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-2 .reward-text-container .reward-text-container-bottom-half { opacity: 1; } .ranked-reference-modal-component .carousel-item-container .anchor-3 .carousel-item-text-anchor { top: 100px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-3 .carousel-item-text-anchor { top: 55px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-3 .reward-text-container .reward-text-container-bottom-half { opacity: 1; } .ranked-reference-modal-component .carousel-item-container .anchor-4 .carousel-item-text-anchor { top: 100px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-4 .carousel-item-text-anchor { top: 40px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-4 .reward-text-container .reward-text-container-bottom-half { opacity: 1; } .ranked-reference-modal-component .carousel-item-container .anchor-5 .carousel-item-text-anchor { top: 100px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-5 .carousel-item-text-anchor { top: 25px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-5 .reward-text-container .reward-text-container-bottom-half { opacity: 1; } .ranked-reference-modal-component .carousel-item-container .anchor-6 .carousel-item-text-anchor { top: 100px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-6 .carousel-item-text-anchor { top: 10px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-6 .reward-text-container .reward-text-container-bottom-half { opacity: 1; } .ranked-reference-modal-component .carousel-item-container .anchor-7 .carousel-item-text-anchor { top: 100px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-7 .carousel-item-text-anchor { top: 10px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-7 .reward-text-container .reward-text-container-bottom-half { opacity: 1; } .ranked-reference-modal-component .carousel-item-container .anchor-8 .carousel-item-text-anchor { top: 100px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-8 .carousel-item-text-anchor { top: 10px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-8 .reward-text-container .reward-text-container-bottom-half { opacity: 1; } .ranked-reference-modal-component .carousel-item-container .anchor-9 .carousel-item-text-anchor { top: 100px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-9 .carousel-item-text-anchor { top: 10px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-9 .reward-text-container .reward-text-container-bottom-half { opacity: 1; } .ranked-reference-modal-component .carousel-item-container .anchor-10 .carousel-item-text-anchor { top: 100px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-10 .carousel-item-text-anchor { top: 10px; } .ranked-reference-modal-component .carousel-item-container:hover .anchor-10 .reward-text-container .reward-text-container-bottom-half { opacity: 1; } .ranked-reference-modal-component .carousel-item-container:hover .more-rewards-text { display: none; } .ranked-reference-modal-component .carousel-item-container:hover .reward-text-line { white-space: normal; } .ranked-reference-modal-component .carousel-item-container .carousel-item-text-container { position: absolute; width: 216px; height: 295px; overflow: hidden; pointer-events: none; } .ranked-reference-modal-component .carousel-item-container .carousel-item-text-anchor { position: absolute; pointer-events: none; width: 216px; top: 100px; transition: top 0.75s ease; } .ranked-reference-modal-component .carousel-item-container .rank-tier-title-text { font-size: 24px; text-align: center; text-transform: uppercase; padding-bottom: 5px; } .ranked-reference-modal-component .carousel-item-container .rank-division-indicator { padding-top: 2px; display: flex; justify-content: center; align-items: center; } .ranked-reference-modal-component .carousel-item-container .apex-lp-text { font-size: 18px; letter-spacing: 0.05em; text-transform: uppercase; color: #c89b3c; text-align: center; } .ranked-reference-modal-component .carousel-item-container .reward-text-container { position: absolute; width: 195px; top: 100px; padding-left: 13px; } .ranked-reference-modal-component .carousel-item-container .reward-title { font-size: 12px; line-height: 4px; padding-bottom: 10px; text-transform: uppercase; color: #f0e6d2; } .ranked-reference-modal-component .carousel-item-container .reward-text-container-upper-half, .ranked-reference-modal-component .carousel-item-container .reward-text-container-bottom-half { display: flex; flex-direction: column; justify-content: flex-start; white-space: nowrap; } .ranked-reference-modal-component .carousel-item-container .reward-text-container-bottom-half { opacity: 0; transition: opacity 0.6s ease; } .ranked-reference-modal-component .carousel-item-container .reward-text-line { text-overflow: ellipsis; font-size: 12px; line-height: 15px; overflow: hidden; color: $color_palette_grey4; } .ranked-reference-modal-component .carousel-item-container .more-rewards-text { font-size: 12px; line-height: 16px; position: absolute; top: 64px; overflow: hidden; color: #0596aa; } .ranked-reference-modal-component .carousel-item-container .current-rank-overlay { position: absolute; width: 218px; height: 320px; background-image: url("/fe/lol-static-assets/images/current_rank_overlay.png"); background-repeat: no-repeat; background-size: contain; pointer-events: none; padding-bottom: 32px; } .ranked-reference-modal-component .carousel-item-container .current-rank-overlay .current-rank-text { color: #1e2328; font-size: 12px; line-height: 25px; text-align: center; letter-spacing: 0.08em; text-transform: uppercase; } .ranked-reference-modal-component .division-icon { width: 12px; height: 12px; margin: 2px; } .ranked-reference-modal-component .division-icon.current { background-image: url("/fe/lol-static-assets/images/division_icon_current.png"); } .ranked-reference-modal-component .division-icon.future { background-image: url("/fe/lol-static-assets/images/division_icon_future.png"); } .ranked-reference-modal-component .division-icon.completed { background-image: url("/fe/lol-static-assets/images/division_icon_completed.png"); } .ranked-reference-modal-component .regalia-crest-container { width: 214px; height: 303px; overflow: hidden; display: flex; justify-content: center; align-items: center; border: 1px solid #3c3c41; } .ranked-reference-modal-component .regalia-crest-container .regalia-crest-emblem-container { width: 212px; height: 301px; display: flex; justify-content: center; position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(#000, rgba(0,0,0,0.5)); } .ranked-reference-modal-component .regalia-crest-container .regalia-crest-emblem-container .regalia-emblem-sizer { width: 100%; height: 150px; position: absolute; top: 46px; opacity: 0.5; } .ranked-reference-modal-component .regalia-crest-container .regalia-crest-emblem-container .regalia-emblem-sizer.rank-identity-override { width: 250px; height: 250px; top: -30px; } .ranked-reference-modal-component .regalia-crest-container:hover { border: 1px solid #cdbe91; } .ranked-reference-modal-component .regalia-crest-container:hover .regalia-crest-emblem-container { filter: blur(3px); } .ranked-reference-modal-component .regalia-crest-container.IRON .regalia-crest-emblem-container { background-image: linear-gradient(180deg, #42474f 0%, #32434e 100%); } .ranked-reference-modal-component .regalia-crest-container.BRONZE .regalia-crest-emblem-container { background-image: linear-gradient(180deg, #4f4948 0%, #31434e 100%); } .ranked-reference-modal-component .regalia-crest-container.SILVER .regalia-crest-emblem-container { background-image: linear-gradient(180deg, #495b64 0%, #31434e 100%); } .ranked-reference-modal-component .regalia-crest-container.GOLD .regalia-crest-emblem-container { background-image: linear-gradient(180deg, #5f5645 0%, #31434e 100%); } .ranked-reference-modal-component .regalia-crest-container.PLATINUM .regalia-crest-emblem-container { background-image: linear-gradient(180deg, #3a5b63 0%, #31434e 100%); } .ranked-reference-modal-component .regalia-crest-container.DIAMOND .regalia-crest-emblem-container { background-image: linear-gradient(180deg, #3c4e72 0%, #31434e 100%); } .ranked-reference-modal-component .regalia-crest-container.MASTER .regalia-crest-emblem-container { background-image: linear-gradient(180deg, #4f4476 0%, #31434e 100%); } .ranked-reference-modal-component .regalia-crest-container.GRANDMASTER .regalia-crest-emblem-container { background-image: linear-gradient(180deg, #63464c 0%, #30434e 100%); } .ranked-reference-modal-component .regalia-crest-container.CHALLENGER .regalia-crest-emblem-container { background-image: linear-gradient(180deg, #676759 0%, #31434e 100%); } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-title, .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-theme, .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-level { font-family: var(--font-display); } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group { font-family: var(--font-body); } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-title, .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group, .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-theme, .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-level { -webkit-user-select: none; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-title, .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group, .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-theme, .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-level { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-title, .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-theme, .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-level { text-transform: uppercase; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-title:lang(ko-kr), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-theme:lang(ko-kr), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-level:lang(ko-kr), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-title:lang(ja-jp), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-theme:lang(ja-jp), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-level:lang(ja-jp), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-title:lang(tr-tr), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-theme:lang(tr-tr), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-level:lang(tr-tr), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-title:lang(el-gr), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-theme:lang(el-gr), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-level:lang(el-gr), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-title:lang(th-th), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-theme:lang(th-th), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-level:lang(th-th), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-title:lang(zh-tw), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-theme:lang(zh-tw), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-level:lang(zh-tw) { text-transform: none; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-title, .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-theme { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-title:lang(ar-ae), .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-theme:lang(ar-ae) { letter-spacing: 0; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-level { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-level:lang(ja-jp) { font-size: 13px; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-level:lang(ar-ae) { letter-spacing: 0; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group .style-profile-clash-banner-picker-list-item-level { color: #a09b8c; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group:lang(ja-jp) { font-size: 13px; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group:lang(ar-ae) { letter-spacing: 0; } .style-profile-clash-banner-picker-component { -webkit-user-select: none; width: 100%; height: 100%; } .style-profile-clash-banner-picker-component lol-uikit-full-page-backdrop { display: flex; align-items: center; justify-content: center; } .style-profile-clash-banner-picker-component lol-uikit-flat-button-group { justify-content: center; width: 100%; bottom: -2px; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container { background-color: #010a13; position: relative; width: 600px; border: 2px solid #1d2126; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-title { cursor: default; box-sizing: border-box; height: 40px; padding: 10px 16px 0 0; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-title:after { content: ''; position: absolute; top: 39px; left: 0; width: 100%; height: 1px; background-color: #1d2126; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list { padding: 17px 17px 17px 0; height: 460px; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-loading-spinner { display: flex; align-items: center; justify-content: center; height: 100%; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list lol-uikit-scrollable { font-size: 0; overflow-x: hidden; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list lol-uikit-scrollable:after { content: ""; flex: auto; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item { width: 131px; display: inline-block; margin: 6px 6px; position: relative; text-align: center; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item img { -webkit-user-drag: none; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-flag-img { width: 111px; margin: 18px 0; object-fit: contain; object-position: 50% 0; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 15px); opacity: 0.5; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item:hover { cursor: pointer; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item:hover .style-profile-clash-banner-picker-flag-img { opacity: 1; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item.list-item-selected .style-profile-clash-banner-picker-flag-img { opacity: 1; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-frame-img { position: absolute; top: 0; left: 0; width: 131px; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-container .style-profile-clash-banner-picker-list .style-profile-clash-banner-picker-list-item .style-profile-clash-banner-picker-list-item-details-group { text-align: center; } .style-profile-clash-banner-picker-component .style-profile-clash-banner-picker-saving-spinner { position: absolute; bottom: 32px; display: flex; justify-content: center; width: 100%; } .style-profile-backdrop-component .style-profile-backdrop-container { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } .style-profile-backdrop-component .style-profile-backdrop-container .style-profile-masked-image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; -webkit-mask: url(/fe/lol-profiles/profile-backdrop-mask.png) 50% 50%/100% 100% no-repeat; transition: all 0.25s linear; } .style-profile-backdrop-component .style-profile-backdrop-container .uikit-background-switcher { opacity: 0.8; } .style-profile-backdrop-component .style-profile-backdrop-container .uikit-background-switcher img, .style-profile-backdrop-component .style-profile-backdrop-container .uikit-background-switcher video { width: auto; } .style-profile-backdrop-component .style-profile-backdrop-container.style-profile-backdrop-dimmed::after { content: ''; opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; animation: backdrop-dimmed-fade-in 0.25s forwards; } .style-profile-backdrop-component .style-profile-backdrop-container.style-profile-backdrop-dimmed .style-profile-masked-image { -webkit-filter: brightness(15%); } @-moz-keyframes backdrop-dimmed-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes backdrop-dimmed-fade-in { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes backdrop-dimmed-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes backdrop-dimmed-fade-in { from { opacity: 0; } to { opacity: 1; } } .style-profile-backdrop-picker-component .style-profile-skin-picker-button { position: absolute; width: 28px; height: 28px; right: 35px; top: 96px; } .style-profile-backdrop-picker-component .hide { display: none; } .rcp-fe-lol-profiles-search-input { position: absolute; top: 0; width: 1055px; } .rcp-fe-lol-profiles-search-input.hidden { display: none; } .style-profile-search-input-component { position: absolute; right: 70px; top: 95px; width: 200px; } .style-profile-search-trail-component .style-profile-search-trail-summoner-name { font-family: var(--font-display); } .style-profile-search-trail-component .style-profile-search-trail-summoner-name { -webkit-user-select: none; } .style-profile-search-trail-component .style-profile-search-trail-summoner-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .style-profile-search-trail-component .style-profile-search-trail-summoner-name { text-transform: uppercase; } .style-profile-search-trail-component .style-profile-search-trail-summoner-name:lang(ko-kr), .style-profile-search-trail-component .style-profile-search-trail-summoner-name:lang(ja-jp), .style-profile-search-trail-component .style-profile-search-trail-summoner-name:lang(tr-tr), .style-profile-search-trail-component .style-profile-search-trail-summoner-name:lang(el-gr), .style-profile-search-trail-component .style-profile-search-trail-summoner-name:lang(th-th), .style-profile-search-trail-component .style-profile-search-trail-summoner-name:lang(zh-tw) { text-transform: none; } .style-profile-search-trail-component .style-profile-search-trail-summoner-name { text-transform: none; } .style-profile-search-trail-component .style-profile-search-trail-summoner-name { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .style-profile-search-trail-component .style-profile-search-trail-summoner-name:lang(ja-jp) { font-size: 13px; } .style-profile-search-trail-component .style-profile-search-trail-summoner-name:lang(ar-ae) { letter-spacing: 0; } .style-profile-search-trail-component .style-profile-search-trail-summoner-name { letter-spacing: 0.0375em; } .style-profile-search-trail-component .style-profile-search-trail-summoner-name:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-profiles-search-trail { position: absolute; top: -3px; background-image: url(/fe/lol-profiles/search_trail_bg.png); background-size: 100% 100%; background-repeat: no-repeat; width: 320px; height: 42px; } .style-profile-search-trail-component { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-top: 5px; margin-left: 40px; } .style-profile-search-trail-component .style-profile-search-trail-summoner-icon { width: 32px; height: 32px; margin-right: 5px; } .style-profile-search-trail-component .style-profile-search-trail-summoner-name { color: #cdbe91; width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rcp-fe-lol-profiles-main { position: relative; cursor: default; width: 100%; height: 100%; } .rcp-fe-lol-profiles-modal { position: relative; cursor: default; width: 100%; height: 100%; } .style-profile-sub-nav { top: 79px; left: 35px; position: absolute; border: 0; margin: 0; padding: 0; -webkit-user-select: none; } .style-profile-sub-nav lol-uikit-navigation-item { margin-top: 9px; } div.rcp-fe-lol-profiles-modal .style-profile-sub-nav { top: 0; left: 290px; }