.team-planner-root-component { -webkit-user-select: none; width: 100%; height: 100%; } .team-planner-root { background-color: #010a13; height: 620px; width: 1000px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; } .team-planner-root__content { display: flex; flex-direction: row; } .team-planner-backdrop { align-items: center; justify-content: center; display: flex; } .team-planner-backdrop__click-elem { position: absolute; width: 100%; height: 100%; } .team-planner__close-button { position: absolute; top: 16px; right: 16px ; left: auto ; background-image: url("/fe/lol-static-assets/images/x.png"); width: 20px; height: 20px; cursor: pointer; } .team-planner__close-button:hover { background-image: url("/fe/lol-static-assets/images/x_hover.png"); } .team-planner__close-button:active { background-image: url("/fe/lol-static-assets/images/x_active.png"); } .team-planner__header-container__title { font-family: var(--font-display); } .team-planner__header-container__title { -webkit-user-select: none; } .team-planner__header-container__title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .team-planner__header-container__title { text-transform: uppercase; } .team-planner__header-container__title:lang(ko-kr), .team-planner__header-container__title:lang(ja-jp), .team-planner__header-container__title:lang(tr-tr), .team-planner__header-container__title:lang(el-gr), .team-planner__header-container__title:lang(th-th), .team-planner__header-container__title:lang(zh-tw) { text-transform: none; } .team-planner__header-container__title { text-transform: none; } .team-planner__header-container__title { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .team-planner__header-container__title:lang(ar-ae) { letter-spacing: 0; } .team-planner__header-container__title { letter-spacing: 0.025em; } .team-planner__header-container__title:lang(ar-ae) { letter-spacing: 0; } .team-planner__header-container-component { width: 100%; } .team-planner__header-container { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .team-planner__header-container__title { color: #f0e6d2; direction: ltr; cursor: default; box-sizing: border-box; margin: 40px 0px 15px 30px; } .team-planner__tiers-list-container { width: 450px; height: 550px; margin-left: 50px; margin-bottom: 30px; display: flex; flex-direction: column; } .team-planner__tiers-list-container__scrollable-content { box-sizing: border-box; overflow-x: hidden; margin-bottom: 0px; margin-top: 10px; padding-bottom: 50px; } .team-planner__team-container__clear-button { font-family: var(--font-display); } .team-planner__team-container { width: 550px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .team-planner__team-grid { margin: 20px 0px 0px 10px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } .team-planner__team-grid-tile__champion-title { font-family: var(--font-body); } .team-planner__team-grid-tile__champion-title { -webkit-user-select: none; } .team-planner__team-grid-tile__champion-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .team-planner__team-grid-tile__champion-title { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .team-planner__team-grid-tile__champion-title:lang(ar-ae) { letter-spacing: 0; } .team-planner__team-grid-tile { display: inline-block; position: relative; width: 120px; height: 120px; margin: 0 16px 16px 0; box-sizing: border-box; } .team-planner__team-grid-tile:nth-child(4n) { margin-right: 0; margin-left: 0; } .team-planner__team-grid-tile.team-grid-tile--enabled { cursor: pointer; } .team-planner__team-grid-tile.team-grid-tile--enabled:hover { filter: brightness(125%); } .team-planner__team-grid-tile.team-grid-tile--enabled:active { filter: brightness(75%); } .team-planner__team-grid-tile.team-grid-tile--enabled:hover .team-planner__team-grid-tile__hover-state { visibility: visible; } .team-planner__team-grid-tile__hover-state { width: 120%; height: 120%; position: absolute; top: 51%; left: 51%; transform: translate(-50%, -50%); background-size: contain; background-repeat: no-repeat; background-image: url(/fe/lol-tft-team-planner/cTeamPlanner_ChampionHighlight_Hover.png); visibility: hidden; } .team-planner__team-grid-tile__drop-zone { width: 120%; height: 120%; position: absolute; top: 51%; left: 51%; transform: translate(-50%, -50%); background-size: contain; background-repeat: no-repeat; visibility: visible; } .team-planner__team-grid-tile__drop-zone.activeDropZone { background-image: url(/fe/lol-tft-team-planner/cTeamPlanner_ChampionHighlight_Hover.png); } .team-planner__team-grid-tile__drop-zone.overDropZone { background-image: url(/fe/lol-tft-team-planner/cTeamPlanner_ChampionHighlight_HoverSelector.png); } .team-planner__team-grid-tile__dragging { filter: grayscale(1); } .team-planner__team-grid-tile__image-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; display: flex; } .team-planner__team-grid-tile__champion-title { width: 100%; position: absolute; color: #ccc4b3; line-height: 16px; bottom: 2px; letter-spacing: 0.04em; text-align: center; } .team-planner__team-grid-tile__trait-container { height: 80%; display: flex; flex-direction: column; justify-content: flex-end; } .team-planner__team-grid-tile-trait-icon__background { position: relative; width: 28px; height: 28px; background-size: contain; background-repeat: no-repeat; background-image: url("/fe/lol-tft-team-planner/images/cTeamPlanner_Member_TraitBg.png"); margin: 1px 5px; } .team-planner__team-grid-tile-trait-icon__background.Threat { background-image: url("/fe/lol-tft-team-planner/images/cTeamPlanner_ActiveTrait_kThreat.png"); transform: scale(1.1, 1); } .team-planner__team-grid-tile-trait-icon { width: 65%; height: 65%; background-size: contain; background-repeat: no-repeat; margin: 0; position: absolute; left: 40%; top: 50%; transform: translate(-40%, -50%); } .team-planner__team-trait-container__no-traits-text, .team-planner__team-trait-container__text { font-family: var(--font-display); } .team-planner__team-trait-container__no-traits-text, .team-planner__team-trait-container__text { -webkit-user-select: none; } .team-planner__team-trait-container__no-traits-text, .team-planner__team-trait-container__text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .team-planner__team-trait-container__no-traits-text, .team-planner__team-trait-container__text { text-transform: uppercase; } .team-planner__team-trait-container__no-traits-text:lang(ko-kr), .team-planner__team-trait-container__text:lang(ko-kr), .team-planner__team-trait-container__no-traits-text:lang(ja-jp), .team-planner__team-trait-container__text:lang(ja-jp), .team-planner__team-trait-container__no-traits-text:lang(tr-tr), .team-planner__team-trait-container__text:lang(tr-tr), .team-planner__team-trait-container__no-traits-text:lang(el-gr), .team-planner__team-trait-container__text:lang(el-gr), .team-planner__team-trait-container__no-traits-text:lang(th-th), .team-planner__team-trait-container__text:lang(th-th), .team-planner__team-trait-container__no-traits-text:lang(zh-tw), .team-planner__team-trait-container__text:lang(zh-tw) { text-transform: none; } .team-planner__team-trait-container__text { text-transform: none; } .team-planner__team-trait-container__no-traits-text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .team-planner__team-trait-container__no-traits-text:lang(ar-ae) { letter-spacing: 0; } .team-planner__team-trait-container__text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .team-planner__team-trait-container__text:lang(ar-ae) { letter-spacing: 0; } .team-planner__team-trait-container__text { letter-spacing: 0.0375em; } .team-planner__team-trait-container__text:lang(ar-ae) { letter-spacing: 0; } .team-planner__team-traits-container { display: flex; flex-direction: row; margin-left: -6px; margin-top: 6px; } .team-planner__team-trait-container__no-traits-text { color: #f0e6d2; direction: ltr; cursor: default; box-sizing: border-box; } .team-planner__team-trait-container__next-page-button { position: relative; width: 45px; height: auto; margin-top: -13px; background-repeat: no-repeat; background-size: contain; background-image: url("/fe/lol-tft-team-planner/images/cTeamPlanner_PaginateButton_Backdrop_Default.png"); } .team-planner__team-trait-container__next-page-button:hover { cursor: pointer; filter: brightness(125%); } .team-planner__team-trait-container__next-page-button:active { filter: brightness(100%); background-image: url("/fe/lol-tft-team-planner/images/cTeamPlanner_PaginateButton_Backdrop_Clicked.png"); } .team-planner__team-trait-container__next-page-button:active .team-planner__team-trait-container__text { filter: brightness(75%); } .team-planner__team-trait-container__next-page-button__hide { position: relative; width: 45px; height: auto; margin-top: -13px; } .team-planner__team-trait-container__text { padding-left: 2px; padding-top: 5px; text-align: center; font-weight: normal; letter-spacing: 2px; color: --color-gold1; } .team-planner__team-trait__text, .trait-title, .trait-label { font-family: var(--font-display); } .team-planner__team-trait__text, .trait-title, .trait-label { -webkit-user-select: none; } .team-planner__team-trait__text, .trait-title, .trait-label { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .team-planner__team-trait__text, .trait-title, .trait-label { text-transform: uppercase; } .team-planner__team-trait__text:lang(ko-kr), .trait-title:lang(ko-kr), .trait-label:lang(ko-kr), .team-planner__team-trait__text:lang(ja-jp), .trait-title:lang(ja-jp), .trait-label:lang(ja-jp), .team-planner__team-trait__text:lang(tr-tr), .trait-title:lang(tr-tr), .trait-label:lang(tr-tr), .team-planner__team-trait__text:lang(el-gr), .trait-title:lang(el-gr), .trait-label:lang(el-gr), .team-planner__team-trait__text:lang(th-th), .trait-title:lang(th-th), .trait-label:lang(th-th), .team-planner__team-trait__text:lang(zh-tw), .trait-title:lang(zh-tw), .trait-label:lang(zh-tw) { text-transform: none; } .team-planner__team-trait__text, .trait-title, .trait-label { text-transform: none; } .trait-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .trait-title:lang(ar-ae) { letter-spacing: 0; } .trait-title { letter-spacing: 0.025em; } .trait-title:lang(ar-ae) { letter-spacing: 0; } .team-planner__team-trait__text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .team-planner__team-trait__text:lang(ar-ae) { letter-spacing: 0; } .team-planner__team-trait__text { letter-spacing: 0.025em; } .team-planner__team-trait__text:lang(ar-ae) { letter-spacing: 0; } .trait-label { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .trait-label:lang(ar-ae) { letter-spacing: 0; } .trait-label { letter-spacing: 0.0375em; } .trait-label:lang(ar-ae) { letter-spacing: 0; } .team-planner__team-trait-component { position: relative; margin-top: -9px; width: 45px; height: 51px; padding-right: 8px; padding-bottom: 6px; } .team-planner__team-trait-component:hover .team-planner__team-trait__hover-state { visibility: visible; } .team-planner__team-trait__hover-state { position: absolute; width: 45px; height: 51px; background-repeat: center no-repeat; background-size: cover; visibility: hidden; transform: scale(119%, 119%); } .team-planner__team-trait__text { position: relative; padding-top: 52px; margin-left: 2px; text-align: center; font-weight: normal; color: #f0e6d2; } .team-planner__team-trait__background__empty { position: absolute; width: 45px; height: 51px; background-repeat: center no-repeat; background-size: contain; background-image: url("/fe/lol-tft-team-planner/images/cTeamPlanner_ActiveTrait_Empty.png"); } .team-planner__team-trait__background { position: absolute; width: 45px; height: 51px; background-repeat: center no-repeat; background-size: contain; } .team-planner__team-trait__background__threat { position: absolute; width: 45px; height: 51px; margin-top: -2px; background: center no-repeat; background-size: contain; transform: scale(1, 0.9); } .team-planner__team-trait__icon { position: absolute; width: 32px; height: 32px; margin-left: 0.5px; padding-left: 13px; padding-top: 18px; background: center no-repeat; background: cover; transform: scale(0.85, 0.85); } .team-planner__team-trait__icon__threat { position: absolute; width: 32px; height: 32px; margin-left: 0.5px; padding-left: 13px; padding-top: 18px; background: center no-repeat; background: cover; filter: invert(90%) sepia(90%) saturate(4000%) hue-rotate(257deg) brightness(200%) contrast(70%); transform: scale(0.85, 0.85); } .trait-title { color: #f0e6d2; direction: ltr; } .trait-label { min-width: 300px; max-width: 400px; width: auto; direction: ltr; color: #f0e6d2; filter: brightness(0.65); font-weight: normal; cursor: default; box-sizing: border-box; } tftActiveRank { color: #f0e6d2; filter: brightness(2); } tftInactiveRank { filter: brightness(1); color: #5b5a56; } .trait-tooltip-line { background-color: #463714; width: 100%; height: 1px; margin-top: 2px; margin-bottom: 8px; } .team-planner__tier-container__header__title { font-family: var(--font-display); } .team-planner__tier-container__header__title { -webkit-user-select: none; } .team-planner__tier-container__header__title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .team-planner__tier-container__header__title { text-transform: uppercase; } .team-planner__tier-container__header__title:lang(ko-kr), .team-planner__tier-container__header__title:lang(ja-jp), .team-planner__tier-container__header__title:lang(tr-tr), .team-planner__tier-container__header__title:lang(el-gr), .team-planner__tier-container__header__title:lang(th-th), .team-planner__tier-container__header__title:lang(zh-tw) { text-transform: none; } .team-planner__tier-container__header__title { text-transform: none; } .team-planner__tier-container__header__title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .team-planner__tier-container__header__title:lang(ar-ae) { letter-spacing: 0; } .team-planner__tier-container__header__title { letter-spacing: 0.025em; } .team-planner__tier-container__header__title:lang(ar-ae) { letter-spacing: 0; } .team-planner__tier-container { display: flex; flex-direction: column; } .team-planner__tier-container__header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-right: 25px; padding-top: 15px; } .team-planner__tier-container__header__title { color: #f0e6d2; direction: ltr; cursor: default; box-sizing: border-box; margin-left: 5px; } .team-planner__tier-container__header__cost { display: flex; flex-direction: row; justify-content: center; align-items: center; } .team-planner__tier-container__header__cost__icon { height: 20px; width: 20px; filter: brightness(0) saturate(100%) invert(80%) sepia(10%) saturate(919%) hue-rotate(7deg) brightness(95%) contrast(90%); padding-right: 5px; } .team-planner__tier-container__header__cost__text { color: #f0e6d2; } .team-planner__tier-grid { display: flex; flex-direction: row; flex-wrap: wrap; } .champion-label { font-family: var(--font-display); } .champion-label { -webkit-user-select: none; } .champion-label { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .champion-label { text-transform: uppercase; } .champion-label:lang(ko-kr), .champion-label:lang(ja-jp), .champion-label:lang(tr-tr), .champion-label:lang(el-gr), .champion-label:lang(th-th), .champion-label:lang(zh-tw) { text-transform: none; } .champion-label { text-transform: none; } .champion-label { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .champion-label:lang(ar-ae) { letter-spacing: 0; } .champion-label { letter-spacing: 0.025em; } .champion-label:lang(ar-ae) { letter-spacing: 0; } .team-planner__tier-grid-tile { position: relative; width: 80px; height: 80px; margin: 0 6px 6px 0; cursor: pointer; } .team-planner__tier-grid-tile:nth-child(5n) { margin-right: 0; margin-left: 0; } .team-planner__tier-grid-tile:hover { filter: brightness(125%); background-image: url("/fe/lol-tft-team-planner/images/cTeamPlanner_ChampionButton_FrameHovered.png"); background-repeat: no-repeat; background-size: cover; } .team-planner__tier-grid-tile:active { filter: brightness(75%); } .team-planner__tier-grid-tile__dragging { filter: grayscale(1); } .team-planner__tier-grid-tile__tierBorder { position: absolute; width: 72px; height: 72px; margin: 4px; background-repeat: no-repeat; background-size: cover; display: block; } .team-planner__tier-grid-tile__portrait { position: absolute; width: 70px; height: 70px; margin: 5px; color: #f0e6d2; background-size: cover; pointer-events: none; } .team-planner__tier-grid-tile__selected { position: absolute; width: 76px; height: 76px; margin: 2px; background: url("/fe/lol-tft-team-planner/images/cTeamPlanner_ChampionButton_FrameSelected.png"); background-repeat: no-repeat; background-size: cover; } .champion-label { color: #f0e6d2; direction: ltr; font-weight: 500; cursor: default; box-sizing: border-box; }