@font-face { font-family: "Shentox"; src: url("/fe/lol-esports-spectate/assets/shentox/shentox.ttf"); } @font-face { font-family: "Shentox"; src: url("/fe/lol-esports-spectate/assets/shentox/shentox-semibold.ttf"); font-weight: 600; } @font-face { font-family: "Shentox"; src: url("/fe/lol-esports-spectate/assets/shentox/shentox-light.ttf"); font-weight: 300; } .champ-select-spectate-component { --left-side-color: #0b849e; --right-side-color: #be1e37; background: #000; color: #fff; width: 100%; height: 100%; position: absolute; font-family: "Shentox", sans-serif ; } .champ-select-spectate-component .champion-select-header { height: 108px; width: 100%; position: absolute; top: 0; left: 0; background-image: linear-gradient(104deg, #15171b 25%, #000 35%); } .champ-select-spectate-component .champion-select-header::before { content: ''; position: absolute; top: 0; right: 0; height: 108px; width: 50%; background-image: linear-gradient(74deg, #000 30%, #15171b 50%); } .champ-select-spectate-component .champion-select-header .timer-left, .champ-select-spectate-component .champion-select-header .timer-right { width: 148px; height: 108px; color: #fff; position: absolute; top: 0; padding-top: 33px; font-size: 39px; font-weight: 600; letter-spacing: 0.5px; opacity: 0; } .champ-select-spectate-component .champion-select-header .timer-left.visible, .champ-select-spectate-component .champion-select-header .timer-right.visible { transition: opacity 0.3s; opacity: 1; } .champ-select-spectate-component .champion-select-header .timer-left .timer-bg, .champ-select-spectate-component .champion-select-header .timer-right .timer-bg { position: absolute; top: 0; width: 98px; height: 108px; transition: opacity 0.3s; } .champ-select-spectate-component .champion-select-header .timer-left .timer-inner, .champ-select-spectate-component .champion-select-header .timer-right .timer-inner { position: absolute; text-shadow: 1px 1px 3px rgba(0,0,0,0.4), -1px 1px 3px rgba(0,0,0,0.4), -1px -1px 3px rgba(0,0,0,0.4), 1px -1px 3px rgba(0,0,0,0.4); } .champ-select-spectate-component .champion-select-header .timer-left { left: 396px; } .champ-select-spectate-component .champion-select-header .timer-left .timer-bg { transform: skew(14deg); background: var(--left-side-color); right: 0; } .champ-select-spectate-component .champion-select-header .timer-left .timer-inner { left: 69px; } .champ-select-spectate-component .champion-select-header .timer-right { right: 396px; text-align: right; } .champ-select-spectate-component .champion-select-header .timer-right .timer-bg { transform: skew(-14deg); background: var(--right-side-color); left: 0; } .champ-select-spectate-component .champion-select-header .timer-right .timer-inner { left: 20px; } .champ-select-spectate-component .champion-select-header .header-keystone { background: #15171b; height: 108px; position: absolute; top: 0; left: 561px; right: 561px; } .champ-select-spectate-component .champion-select-header .header-keystone > .left-bg-section { height: 108px; width: 50px; position: absolute; left: -14px; background: #15171b; transform: skew(14deg); } .champ-select-spectate-component .champion-select-header .header-keystone > .right-bg-section { height: 108px; width: 50px; position: absolute; right: -14px; background: #15171b; transform: skew(-14deg); } .champ-select-spectate-component .champion-select-header .header-keystone .header-keystone-inner { height: 23px; width: calc(100% - 2px); position: absolute; bottom: 0; left: 1px; text-align: center; background: transparent; transition: background 0.3s, opacity 0.3s; } .champ-select-spectate-component .champion-select-header .header-keystone .header-keystone-inner > .left-bg-section { height: 23px; width: 50px; position: absolute; left: -4px; background: transparent; transition: background 0.3s; transform: skew(14deg); } .champ-select-spectate-component .champion-select-header .header-keystone .header-keystone-inner > .right-bg-section { height: 23px; width: 50px; position: absolute; right: -4px; background: transparent; transition: background 0.3s; transform: skew(-14deg); } .champ-select-spectate-component .champion-select-header .header-keystone .header-keystone-inner > .phase { direction: ltr; position: absolute; left: 0; top: 3px; font-size: 16px; letter-spacing: 0.15px; width: 100%; text-shadow: 1px 1px 3px rgba(0,0,0,0.5), -1px 1px 3px rgba(0,0,0,0.5), -1px -1px 3px rgba(0,0,0,0.5), 1px -1px 3px rgba(0,0,0,0.5); } .champ-select-spectate-component.right-side-acting .champion-select-header .header-keystone-inner { background: var(--right-side-color); } .champ-select-spectate-component.right-side-acting .champion-select-header .header-keystone-inner .left-bg-section, .champ-select-spectate-component.right-side-acting .champion-select-header .header-keystone-inner .right-bg-section { background: var(--right-side-color); } .champ-select-spectate-component.right-side-acting .timer-left .timer-bg { opacity: 0; } .champ-select-spectate-component.left-side-acting .champion-select-header .header-keystone-inner { background: var(--left-side-color); } .champ-select-spectate-component.left-side-acting .champion-select-header .header-keystone-inner .left-bg-section, .champ-select-spectate-component.left-side-acting .champion-select-header .header-keystone-inner .right-bg-section { background: var(--left-side-color); } .champ-select-spectate-component.left-side-acting .timer-right .timer-bg { opacity: 0; } .champ-select-spectate-component.show-both-timers .champion-select-header .header-keystone-inner { opacity: 0; } .champ-select-spectate-component.show-both-timers .timer-bg { opacity: 0; } .champ-select-spectate-component .party { position: absolute; top: 132px; width: 249px; height: 453px; display: flex; flex-direction: column; } .champ-select-spectate-component .party .summoner-wrapper { width: 100%; height: 80px; position: relative; margin-bottom: 4px; } .champ-select-spectate-component .party .summoner-wrapper:nth-child(3) { margin-bottom: 23px; } .champ-select-spectate-component .party .summoner-wrapper .base-color-background { position: absolute; top: 0; bottom: 0; left: 0; right: 0; -webkit-filter: saturate(0.6); } .champ-select-spectate-component .party .summoner-wrapper .gradient-background-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: linear-gradient(to right, rgba(0,0,0,0.83) 0%, rgba(0,0,0,0.72) 50%, rgba(0,0,0,0.83) 100%); } .champ-select-spectate-component .party .summoner-wrapper:first-child .gradient-background-overlay { background-image: radial-gradient(ellipse 82% 128% at 50% 90%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.91) 100%); } .champ-select-spectate-component .party .summoner-wrapper:last-child .gradient-background-overlay { background-image: radial-gradient(ellipse 82% 128% at 50% 10%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.91) 100%); } .champ-select-spectate-component .your-party .summoner-wrapper .base-color-background { background: var(--left-side-color); } .champ-select-spectate-component .enemy-party .summoner-wrapper .base-color-background { background: var(--right-side-color); } .champ-select-spectate-component .my-bans, .champ-select-spectate-component .their-bans { width: 475px; position: absolute; height: 116px; bottom: 0; box-sizing: border-box; display: flex; } .champ-select-spectate-component .ban-background { background: #161719; width: 81px; height: 83px; position: relative; overflow: hidden; } .champ-select-spectate-component .ban-wrapper { width: 81px; height: 83px; position: relative; } .champ-select-spectate-component .ban-wrapper .ban-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .champ-select-spectate-component .ban-wrapper .ban-icon { content: ''; width: 28px; height: 28px; background: url("/fe/lol-esports-spectate/assets/ban-icon.png"); background-size: 28px; background-repeat: no-repeat; position: absolute; top: 28px; -webkit-filter: brightness(0.3) contrast(0.85); transition: all 0.1s cubic-bezier(0.29, 0.27, 0.5, 0.95); } .champ-select-spectate-component .ban-wrapper.completed { animation: champBannedAnimation 1s ease-out forwards; } .champ-select-spectate-component .ban-wrapper.completed .ban-icon { -webkit-filter: brightness(1); top: 68px; } .champ-select-spectate-component .ban { width: 105px; height: 99px; background-size: 431px; background-position-x: 51%; background-position-y: 27%; margin-right: 2px; position: absolute; top: 0; left: -13px; opacity: 1; transition: opacity 0.2s; } .champ-select-spectate-component .ban:last-child { margin-right: 0; } .champ-select-spectate-component .ban.no-champion { opacity: 0; } .champ-select-spectate-component .my-bans { left: 43px; } .champ-select-spectate-component .my-bans .ban-wrapper { margin-right: 4px; } .champ-select-spectate-component .my-bans .ban-wrapper:nth-child(3) { margin-right: 34px; } .champ-select-spectate-component .my-bans .ban-wrapper .ban-icon { right: 26px; } .champ-select-spectate-component .my-bans .ban-wrapper.completed .ban-icon { right: 19px; } .champ-select-spectate-component .my-bans .ban-wrapper.active .ban-background { border-right: 5px solid var(--left-side-color); width: 77px; } .champ-select-spectate-component .my-bans .ban-background { transform: skew(14deg); } .champ-select-spectate-component .my-bans .ban-container { transform: skew(-14deg); position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .champ-select-spectate-component .their-bans { right: 43px; flex-direction: row-reverse; } .champ-select-spectate-component .their-bans .ban-wrapper { margin-left: 4px; } .champ-select-spectate-component .their-bans .ban-wrapper:nth-child(3) { margin-left: 34px; } .champ-select-spectate-component .their-bans .ban-wrapper .ban-icon { left: 31px; transform: scaleX(-1); } .champ-select-spectate-component .their-bans .ban-wrapper.completed .ban-icon { left: 23px; } .champ-select-spectate-component .their-bans .ban-wrapper.active .ban-background { border-left: 5px solid var(--right-side-color); width: 77px; } .champ-select-spectate-component .their-bans .ban-background { transform: skew(-14deg); margin-left: 4px; } .champ-select-spectate-component .their-bans .ban-container { transform: scaleX(-1) skew(-14deg); background-position-x: 49%; } .champ-select-spectate-component .your-party .party { left: 0; } .champ-select-spectate-component .enemy-party .party { right: 0; } .champion-select-color-switcher { position: absolute; top: 200px; left: 333px; } @-moz-keyframes champBannedAnimation { 0% { -webkit-filter: brightness(1); } 4% { -webkit-filter: grayscale(0.7) brightness(1.8); } 100% { -webkit-filter: grayscale(0.7) brightness(0.9); } } @-webkit-keyframes champBannedAnimation { 0% { -webkit-filter: brightness(1); } 4% { -webkit-filter: grayscale(0.7) brightness(1.8); } 100% { -webkit-filter: grayscale(0.7) brightness(0.9); } } @-o-keyframes champBannedAnimation { 0% { -webkit-filter: brightness(1); } 4% { -webkit-filter: grayscale(0.7) brightness(1.8); } 100% { -webkit-filter: grayscale(0.7) brightness(0.9); } } @keyframes champBannedAnimation { 0% { -webkit-filter: brightness(1); } 4% { -webkit-filter: grayscale(0.7) brightness(1.8); } 100% { -webkit-filter: grayscale(0.7) brightness(0.9); } } .champ-select-spectate-component .my-bans .ban[data-id='115'], .champ-select-spectate-component .their-bans .ban[data-id='115'] { background-position-x: 46%; background-position-y: 33%; } .champ-select-spectate-component .my-bans .ban[data-id='19'], .champ-select-spectate-component .their-bans .ban[data-id='19'] { background-size: 281px; background-position-y: 50%; } .champ-select-spectate-component .my-bans .ban[data-id='106'], .champ-select-spectate-component .their-bans .ban[data-id='106'] { background-position-y: 20%; } .champ-select-spectate-component .my-bans .ban[data-id='161'], .champ-select-spectate-component .their-bans .ban[data-id='161'] { background-position-x: 47%; background-size: 295px; } .champ-select-spectate-component .my-bans .ban[data-id='44'], .champ-select-spectate-component .their-bans .ban[data-id='44'] { background-position-x: 60%; } .champ-select-spectate-component .my-bans .ban[data-id='223'], .champ-select-spectate-component .their-bans .ban[data-id='223'] { background-size: 300px; } .champ-select-spectate-component .my-bans .ban[data-id='13'], .champ-select-spectate-component .their-bans .ban[data-id='13'] { background-position-x: 63%; background-position-y: 38%; } .champ-select-spectate-component .my-bans .ban[data-id='33'], .champ-select-spectate-component .their-bans .ban[data-id='33'] { background-size: 373px; background-position-x: 55%; background-position-y: 35%; } .champ-select-spectate-component .my-bans .ban[data-id='75'], .champ-select-spectate-component .their-bans .ban[data-id='75'] { background-size: 597px; } .champ-select-spectate-component .my-bans .ban[data-id='96'], .champ-select-spectate-component .their-bans .ban[data-id='96'] { background-size: 300px; } .champ-select-spectate-component .my-bans .ban[data-id='240'], .champ-select-spectate-component .their-bans .ban[data-id='240'] { background-size: 300px; } .champ-select-spectate-component .my-bans .ban[data-id='85'], .champ-select-spectate-component .their-bans .ban[data-id='85'] { background-size: 321px; } .champ-select-spectate-component .my-bans .ban[data-id='74'], .champ-select-spectate-component .their-bans .ban[data-id='74'] { background-size: 350px; } .champ-select-spectate-component .my-bans .ban[data-id='28'], .champ-select-spectate-component .their-bans .ban[data-id='28'] { background-position-y: 22%; } .champ-select-spectate-component .my-bans .ban[data-id='122'], .champ-select-spectate-component .their-bans .ban[data-id='122'] { background-position-y: 19%; } .champ-select-spectate-component .my-bans .ban[data-id='136'], .champ-select-spectate-component .their-bans .ban[data-id='136'] { background-position-x: 57%; background-size: 360px; background-position-y: 40%; } .champ-select-spectate-component .my-bans .ban[data-id='34'], .champ-select-spectate-component .their-bans .ban[data-id='34'] { background-position-y: 36%; } .champ-select-spectate-component .my-bans .ban[data-id='142'], .champ-select-spectate-component .their-bans .ban[data-id='142'] { background-size: 300px; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='268'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='268'] { background-position-y: 24%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='122'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='122'] { background-position-y: 18%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='28'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='28'] { background-position-y: 29%; background-size: 165%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='50'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='50'] { background-position-y: 22%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='9'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='9'] { background-size: 165%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='114'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='114'] { background-position-y: 18%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='105'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='105'] { background-position-y: 21%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='74'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='74'] { background-size: 200%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='420'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='420'] { background-position-y: 18%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='39'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='39'] { background-size: 320%; background-position-y: 26%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='222'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='222'] { background-position-y: 24%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='10'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='10'] { background-position-y: 18%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='240'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='240'] { background-size: 180%; background-position-y: 26%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='96'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='96'] { background-size: 180%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='7'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='7'] { background-position-y: 22%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='64'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='64'] { background-position-y: 26%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='236'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='236'] { background-position-y: 23%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='267'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='267'] { background-position-y: 23%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='20'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='20'] { background-position-y: 18%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='33'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='33'] { background-size: 180%; background-position-x: 67%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='13'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='13'] { background-size: 205%; background-position-x: 61%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='223'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='223'] { background-size: 180%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='112'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='112'] { background-position-y: 23%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='8'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='8'] { background-position-y: 23%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='201'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='201'] { background-position-y: 20%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='106'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='106'] { background-size: 220%; background-position-y: 17%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='19'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='19'] { background-size: 170%; background-position-y: 41%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='101'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='101'] { background-position-y: 22%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='115'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='115'] { background-size: 200%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='83'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='83'] { background-position-y: 19%; background-size: 170%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='85'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='85'] { background-size: 170%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='202'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='202'] { background-position-y: 25%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='110'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='110'] { background-position-x: 46%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='161'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='161'] { background-size: 166%; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='142'], .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='142'] { background-size: 166%; } .champ-select-spectate-component [data-id='136'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='432'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='53'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='63'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='42'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='36'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='28'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='86'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='420'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='427'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='24'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='45'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='29'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='27'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='102'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='113'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='13'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='78'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='80'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='76'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='25'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='90'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='236'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='7'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='240'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='266'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='203'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='121'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='85'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='82'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='164'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='3'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='497'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='498'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='163'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='110'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='517'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='100'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='250'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='523'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='9'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='876'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='147'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='526'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='711'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='221'] { transform: scaleX(-1); } .champ-select-spectate-component [data-id='888'] { transform: scaleX(-1); } @font-face { font-family: "Shentox"; src: url("/fe/lol-esports-spectate/assets/shentox/shentox.ttf"); } @font-face { font-family: "Shentox"; src: url("/fe/lol-esports-spectate/assets/shentox/shentox-semibold.ttf"); font-weight: 600; } @font-face { font-family: "Shentox"; src: url("/fe/lol-esports-spectate/assets/shentox/shentox-light.ttf"); font-weight: 300; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper { position: absolute; top: 0; bottom: 0; left: 0; right: 0; letter-spacing: 0.8px; font-size: 16px; font-weight: 300; text-shadow: 1px 1px 2px #000, 0px 1px 2px #000, 0px 0px 3px #000, 0px 0px 3px #000, 1px 1px 4px #000; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background, .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-size: 241%; background-position: 52% 28%; opacity: 1; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background-wrapper { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .action-text { direction: ltr; opacity: 0; position: absolute; bottom: 20px; transition: opacity 0.2s; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .edge-border { opacity: 0; position: absolute; top: 0; width: 0; height: 100%; border-left: 0px solid #000; border-right: 0px solid #000; transition: width 0.15s; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .spells { opacity: 1; transition: opacity 0.3s; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .spell { width: 30px; border: 2px solid #000; position: absolute; box-shadow: 0 0 1px #000; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .spell:first-child { top: 7px; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .spell:nth-child(2) { top: 39px; } .champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .summoner-name { position: absolute; bottom: 2px; transition: left 0.2s, right 0.2s; } .champ-select-spectate-component .summoner-object-component.no-champion .spells { opacity: 0; } .champ-select-spectate-component .summoner-object-component.is-picking-now .action-text { opacity: 1; } .champ-select-spectate-component .summoner-object-component.champion-not-locked .background, .champ-select-spectate-component .summoner-object-component.champion-not-locked .old-background { -webkit-filter: brightness(0.8); } .champ-select-spectate-component .summoner-object-component.champion-locked .background { animation: champLockedInAnimation 1.5s ease-out; } .champ-select-spectate-component .your-party .summoner-object-component .summoner-object-wrapper .spell { left: 11px; } .champ-select-spectate-component .your-party .summoner-object-component .summoner-object-wrapper .summoner-name { right: 9px; } .champ-select-spectate-component .your-party .summoner-object-component .summoner-object-wrapper .edge-border { right: 0px; background: var(--left-side-color); } .champ-select-spectate-component .your-party .summoner-object-component .summoner-object-wrapper .action-text { right: 15px; } .champ-select-spectate-component .your-party .summoner-object-component.is-picking-now .edge-border { width: 4px; border-left: 3px solid #000; opacity: 1; } .champ-select-spectate-component .your-party .summoner-object-component.is-picking-now .summoner-name { right: 15px; } .champ-select-spectate-component .your-party .summoner-object-component.is-picking-now .action-text { animation: fadeInRightAnimation 0.2s, flickerAnimation 3s 0.2s cubic-bezier(0.21, 0.89, 0.2, 0.88) infinite; } .champ-select-spectate-component .your-party .summoner-object-component .background-wrapper { transform: scaleX(-1); } .champ-select-spectate-component .enemy-party .summoner-object-component .summoner-object-wrapper .spell { right: 11px; } .champ-select-spectate-component .enemy-party .summoner-object-component .summoner-object-wrapper .summoner-name { left: 10px; } .champ-select-spectate-component .enemy-party .summoner-object-component .summoner-object-wrapper .edge-border { left: 0px; background: var(--right-side-color); } .champ-select-spectate-component .enemy-party .summoner-object-component .summoner-object-wrapper .action-text { left: 15px; } .champ-select-spectate-component .enemy-party .summoner-object-component.is-picking-now .edge-border { width: 4px; border-right: 3px solid #000; opacity: 1; } .champ-select-spectate-component .enemy-party .summoner-object-component.is-picking-now .summoner-name { left: 15px; } .champ-select-spectate-component .enemy-party .summoner-object-component.is-picking-now .action-text { animation: fadeInLeftAnimation 0.2s, flickerAnimation 3s 0.2s cubic-bezier(0.21, 0.89, 0.2, 0.88) infinite; } @-moz-keyframes flickerAnimation { 20% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes flickerAnimation { 20% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes flickerAnimation { 20% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 1; } } @keyframes flickerAnimation { 20% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeInRightAnimation { 0% { opacity: 0; right: 23px; } 100% { opacity: 1; right: 15px; } } @-webkit-keyframes fadeInRightAnimation { 0% { opacity: 0; right: 23px; } 100% { opacity: 1; right: 15px; } } @-o-keyframes fadeInRightAnimation { 0% { opacity: 0; right: 23px; } 100% { opacity: 1; right: 15px; } } @keyframes fadeInRightAnimation { 0% { opacity: 0; right: 23px; } 100% { opacity: 1; right: 15px; } } @-moz-keyframes fadeInLeftAnimation { 0% { opacity: 0; left: 23px; } 100% { opacity: 1; left: 15px; } } @-webkit-keyframes fadeInLeftAnimation { 0% { opacity: 0; left: 23px; } 100% { opacity: 1; left: 15px; } } @-o-keyframes fadeInLeftAnimation { 0% { opacity: 0; left: 23px; } 100% { opacity: 1; left: 15px; } } @keyframes fadeInLeftAnimation { 0% { opacity: 0; left: 23px; } 100% { opacity: 1; left: 15px; } } @-moz-keyframes champLockedInAnimation { 0% { -webkit-filter: brightness(1); } 4% { -webkit-filter: brightness(1.8); } 100% { -webkit-filter: brightness(1); } } @-webkit-keyframes champLockedInAnimation { 0% { -webkit-filter: brightness(1); } 4% { -webkit-filter: brightness(1.8); } 100% { -webkit-filter: brightness(1); } } @-o-keyframes champLockedInAnimation { 0% { -webkit-filter: brightness(1); } 4% { -webkit-filter: brightness(1.8); } 100% { -webkit-filter: brightness(1); } } @keyframes champLockedInAnimation { 0% { -webkit-filter: brightness(1); } 4% { -webkit-filter: brightness(1.8); } 100% { -webkit-filter: brightness(1); } }