.position-assignment.hide-pins .position-text { bottom: 384px; } .position-assignment { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .position-assignment .map-intro-video { position: absolute; } .position-assignment .map-static-image { position: absolute; top: 0; left: 0; } .position-assignment .map-side-assignment { background-image: url("/fe/lol-champ-select/images/config/crystal-paladin.png"); background-size: contain; background-repeat: no-repeat; position: absolute; } .position-assignment .bottom-left .map-side-assignment { bottom: 65px; left: 30px; width: 88px; height: 100px; } .position-assignment .top-right .map-side-assignment { top: -342px; right: 121px; width: 74px; height: 84px; } .position-assignment .position-text { direction: ltr; position: absolute; left: 0; right: 0; bottom: 185px; text-align: center; color: #f0e6d2; } .position-assignment .position-text .position-assignment-title { font: italic normal 500 normal 18px/22px 'LoL Display'; } .position-assignment .position-text .position-assignment-label { font: normal normal bold normal 30px/32px 'LoL Display'; } .position-assignment.defocussed { -webkit-filter: brightness(35%); } .position-text .position-assignment-title { transform-origin: 50% 50%; animation-duration: 0.2s; animation-fill-mode: backwards; animation-name: position-assignment-scale-intro; transition-timing-function: cubic-bezier(1, 0, 1, 1); } .position-text .position-assignment-label { transform-origin: 50% 50%; animation-duration: 0.2s; animation-fill-mode: backwards; animation-name: position-assignment-scale-intro; transition-timing-function: cubic-bezier(1, 0, 1, 1); } .position-text.slot-id-0 .position-assignment-title { animation-delay: 0.72s; } .position-text.slot-id-0 .position-assignment-label { animation-delay: 0.85s; } .position-text.slot-id-1 .position-assignment-title { animation-delay: 1.42s; } .position-text.slot-id-1 .position-assignment-label { animation-delay: 1.55s; } .position-text.slot-id-2 .position-assignment-title { animation-delay: 2.12s; } .position-text.slot-id-2 .position-assignment-label { animation-delay: 2.25s; } .position-text.slot-id-3 .position-assignment-title { animation-delay: 2.82s; } .position-text.slot-id-3 .position-assignment-label { animation-delay: 2.95s; } .position-text.slot-id-4 .position-assignment-title { animation-delay: 3.52s; } .position-text.slot-id-4 .position-assignment-label { animation-delay: 3.65s; } .position-text.slot-id-5 .position-assignment-title { animation-delay: 4.219999999999999s; } .position-text.slot-id-5 .position-assignment-label { animation-delay: 4.35s; } .lane-intro-video { position: absolute; } .lane-intro-video.blue-top { top: 136px; left: 314px; } .lane-intro-video.blue-jungle { top: 212px; left: 314px; } .lane-intro-video.blue-middle { top: 236px; left: 314px; } .lane-intro-video.blue-bottom { top: 368px; left: 312px; } .lane-intro-video.red-top { top: 136px; left: 445px; } .lane-intro-video.red-jungle { top: 137px; left: 580px; } .lane-intro-video.red-middle { top: 127px; left: 600px; } .lane-intro-video.red-bottom { top: 140px; left: 762px; } .position-assignment .position-assignment-pins .position-assignment-pin { position: absolute; width: 86px; height: 506px; transform: translateX(-50%); } .position-assignment .position-assignment-pins .position-assignment-pin.is-self { width: 138px; height: 532px; transform: translate(-50%, -4%); } .position-assignment .position-assignment-pins .position-assignment-pin .pin-container { width: 100%; position: relative; top: 97%; transform: translateY(-100%); display: flex; justify-content: center; } .position-assignment .position-assignment-pins .position-assignment-pin .pin-container .pin-static-image { position: relative; top: 3px; width: 46px; height: 64px; visibility: hidden; animation-name: pinFadeIn; animation-duration: 0.1s; animation-fill-mode: forwards; animation-delay: 0.35s; background-image: url("/fe/lol-champ-select/images/position-assignment/Pin.png"); background-size: contain; } .position-assignment .position-assignment-pins .position-assignment-pin .pin-container .pin-position-icon { width: 16px; height: 16px; position: absolute; top: 13px; opacity: 0; visibility: hidden; animation-name: pinFadeIn; animation-duration: 0.1s; animation-delay: 0.35s; animation-fill-mode: forwards; background-size: contain; } .position-assignment .position-assignment-pins .position-assignment-pin .pin-container .pin-position-icon.top { background-image: url("/fe/lol-champ-select/svg/position-top.svg"); } .position-assignment .position-assignment-pins .position-assignment-pin .pin-container .pin-position-icon.jungle { background-image: url("/fe/lol-champ-select/svg/position-jungle.svg"); } .position-assignment .position-assignment-pins .position-assignment-pin .pin-container .pin-position-icon.middle { background-image: url("/fe/lol-champ-select/svg/position-middle.svg"); } .position-assignment .position-assignment-pins .position-assignment-pin .pin-container .pin-position-icon.utility { background-image: url("/fe/lol-champ-select/svg/position-utility.svg"); } .position-assignment .position-assignment-pins .position-assignment-pin .pin-container .pin-position-icon.bottom { background-image: url("/fe/lol-champ-select/svg/position-bottom.svg"); } .position-assignment .position-assignment-pins .position-assignment-pin .pin-intro-video { position: absolute; } .position-assignment .position-assignment-pins .position-assignment-pin.is-self .pin-container .pin-static-image { top: 0px; width: 66px; height: 116px; background-image: url("/fe/lol-champ-select/images/position-assignment/Pin_Me.png"); } .position-assignment .position-assignment-pins .position-assignment-pin.is-self .pin-container .pin-position-icon { width: 29px; height: 29px; top: 17px; } .position-assignment .position-assignment-pins .position-assignment-pin.blue.top-1, .position-assignment .position-assignment-pins .position-assignment-pin.blue.top-2, .position-assignment .position-assignment-pins .position-assignment-pin.blue.top-3, .position-assignment .position-assignment-pins .position-assignment-pin.blue.top-4, .position-assignment .position-assignment-pins .position-assignment-pin.blue.top-5 { top: -217px; left: 422px; } .position-assignment .position-assignment-pins .position-assignment-pin.blue.jungle-1, .position-assignment .position-assignment-pins .position-assignment-pin.blue.jungle-2, .position-assignment .position-assignment-pins .position-assignment-pin.blue.jungle-3, .position-assignment .position-assignment-pins .position-assignment-pin.blue.jungle-4, .position-assignment .position-assignment-pins .position-assignment-pin.blue.jungle-5 { top: -180px; left: 494px; } .position-assignment .position-assignment-pins .position-assignment-pin.blue.middle-1, .position-assignment .position-assignment-pins .position-assignment-pin.blue.middle-2, .position-assignment .position-assignment-pins .position-assignment-pin.blue.middle-3, .position-assignment .position-assignment-pins .position-assignment-pin.blue.middle-4, .position-assignment .position-assignment-pins .position-assignment-pin.blue.middle-5 { top: -125px; left: 561px; } .position-assignment .position-assignment-pins .position-assignment-pin.blue.bottom-1, .position-assignment .position-assignment-pins .position-assignment-pin.blue.bottom-3, .position-assignment .position-assignment-pins .position-assignment-pin.blue.bottom-5 { top: -24px; left: 679px; } .position-assignment .position-assignment-pins .position-assignment-pin.blue.bottom-2, .position-assignment .position-assignment-pins .position-assignment-pin.blue.bottom-4 { top: -16px; left: 736px; } .position-assignment .position-assignment-pins .position-assignment-pin.red.top-1, .position-assignment .position-assignment-pins .position-assignment-pin.red.top-2, .position-assignment .position-assignment-pins .position-assignment-pin.red.top-3, .position-assignment .position-assignment-pins .position-assignment-pin.red.top-4, .position-assignment .position-assignment-pins .position-assignment-pin.red.top-5 { top: -273px; left: 533px; } .position-assignment .position-assignment-pins .position-assignment-pin.red.jungle-1, .position-assignment .position-assignment-pins .position-assignment-pin.red.jungle-2, .position-assignment .position-assignment-pins .position-assignment-pin.red.jungle-3, .position-assignment .position-assignment-pins .position-assignment-pin.red.jungle-4, .position-assignment .position-assignment-pins .position-assignment-pin.red.jungle-5 { top: -246px; left: 620px; } .position-assignment .position-assignment-pins .position-assignment-pin.red.middle-1, .position-assignment .position-assignment-pins .position-assignment-pin.red.middle-2, .position-assignment .position-assignment-pins .position-assignment-pin.red.middle-3, .position-assignment .position-assignment-pins .position-assignment-pin.red.middle-4, .position-assignment .position-assignment-pins .position-assignment-pin.red.middle-5 { top: -185px; left: 662px; } .position-assignment .position-assignment-pins .position-assignment-pin.red.bottom-1, .position-assignment .position-assignment-pins .position-assignment-pin.red.bottom-3, .position-assignment .position-assignment-pins .position-assignment-pin.red.bottom-5 { top: -145px; left: 838px; } .position-assignment .position-assignment-pins .position-assignment-pin.red.bottom-2, .position-assignment .position-assignment-pins .position-assignment-pin.red.bottom-4 { top: -108px; left: 845px; } @-moz-keyframes position-assignment-scale-intro { 0% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes position-assignment-scale-intro { 0% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @-o-keyframes position-assignment-scale-intro { 0% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes position-assignment-scale-intro { 0% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @-moz-keyframes pinFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes pinFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes pinFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes pinFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .boost-notification-container { display: flex; flex-direction: column; } .boost-notification-container .boost-body .skin-unlocked { font-weight: 700; } .trade-dialog .trade-content-container .trade-message { font-family: var(--font-body); } .trade-dialog .trade-content-container .trade-message { -webkit-user-select: none; } .trade-dialog .trade-content-container .trade-message { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .trade-dialog .trade-content-container .trade-message { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .trade-dialog .trade-content-container .trade-message:lang(ja-jp) { font-size: 13px; } .trade-dialog .trade-content-container .trade-message:lang(ar-ae) { letter-spacing: 0; } .trade-dialog { position: absolute; width: 450px; height: 94px; margin-top: -25px; } .trade-dialog .trade-wrapper { display: flex; flex-direction: column; width: 100%; height: 120px; } .trade-dialog .trade-container { position: relative; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(to left, #000, #000); -webkit-mask-repeat: no-repeat; -webkit-mask-position: top center; -webkit-mask-size: 100%; overflow: hidden; } .trade-dialog .champion-bg-overlay { position: absolute; width: 60%; height: 100%; top: 0; left: 0; background-image: radial-gradient(30% 80% at 100% 50%, transparent 0%, transparent 60%, #010a13 85%, #010a13 100%); background-size: 100%; background-repeat: no-repeat; } .trade-dialog .champion-bg-container { position: absolute; top: -12%; left: 30%; width: 100%; } .trade-dialog .champion-bg-container .champion-bg { overflow: hidden; position: absolute; width: 100%; padding-top: 59%; transform-origin: 38% 48%; background-size: contain; background-repeat: no-repeat; background-position: top center; } .trade-dialog .trade-content-container { position: relative; display: flex; flex-direction: column; align-items: flex-start ; justify-content: center; height: 100%; top: 0; bottom: 0; padding: 0 0 0 18px; } .trade-dialog .trade-content-container:before { content: ''; position: absolute; top: 0; bottom: 0; width: 18px; left: 0; } .trade-dialog .trade-content-container .trade-message { width: 50%; font-size: 14px; flex-grow: 1; display: flex; align-items: center; } .trade-dialog .trade-content-container .button-group { width: 100%; display: flex; } .trade-dialog .trade-content-container .action-button { width: 125px; height: 40px; margin: 10px; margin-left: 0; display: flex; flex-direction: column; } .trade-dialog .trade-content-container .action-icon { width: 15px; height: 20px; margin-right: 10px; display: flex; -webkit-mask: url("/fe/lol-static-assets/images/check_mask.png") no-repeat center; -webkit-mask-size: 20px; background-color: #cdbe91; } .trade-dialog .trade-content-container .decline-icon { width: 15px; height: 17px; margin-right: 10px; display: flex; -webkit-mask: url("/fe/lol-uikit/images/x-icon.png") no-repeat center; -webkit-mask-size: 15px; background-color: #cdbe91; } .trade-dialog .trade-content-container .action-button-inner-container { display: flex; } .trade-dialog .trade-content-container .action-text { display: flex; } .trade-dialog .trade-timer-wrapper { position: relative; height: 5px; left: 0; bottom: 0; width: 100%; } .trade-dialog .trade-timer { position: relative; border-top: thin solid transparent; border-image-source: linear-gradient(to left, #463714 79%, #785a28 100%); border-width: 1px 0 0 0; border-image-slice: 1 0 0 0; height: 5px; left: 0; bottom: 0; width: 100%; } .trade-dialog .trade-timer:before { content: ''; position: absolute; border: thin solid transparent; border-left: none; top: 0; left: 0; bottom: 0; width: 100%; background: linear-gradient(to right, #0a323c 0%, #0596aa 75%, #0ac8b9 90%, #cdfafa 99%, #cdfafa 100%); animation-duration: 15s; animation-name: tradeTimerAnimation; animation-fill-mode: forwards; animation-timing-function: linear; background-repeat: no-repeat; transform: scaleX(0); transform-origin: left; } .trade-dialog .close-button-frame { position: absolute; width: 37px; height: 37px; top: -18px; right: -18px ; left: auto ; padding: 2px; border-radius: 50%; border: 2px solid #463714; background-color: #010a13; box-sizing: border-box; transform-origin: 50% 50%; transition: 500ms all cubic-bezier(0.02, 0.85, 0.08, 0.99), 100ms opacity ease; } .trade-dialog .close-button-frame .close-button { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 50%; transition: 500ms all cubic-bezier(0.02, 0.85, 0.08, 0.99), 100ms opacity ease; } .trade-dialog .sub-frame-top, .trade-dialog .sub-frame-right { position: absolute; } .trade-dialog .sub-frame-top::before, .trade-dialog .sub-frame-right::before { content: ''; position: absolute; } .trade-dialog .sub-frame-top, .trade-dialog .sub-frame-right, .trade-dialog .close-button-frame, .trade-dialog .close-button-frame .close-button { opacity: 0; animation: fadeIn 500ms ease forwards; } .trade-dialog .sub-frame-top { top: -4px; right: 13px; width: calc(15% - 13px); height: 0; } .trade-dialog .sub-frame-top::before { width: calc(100% - 8px); height: 0; border-image-source: url("/fe/lol-champ-select/images/trades/sub-border-secondary-horizontal.png"); border-width: 4px 0 0 4px; border-image-width: 4px 0 0 4px; border-image-slice: 4 4 0 4; border-image-repeat: stretch; border-style: solid; } .trade-dialog .sub-frame-right { top: 17px; right: 0; width: 0; height: calc(100% - 15px); } .trade-dialog .sub-frame-right::before { height: calc(100% - 8px); width: 0; border-image-source: url("/fe/lol-champ-select/images/trades/sub-border-secondary-vertical.png"); border-width: 0 4px 4px 0; border-image-width: 0 4px 4px 0; border-image-slice: 4 4 4 0; border-image-repeat: stretch; border-style: solid; } .trade-dialog.animated .trade-container { -webkit-mask-size: 100% 0%; } .trade-dialog.animated .champion-bg-container { transform: translateX(-15px); opacity: 0; } .trade-dialog.animated .champion-bg-container.champion-bg { transition: 300ms all linear; } .trade-dialog.animated .trade-content-container .trade-message { opacity: 0; } .trade-dialog.animated .trade-timer { bottom: 75%; } .trade-dialog.animated .close-button-frame { top: calc(25% - 18px); transform: scale(0.5); opacity: 0; } .trade-dialog.animated .close-button-frame .close-button { transform: rotate(100deg); opacity: 0; } .trade-dialog.animated .sub-frame-top, .trade-dialog.animated .sub-frame-right { transition: 500ms all cubic-bezier(0.02, 0.85, 0.08, 0.99), 100ms opacity ease; } .trade-dialog.animated .sub-frame-top { top: 25%; right: 4px; width: 5px; opacity: 0; } .trade-dialog.animated .sub-frame-right { top: calc(25% + 8px); height: 0; opacity: 0; } .trade-dialog.animated.active .trade-container { -webkit-mask-size: 100% 25%; animation: maskIntro 500ms cubic-bezier(0.02, 0.85, 0.08, 0.99) forwards; } .trade-dialog.animated.active .trade-timer-wrapper { animation: tradeTimerIntro 500ms cubic-bezier(0.02, 0.85, 0.08, 0.99) forwards; } .trade-dialog.animated.active .trade-content-container .trade-message { opacity: 0; transform: translateX(-15px); animation: fadeIn 1000ms 100ms ease forwards, bgPosition 500ms 100ms ease forwards; } .trade-dialog.animated.active .champion-bg-container { animation: fadeIn 100ms linear forwards, bgPosition 600ms ease forwards; } .trade-dialog.animated.active .close-button-frame { top: -18px; transform: scale(1); } .trade-dialog.animated.active .close-button-frame .close-button { transform: rotate(0deg); } .trade-dialog.animated.active .sub-frame-top { top: -4px; right: 13px; width: calc(15% - 13px); } .trade-dialog.animated.active .sub-frame-right { top: 17px; height: calc(100% - 15px); } .trade-dialog.animated.active.received .champion-bg-container .champion-bg { transform: scale(1.1); animation: bgFilter 500ms ease forwards, bgScale 14700ms 300ms linear reverse forwards; } .trade-dialog.animated.active.not-received .champion-bg-container .champion-bg { transform: scale(1.35); animation: bgFilter 500ms ease forwards, bgScale 14700ms 300ms linear forwards; } .trade-dialog.animated.active.cancelled .champion-bg-container .champion-bg, .trade-dialog.animated.active.declined .champion-bg-container .champion-bg, .trade-dialog.animated.active.busy .champion-bg-container .champion-bg, .trade-dialog.animated.active.error .champion-bg-container .champion-bg { animation-play-state: running, paused; animation-name: bgCanceled, bgScale; transition: 300ms all ease; } .trade-dialog.animated.active.accepted .champion-bg-container .champion-bg { animation-play-state: paused; } @-moz-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes bgFilter { from { -webkit-filter: brightness(1.75); } to { -webkit-filter: brightness(1); } } @-webkit-keyframes bgFilter { from { -webkit-filter: brightness(1.75); } to { -webkit-filter: brightness(1); } } @-o-keyframes bgFilter { from { -webkit-filter: brightness(1.75); } to { -webkit-filter: brightness(1); } } @keyframes bgFilter { from { -webkit-filter: brightness(1.75); } to { -webkit-filter: brightness(1); } } @-moz-keyframes bgPosition { from { transform: translateX(-15px); } to { transform: translateX(0); } } @-webkit-keyframes bgPosition { from { transform: translateX(-15px); } to { transform: translateX(0); } } @-o-keyframes bgPosition { from { transform: translateX(-15px); } to { transform: translateX(0); } } @keyframes bgPosition { from { transform: translateX(-15px); } to { transform: translateX(0); } } @-moz-keyframes bgScale { from { transform: scale(1.35); } to { transform: scale(1.1); } } @-webkit-keyframes bgScale { from { transform: scale(1.35); } to { transform: scale(1.1); } } @-o-keyframes bgScale { from { transform: scale(1.35); } to { transform: scale(1.1); } } @keyframes bgScale { from { transform: scale(1.35); } to { transform: scale(1.1); } } @-moz-keyframes bgCanceled { from { -webkit-filter: grayscale(0%); } to { -webkit-filter: grayscale(100%); } } @-webkit-keyframes bgCanceled { from { -webkit-filter: grayscale(0%); } to { -webkit-filter: grayscale(100%); } } @-o-keyframes bgCanceled { from { -webkit-filter: grayscale(0%); } to { -webkit-filter: grayscale(100%); } } @keyframes bgCanceled { from { -webkit-filter: grayscale(0%); } to { -webkit-filter: grayscale(100%); } } @-moz-keyframes maskIntro { from { -webkit-mask-size: 100% 25%; } to { -webkit-mask-size: 100% 100%; } } @-webkit-keyframes maskIntro { from { -webkit-mask-size: 100% 25%; } to { -webkit-mask-size: 100% 100%; } } @-o-keyframes maskIntro { from { -webkit-mask-size: 100% 25%; } to { -webkit-mask-size: 100% 100%; } } @keyframes maskIntro { from { -webkit-mask-size: 100% 25%; } to { -webkit-mask-size: 100% 100%; } } @-moz-keyframes tradeTimerIntro { 0% { transform: translateY(-100px); } 100% { transform: translateY(5px); } } @-webkit-keyframes tradeTimerIntro { 0% { transform: translateY(-100px); } 100% { transform: translateY(5px); } } @-o-keyframes tradeTimerIntro { 0% { transform: translateY(-100px); } 100% { transform: translateY(5px); } } @keyframes tradeTimerIntro { 0% { transform: translateY(-100px); } 100% { transform: translateY(5px); } } @-moz-keyframes tradeTimerAnimation { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @-webkit-keyframes tradeTimerAnimation { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @-o-keyframes tradeTimerAnimation { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @keyframes tradeTimerAnimation { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .swap-dialog .swap-content-container .swap-message { font-family: var(--font-body); } .swap-dialog .swap-content-container .swap-message { -webkit-user-select: none; } .swap-dialog .swap-content-container .swap-message { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .swap-dialog .swap-content-container .swap-message { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .swap-dialog .swap-content-container .swap-message:lang(ja-jp) { font-size: 13px; } .swap-dialog .swap-content-container .swap-message:lang(ar-ae) { letter-spacing: 0; } .swap-dialog { position: absolute; width: 300px; height: 94px; margin-top: -25px; margin-left: 5px; } .swap-dialog .swap-wrapper { display: flex; flex-direction: column; width: 100%; left: 100px; height: 120px; } .swap-dialog .swap-container { position: relative; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(to left, #000, #000); -webkit-mask-repeat: no-repeat; -webkit-mask-position: top center; -webkit-mask-size: 100%; overflow: hidden; } .swap-dialog .swap-content-container { position: relative; display: flex; flex-direction: column; align-items: flex-start ; justify-content: center; height: 100%; top: 0; bottom: 0; padding: 0 0 0 18px; } .swap-dialog .swap-content-container:before { content: ''; position: absolute; top: 0; bottom: 0; width: 18px; left: 0; } .swap-dialog .swap-content-container .swap-message { width: 80%; font-size: 14px; flex-grow: 1; display: flex; align-items: center; } .swap-dialog .swap-content-container .button-group { width: 100%; display: flex; } .swap-dialog .swap-content-container .action-button { width: 125px; height: 40px; margin: 10px; margin-left: 0; display: flex; flex-direction: column; } .swap-dialog .swap-content-container .action-icon { width: 15px; height: 20px; margin-right: 10px; display: flex; -webkit-mask: url("/fe/lol-static-assets/images/check_mask.png") no-repeat center; -webkit-mask-size: 20px; background-color: #cdbe91; } .swap-dialog .swap-content-container .decline-icon { width: 15px; height: 17px; margin-right: 10px; display: flex; -webkit-mask: url("/fe/lol-uikit/images/x-icon.png") no-repeat center; -webkit-mask-size: 15px; background-color: #cdbe91; } .swap-dialog .swap-content-container .action-button-inner-container { display: flex; } .swap-dialog .swap-content-container .action-text { display: flex; } .swap-dialog .swap-timer-wrapper { position: relative; height: 5px; left: 0; bottom: 0; width: 100%; } .swap-dialog .swap-timer { position: relative; border-top: thin solid transparent; border-image-source: linear-gradient(to left, #463714 79%, #785a28 100%); border-width: 1px 0 0 0; border-image-slice: 1 0 0 0; height: 5px; left: 0; bottom: 0; width: 100%; } .swap-dialog .swap-timer:before { content: ''; position: absolute; border: thin solid transparent; border-left: none; top: 0; left: 0; bottom: 0; width: 100%; background: linear-gradient(to right, #0a323c 0%, #0596aa 75%, #0ac8b9 90%, #cdfafa 99%, #cdfafa 100%); animation-duration: 10s; animation-name: swapTimerAnimation; animation-fill-mode: forwards; animation-timing-function: linear; background-repeat: no-repeat; transform: scaleX(0); transform-origin: left; } .swap-dialog .close-button-frame { position: absolute; width: 37px; height: 37px; top: -18px; right: -18px ; left: auto ; padding: 2px; border-radius: 50%; border: 2px solid #463714; background-color: #010a13; box-sizing: border-box; transform-origin: 50% 50%; transition: 500ms all cubic-bezier(0.02, 0.85, 0.08, 0.99), 100ms opacity ease; } .swap-dialog .close-button-frame .close-button { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 50%; transition: 500ms all cubic-bezier(0.02, 0.85, 0.08, 0.99), 100ms opacity ease; } .swap-dialog .sub-frame-top, .swap-dialog .sub-frame-right { position: absolute; } .swap-dialog .sub-frame-top::before, .swap-dialog .sub-frame-right::before { content: ''; position: absolute; } .swap-dialog .sub-frame-top, .swap-dialog .sub-frame-right, .swap-dialog .close-button-frame, .swap-dialog .close-button-frame .close-button { opacity: 0; animation: fadeIn 500ms ease forwards; } .swap-dialog .sub-frame-top { top: -4px; right: 13px; width: calc(15% - 13px); height: 0; } .swap-dialog .sub-frame-top::before { width: calc(100% - 8px); height: 0; border-image-source: url("/fe/lol-champ-select/images/swaps/sub-border-secondary-horizontal.png"); border-width: 4px 0 0 4px; border-image-width: 4px 0 0 4px; border-image-slice: 4 4 0 4; border-image-repeat: stretch; border-style: solid; } .swap-dialog .sub-frame-right { top: 17px; right: 0; width: 0; height: calc(100% - 15px); } .swap-dialog .sub-frame-right::before { height: calc(100% - 8px); width: 0; border-image-source: url("/fe/lol-champ-select/images/swaps/sub-border-secondary-vertical.png"); border-width: 0 4px 4px 0; border-image-width: 0 4px 4px 0; border-image-slice: 4 4 4 0; border-image-repeat: stretch; border-style: solid; } .swap-dialog.animated .swap-container { -webkit-mask-size: 100% 0%; } .swap-dialog.animated .swap-content-container .swap-message { opacity: 0; } .swap-dialog.animated .close-button-frame { top: calc(25% - 18px); transform: scale(0.5); opacity: 0; } .swap-dialog.animated .close-button-frame .close-button { transform: rotate(100deg); opacity: 0; } .swap-dialog.animated .sub-frame-top, .swap-dialog.animated .sub-frame-right { transition: 500ms all cubic-bezier(0.02, 0.85, 0.08, 0.99), 100ms opacity ease; } .swap-dialog.animated .sub-frame-top { top: 25%; right: 4px; width: 5px; opacity: 0; } .swap-dialog.animated .sub-frame-right { top: calc(25% + 8px); height: 0; opacity: 0; } .swap-dialog.animated.active .swap-container { -webkit-mask-size: 100% 25%; animation: maskIntro 500ms cubic-bezier(0.02, 0.85, 0.08, 0.99) forwards; } .swap-dialog.animated.active .swap-timer-wrapper { animation: swapTimerIntro 500ms cubic-bezier(0.02, 0.85, 0.08, 0.99) forwards; } .swap-dialog.animated.active .swap-content-container .swap-message { opacity: 0; transform: translateX(-15px); animation: fadeIn 1000ms 100ms ease forwards, bgPosition 500ms 100ms ease forwards; } .swap-dialog.animated.active .close-button-frame { top: -18px; transform: scale(1); } .swap-dialog.animated.active .close-button-frame .close-button { transform: rotate(0deg); } .swap-dialog.animated.active .sub-frame-top { top: -4px; right: 13px; width: calc(15% - 13px); } .swap-dialog.animated.active .sub-frame-right { top: 17px; height: calc(100% - 15px); } @-moz-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes bgFilter { from { -webkit-filter: brightness(1.75); } to { -webkit-filter: brightness(1); } } @-webkit-keyframes bgFilter { from { -webkit-filter: brightness(1.75); } to { -webkit-filter: brightness(1); } } @-o-keyframes bgFilter { from { -webkit-filter: brightness(1.75); } to { -webkit-filter: brightness(1); } } @keyframes bgFilter { from { -webkit-filter: brightness(1.75); } to { -webkit-filter: brightness(1); } } @-moz-keyframes bgPosition { from { transform: translateX(-15px); } to { transform: translateX(0); } } @-webkit-keyframes bgPosition { from { transform: translateX(-15px); } to { transform: translateX(0); } } @-o-keyframes bgPosition { from { transform: translateX(-15px); } to { transform: translateX(0); } } @keyframes bgPosition { from { transform: translateX(-15px); } to { transform: translateX(0); } } @-moz-keyframes bgScale { from { transform: scale(1.35); } to { transform: scale(1.1); } } @-webkit-keyframes bgScale { from { transform: scale(1.35); } to { transform: scale(1.1); } } @-o-keyframes bgScale { from { transform: scale(1.35); } to { transform: scale(1.1); } } @keyframes bgScale { from { transform: scale(1.35); } to { transform: scale(1.1); } } @-moz-keyframes bgCanceled { from { -webkit-filter: grayscale(0%); } to { -webkit-filter: grayscale(100%); } } @-webkit-keyframes bgCanceled { from { -webkit-filter: grayscale(0%); } to { -webkit-filter: grayscale(100%); } } @-o-keyframes bgCanceled { from { -webkit-filter: grayscale(0%); } to { -webkit-filter: grayscale(100%); } } @keyframes bgCanceled { from { -webkit-filter: grayscale(0%); } to { -webkit-filter: grayscale(100%); } } @-moz-keyframes maskIntro { from { -webkit-mask-size: 100% 25%; } to { -webkit-mask-size: 100% 100%; } } @-webkit-keyframes maskIntro { from { -webkit-mask-size: 100% 25%; } to { -webkit-mask-size: 100% 100%; } } @-o-keyframes maskIntro { from { -webkit-mask-size: 100% 25%; } to { -webkit-mask-size: 100% 100%; } } @keyframes maskIntro { from { -webkit-mask-size: 100% 25%; } to { -webkit-mask-size: 100% 100%; } } @-moz-keyframes swapTimerIntro { 0% { transform: translateY(-100px); } 100% { transform: translateY(0px); } } @-webkit-keyframes swapTimerIntro { 0% { transform: translateY(-100px); } 100% { transform: translateY(0px); } } @-o-keyframes swapTimerIntro { 0% { transform: translateY(-100px); } 100% { transform: translateY(0px); } } @keyframes swapTimerIntro { 0% { transform: translateY(-100px); } 100% { transform: translateY(0px); } } @-moz-keyframes swapTimerAnimation { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @-webkit-keyframes swapTimerAnimation { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @-o-keyframes swapTimerAnimation { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @keyframes swapTimerAnimation { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .champion-select .corner-game-info-container .team-size, .champion-select .corner-game-info-container .queue-name { font-family: var(--font-display); } .champion-select .corner-game-info-container .team-size, .champion-select .corner-game-info-container .queue-name { -webkit-user-select: none; } .champion-select .corner-game-info-container .team-size, .champion-select .corner-game-info-container .queue-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .champion-select .corner-game-info-container .team-size, .champion-select .corner-game-info-container .queue-name { text-transform: uppercase; } .champion-select .corner-game-info-container .team-size:lang(ko-kr), .champion-select .corner-game-info-container .queue-name:lang(ko-kr), .champion-select .corner-game-info-container .team-size:lang(ja-jp), .champion-select .corner-game-info-container .queue-name:lang(ja-jp), .champion-select .corner-game-info-container .team-size:lang(tr-tr), .champion-select .corner-game-info-container .queue-name:lang(tr-tr), .champion-select .corner-game-info-container .team-size:lang(el-gr), .champion-select .corner-game-info-container .queue-name:lang(el-gr), .champion-select .corner-game-info-container .team-size:lang(th-th), .champion-select .corner-game-info-container .queue-name:lang(th-th), .champion-select .corner-game-info-container .team-size:lang(zh-tw), .champion-select .corner-game-info-container .queue-name:lang(zh-tw) { text-transform: none; } .champion-select .corner-game-info-container .team-size, .champion-select .corner-game-info-container .queue-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .champion-select .corner-game-info-container .team-size:lang(ar-ae), .champion-select .corner-game-info-container .queue-name:lang(ar-ae) { letter-spacing: 0; } .champion-select .corner-game-info-container .team-size, .champion-select .corner-game-info-container .queue-name { font-family: var(--font-display); } .champion-select .corner-game-info-container .team-size, .champion-select .corner-game-info-container .queue-name { font-family: var(--font-display); } .champion-select .corner-game-info-container .team-size, .champion-select .corner-game-info-container .queue-name { -webkit-user-select: none; } .champion-select .corner-game-info-container .team-size, .champion-select .corner-game-info-container .queue-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .champion-select .corner-game-info-container .team-size, .champion-select .corner-game-info-container .queue-name { text-transform: uppercase; } .champion-select .corner-game-info-container .team-size:lang(ko-kr), .champion-select .corner-game-info-container .queue-name:lang(ko-kr), .champion-select .corner-game-info-container .team-size:lang(ja-jp), .champion-select .corner-game-info-container .queue-name:lang(ja-jp), .champion-select .corner-game-info-container .team-size:lang(tr-tr), .champion-select .corner-game-info-container .queue-name:lang(tr-tr), .champion-select .corner-game-info-container .team-size:lang(el-gr), .champion-select .corner-game-info-container .queue-name:lang(el-gr), .champion-select .corner-game-info-container .team-size:lang(th-th), .champion-select .corner-game-info-container .queue-name:lang(th-th), .champion-select .corner-game-info-container .team-size:lang(zh-tw), .champion-select .corner-game-info-container .queue-name:lang(zh-tw) { text-transform: none; } .champion-select .corner-game-info-container .team-size, .champion-select .corner-game-info-container .queue-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .champion-select .corner-game-info-container .team-size:lang(ar-ae), .champion-select .corner-game-info-container .queue-name:lang(ar-ae) { letter-spacing: 0; } .champion-select { display: flex; flex-direction: row; justify-content: space-between; position: relative; height: 718px; background-size: cover; background-color: #010a13; -webkit-user-select: none; cursor: default; width: 1278px; overflow: hidden; } .champion-select .hidden { opacity: 0; pointer-events: none; } .champion-select .removed { display: none; } .champion-select .top-darken { position: absolute; width: 100%; height: 100px; background-image: url("/fe/lol-champ-select/images/top-darkening.png"); } .champion-select .ban-background-overlay-container { background-image: radial-gradient(circle farthest-corner at 50% 40%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 30%, #000 70%), linear-gradient(to top, rgba(183,0,0,0.37) 0%, rgba(165,0,0,0.37) 100%); width: 100%; height: 100%; position: absolute; opacity: 0; } .champion-select.is-banning-now .ban-background-overlay-container, .champion-select.ban-showcase-screen .ban-background-overlay-container { opacity: 1; } .champion-select.ban-showcase-screen .ban-background-overlay-container { background-image: radial-gradient(circle farthest-corner at 50% 40%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 30%, #000 70%), linear-gradient(to top, rgba(183,0,0,0.37) 0%, rgba(165,0,0,0.37) 100%); } .champion-select.ban-showcase-screen .champ-select-bg { -webkit-filter: contrast(1.2) brightness(0.9); } .champion-select .uikit-background-switcher { background: #000; transform: translateZ(0); } .champion-select .uikit-background-switcher:after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(to top, #010a13 0%, rgba(1,10,19,0) 40%); } .champion-select .uikit-background-switcher .locked { -webkit-filter: grayscale(50%); } .champion-select .uikit-background-switcher.locked::after { background: rgba(1,10,19,0.5); } .champion-select .champion-select-summoner-array-container { display: flex; justify-content: space-between; width: 100%; } .champion-select .champion-select-main-container { position: absolute; top: 0; bottom: 0; left: 25%; right: 25%; } .champion-select .loadouts-edit-wrapper { position: absolute; bottom: 16px; width: 100%; } .champion-select .game-info-container { text-align: center; position: absolute; bottom: 50px; width: 100%; } .champion-select .pregame-chat-box { position: absolute; bottom: 0; left: 0; width: 300px; height: 184px; margin-left: 20px; margin-bottom: 20px; } .champion-select.selected-screen.pre-animation, .champion-select.wait-screen.pre-animation { -webkit-filter: brightness(1.8) contrast(0.8); } .champion-select.selected-screen.pre-animation .uikit-background-switcher, .champion-select.wait-screen.pre-animation .uikit-background-switcher { opacity: 0; } .champion-select.selected-screen.pre-animation .summoner-array.your-party, .champion-select.wait-screen.pre-animation .summoner-array.your-party { transform: translateX(46.5px) translateY(5px) scale(0.9); } .champion-select.selected-screen.pre-animation .summoner-array.enemy-party, .champion-select.wait-screen.pre-animation .summoner-array.enemy-party { transform: translateX(-46.5px) translateY(5px) scale(0.9); } .champion-select.selected-screen.pre-animation .champion-select-main-container .timer-status, .champion-select.wait-screen.pre-animation .champion-select-main-container .timer-status { transform: translateY(-5px) scale(0.9); } .champion-select.selected-screen.pre-animation .champion-select-main-container .skin-select, .champion-select.wait-screen.pre-animation .champion-select-main-container .skin-select { transform: translateY(-10px) scale(0.9); } .champion-select.selected-screen.pre-animation .champion-select-main-container .loadouts-edit-wrapper, .champion-select.wait-screen.pre-animation .champion-select-main-container .loadouts-edit-wrapper { transform: translateX(calc(-50% - 25px)) translateY(5px) scale(0.9); } .champion-select.selected-screen.pre-animation .champion-splash-ring, .champion-select.wait-screen.pre-animation .champion-splash-ring { transform: translateX(-50%) translateY(5px) scale(0.9); } .champion-select .bottom-right-buttons { position: absolute; right: 20px; bottom: 19px; display: flex; align-items: flex-end; } .champion-select .corner-game-info-container { display: flex; flex-direction: column; align-items: flex-end; margin-right: 8px; margin-bottom: -1px; } .champion-select .corner-game-info-container .team-size { color: #a09b8c; } .champion-select .corner-game-info-container .queue-name { color: #a09b8c; } .champion-select .game-event-info-card-container { width: 325px; position: absolute; right: 0; bottom: 70px; pointer-events: none; } .champion-select.pick-screen .champion-splash-ring, .champion-select.ban-showcase-screen .champion-splash-ring { display: none; } .champion-select.position-assignment-screen .champion-splash-ring { display: none; } .champion-select.selected-screen .pick-ban-ring { display: none; } .champion-select.has-bans { --banning-phase-outro-animation-duration: 400ms; } .champion-select.has-bans .summoner-wrapper:nth-child(1n + 0) .summoner-object.right .champion-icon-container, .champion-select.has-bans .summoner-wrapper:nth-child(1n + 0) .summoner-object.right .player-details { animation-timing-function: cubic-bezier(0, 0.95, 0, 1); } .champion-select.has-bans .summoner-wrapper:nth-child(2n + 0) .summoner-object.right .champion-icon-container, .champion-select.has-bans .summoner-wrapper:nth-child(2n + 0) .summoner-object.right .player-details { animation-timing-function: cubic-bezier(0, 0.9, 0.7, 1); } .champion-select.has-bans .summoner-wrapper:nth-child(3n + 0) .summoner-object.right .champion-icon-container, .champion-select.has-bans .summoner-wrapper:nth-child(3n + 0) .summoner-object.right .player-details { animation-timing-function: cubic-bezier(0.1, 0.2, 0.3, 1); } .champion-select.has-bans .summoner-object.right .champion-icon-container, .champion-select.has-bans .summoner-object.right .player-details { animation-duration: 400ms; animation-delay: 300ms; animation-fill-mode: forwards; transition: 300ms opacity; } .champion-select.has-bans .summoner-object.right .champion-icon-container, .champion-select.has-bans .summoner-object.right .player-details { transform: translateX(52px); animation-name: summoner-object-draft-intro-right; } .champion-select.has-bans .champion-splash-ring .ring-splash-inner { transition: -webkit-filter var(--banning-phase-outro-animation-duration); } .champion-select.has-bans .champion-splash-ring .ring-splash-outer { transition: -webkit-filter var(--banning-phase-outro-animation-duration); } .champion-select.has-bans.banning .ring-splash-inner { -webkit-filter: saturate(0.5) contrast(0.8) brightness(1.2); } .champion-select.has-bans.banning .ring-splash-outer { -webkit-filter: saturate(0.8) brightness(0.9) contrast(0.3); } .champion-select.has-bans .summoner-array .lines { transition: -webkit-filter var(--banning-phase-outro-animation-duration); -webkit-filter: saturate(0.3); } @-moz-keyframes summoner-object-draft-intro-right { 0% { transform: translateX(52px); } 100% { transform: translateX(0); } } @-webkit-keyframes summoner-object-draft-intro-right { 0% { transform: translateX(52px); } 100% { transform: translateX(0); } } @-o-keyframes summoner-object-draft-intro-right { 0% { transform: translateX(52px); } 100% { transform: translateX(0); } } @keyframes summoner-object-draft-intro-right { 0% { transform: translateX(52px); } 100% { transform: translateX(0); } } .champion-select .picking .action-button, .champion-select.selected-screen .action-button, .champion-select .banning .action-button { font-family: var(--font-display); } .champion-select .picking .action-button, .champion-select.selected-screen .action-button, .champion-select .banning .action-button { font-family: var(--font-display); } .champion-select .picking .action-button, .champion-select.selected-screen .action-button, .champion-select .banning .action-button { -webkit-user-select: none; } .champion-select .picking .action-button, .champion-select.selected-screen .action-button, .champion-select .banning .action-button { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .champion-select .action-button { text-transform: uppercase; } .champion-select .action-button:lang(ko-kr), .champion-select .action-button:lang(ja-jp), .champion-select .action-button:lang(tr-tr), .champion-select .action-button:lang(el-gr), .champion-select .action-button:lang(th-th), .champion-select .action-button:lang(zh-tw) { text-transform: none; } .champion-select .picking .action-button, .champion-select.selected-screen .action-button, .champion-select .banning .action-button { color: #c8aa6e; font-size: 14px; font-weight: 700; letter-spacing: 0.0325em; } .champion-select .picking .action-button:lang(ar-ae), .champion-select.selected-screen .action-button:lang(ar-ae), .champion-select .banning .action-button:lang(ar-ae) { letter-spacing: 0; } .champion-select .picking .action-button:hover, .champion-select.selected-screen .action-button:hover, .champion-select .banning .action-button:hover { color: #f0e6d2; } .champion-select .picking .action-button:disabled, .champion-select.selected-screen .action-button:disabled, .champion-select .banning .action-button:disabled, .champion-select .picking .action-button:disabled:hover, .champion-select.selected-screen .action-button:disabled:hover, .champion-select .banning .action-button:disabled:hover, .champion-select .picking .action-button[disabled='true'], .champion-select.selected-screen .action-button[disabled='true'], .champion-select .banning .action-button[disabled='true'], .champion-select .picking .action-button[disabled='true']:hover, .champion-select.selected-screen .action-button[disabled='true']:hover, .champion-select .banning .action-button[disabled='true']:hover { color: #5c5b57; cursor: default; } .champion-select .picking .action-button:active, .champion-select.selected-screen .action-button:active, .champion-select .banning .action-button:active { color: #785a28; } .champion-select .picking .action-button, .champion-select.selected-screen .action-button { color: #b2d9db; } .champion-select .picking .action-button:hover, .champion-select.selected-screen .action-button:hover { color: #cdfafa; } .champion-select .picking .action-button:active, .champion-select.selected-screen .action-button:active { color: #005a82; } .champion-select .banning .action-button { color: #be1e37; } .champion-select .banning .action-button:hover { color: #ff2345; } .champion-select .banning .action-button:active { color: #802626; } .champion-select .picking .action-button, .champion-select.selected-screen .action-button, .champion-select .banning .action-button { font-family: var(--font-display); } .champion-select .picking .action-button, .champion-select.selected-screen .action-button, .champion-select .banning .action-button { font-family: var(--font-display); } .champion-select .picking .action-button, .champion-select.selected-screen .action-button, .champion-select .banning .action-button { -webkit-user-select: none; } .champion-select .picking .action-button, .champion-select.selected-screen .action-button, .champion-select .banning .action-button { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .champion-select .action-button { text-transform: uppercase; } .champion-select .action-button:lang(ko-kr), .champion-select .action-button:lang(ja-jp), .champion-select .action-button:lang(tr-tr), .champion-select .action-button:lang(el-gr), .champion-select .action-button:lang(th-th), .champion-select .action-button:lang(zh-tw) { text-transform: none; } .champion-select .picking .action-button, .champion-select.selected-screen .action-button, .champion-select .banning .action-button { color: #c8aa6e; font-size: 14px; font-weight: 700; letter-spacing: 0.0325em; } .champion-select .picking .action-button:lang(ar-ae), .champion-select.selected-screen .action-button:lang(ar-ae), .champion-select .banning .action-button:lang(ar-ae) { letter-spacing: 0; } .champion-select .picking .action-button:hover, .champion-select.selected-screen .action-button:hover, .champion-select .banning .action-button:hover { color: #f0e6d2; } .champion-select .picking .action-button:disabled, .champion-select.selected-screen .action-button:disabled, .champion-select .banning .action-button:disabled, .champion-select .picking .action-button:disabled:hover, .champion-select.selected-screen .action-button:disabled:hover, .champion-select .banning .action-button:disabled:hover, .champion-select .picking .action-button[disabled='true'], .champion-select.selected-screen .action-button[disabled='true'], .champion-select .banning .action-button[disabled='true'], .champion-select .picking .action-button[disabled='true']:hover, .champion-select.selected-screen .action-button[disabled='true']:hover, .champion-select .banning .action-button[disabled='true']:hover { color: #5c5b57; cursor: default; } .champion-select .picking .action-button:active, .champion-select.selected-screen .action-button:active, .champion-select .banning .action-button:active { color: #785a28; } .champion-select .picking .action-button, .champion-select.selected-screen .action-button { color: #b2d9db; } .champion-select .picking .action-button:hover, .champion-select.selected-screen .action-button:hover { color: #cdfafa; } .champion-select .picking .action-button:active, .champion-select.selected-screen .action-button:active { color: #005a82; } .champion-select .banning .action-button { color: #be1e37; } .champion-select .banning .action-button:hover { color: #ff2345; } .champion-select .banning .action-button:active { color: #802626; } .champion-select .action-button-container { width: 178px; height: 82px; margin: 0px auto; pointer-events: none; } .champion-select .action-button-container::before, .champion-select .action-button-container::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("/fe/lol-champ-select/images/config/linework-button.png"); background-repeat: no-repeat; background-position: 50% -240px; pointer-events: none; } .champion-select .action-button-container::after { background-image: url("/fe/lol-champ-select/images/config/linework-button-glow.png"); } .champion-select .action-button-container.golden-spatula-club::before, .champion-select .action-button-container.golden-spatula-club::after { background-position: 50% -346px; top: -14px; } .champion-select .action-button { direction: ltr; position: relative; text-align: center; height: 42px; top: 5px; pointer-events: all; cursor: pointer; } .champion-select .action-button:after { content: url("/fe/lol-champ-select/images/action-button/button-lockin-hover.png") url("/fe/lol-champ-select/images/action-button/button-lockin-click.png") url("/fe/lol-champ-select/images/action-button/button-lockin-disable.png") url("/fe/lol-champ-select/images/action-button/button-ban-hover.png") url("/fe/lol-champ-select/images/action-button/button-ban-inactive.png"); display: none; height: 0; width: 0; } .champion-select .action-button .action-button-background, .champion-select .action-button .action-button-background::before, .champion-select .action-button .action-button-background::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-repeat: no-repeat; background-size: 100%; background-position-y: center; } .champion-select .action-button .action-button-inner { padding-top: 10px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .champion-select.is-picking-now.pick-screen .action-button-container::after { background-position: 50% 0px; } .champion-select.is-banning-now .action-button-container::after { background-position: 50% -120px; } .champion-select .picking .action-button .action-button-background::before, .champion-select.selected-screen .action-button .action-button-background::before { background-image: url("/fe/lol-champ-select/images/action-button/button-lockin.png"); } .champion-select .picking .action-button:hover .action-button-background::after, .champion-select.selected-screen .action-button:hover .action-button-background::after { background-image: url("/fe/lol-champ-select/images/action-button/button-lockin-hover.png"); } .champion-select .picking .action-button:active .action-button-background::after, .champion-select.selected-screen .action-button:active .action-button-background::after { background-image: url("/fe/lol-champ-select/images/action-button/button-lockin-click.png"); } .champion-select .picking .action-button[disabled='true'], .champion-select.selected-screen .action-button[disabled='true'] { cursor: default; } .champion-select .picking .action-button[disabled='true'] .action-button-background::after, .champion-select.selected-screen .action-button[disabled='true'] .action-button-background::after { background-image: url("/fe/lol-champ-select/images/action-button/button-lockin-disable.png"); } .champion-select .banning .action-button .action-button-background::before { background-image: url("/fe/lol-champ-select/images/action-button/button-ban.png"); } .champion-select .banning .action-button:hover .action-button-background::after { background-image: url("/fe/lol-champ-select/images/action-button/button-ban-hover.png"); } .champion-select .banning .action-button:active .action-button-background::after { background-image: url("/fe/lol-champ-select/images/action-button/button-ban-inactive.png"); } .champion-select .banning .action-button[disabled='true'] { cursor: default; } .champion-select .banning .action-button[disabled='true'] .action-button-background::after { background-image: url("/fe/lol-champ-select/images/action-button/button-lockin-disable.png"); } .champion-select.is-banning-now.timer-less-than-11-seconds .action-button-container::after, .champion-select.is-picking-now.timer-less-than-11-seconds .action-button-container::after { animation-name: actionButtonGlowMultiPulse; animation-duration: 1s; animation-delay: 0s; animation-iteration-count: 10; animation-timing-function: cubic-bezier(0.46, 0.19, 0.7, 0.98); } @-moz-keyframes actionButtonGlowMultiPulse { 0% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 1; } } @-webkit-keyframes actionButtonGlowMultiPulse { 0% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 1; } } @-o-keyframes actionButtonGlowMultiPulse { 0% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes actionButtonGlowMultiPulse { 0% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 1; } } .ban-showcase .ban-announcement-label, .ban-showcase .waiting-for-their-bans-text { font-family: var(--font-display); } .ban-showcase .ban-announcement-label, .ban-showcase .waiting-for-their-bans-text { -webkit-user-select: none; } .ban-showcase .ban-announcement-label, .ban-showcase .waiting-for-their-bans-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .ban-showcase .ban-announcement-label, .ban-showcase .waiting-for-their-bans-text { text-transform: uppercase; } .ban-showcase .ban-announcement-label:lang(ko-kr), .ban-showcase .waiting-for-their-bans-text:lang(ko-kr), .ban-showcase .ban-announcement-label:lang(ja-jp), .ban-showcase .waiting-for-their-bans-text:lang(ja-jp), .ban-showcase .ban-announcement-label:lang(tr-tr), .ban-showcase .waiting-for-their-bans-text:lang(tr-tr), .ban-showcase .ban-announcement-label:lang(el-gr), .ban-showcase .waiting-for-their-bans-text:lang(el-gr), .ban-showcase .ban-announcement-label:lang(th-th), .ban-showcase .waiting-for-their-bans-text:lang(th-th), .ban-showcase .ban-announcement-label:lang(zh-tw), .ban-showcase .waiting-for-their-bans-text:lang(zh-tw) { text-transform: none; } .ban-showcase .ban-announcement-label, .ban-showcase .waiting-for-their-bans-text { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .ban-showcase .ban-announcement-label:lang(ar-ae), .ban-showcase .waiting-for-their-bans-text:lang(ar-ae) { letter-spacing: 0; } .ban-showcase { width: 100%; height: 388px; position: absolute; top: 125px; } .ban-showcase .ban-announcement-label { width: 564px; top: 140px; left: 39px; position: absolute; align-items: center; text-align: center; display: flex; margin-bottom: 4px; padding: 46px 0; } .ban-showcase .ban-announcement-label:before, .ban-showcase .ban-announcement-label:after { content: ''; flex: 1 1 100%; height: 1px; background-color: #be1e37; margin: 0 22px; } .ban-showcase .ban-announcement-text { direction: ltr; position: relative; } .ban-showcase .ban-announcement-label-glow { position: absolute; top: 0; left: 0; text-shadow: 0 0 8px #fff, 0 0 10px #fff; opacity: 0; } .ban-showcase .waiting-for-their-bans-label { width: 100%; position: absolute; top: 302px; text-align: center; opacity: 0; } .ban-showcase .waiting-for-their-bans-text { position: relative; } .ban-showcase .waiting-for-their-bans-glow { width: 100%; position: absolute; top: 0; left: 0; text-shadow: 0 0 8px #fff, 0 0 10px #fff; opacity: 0; } .ban-showcase .ban-announcement-label, .ban-showcase .waiting-for-their-bans-text { direction: ltr; letter-spacing: 0.2em; white-space: nowrap; } .ban-showcase .enemy-bans-wrapper { width: 100%; } .ban-showcase.waiting-for-their-team-bans .waiting-for-their-bans-label { animation-name: banShowcaseLabelZoomIntro, fadeIn0to1; animation-delay: 0s; animation-duration: 0.2s; animation-fill-mode: backwards; animation-timing-function: cubic-bezier(1, 0, 1, 1), linear; opacity: 1; } .ban-showcase.waiting-for-their-team-bans .waiting-for-their-bans-glow { animation-name: fadeOut1to0; animation-delay: 0.2s; animation-duration: 0.7s; animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77); } .ban-showcase.enemy-team-visible { animation-name: banShowcaseScaleOutro, fadeOut1to0; animation-delay: 6.1s; animation-duration: 0.2s; animation-timing-function: cubic-bezier(1, 0, 1, 1), linear; animation-fill-mode: forwards; } .ban-showcase.enemy-team-visible .waiting-for-their-bans-label { animation-name: banShowcaseLabelZoomOutro, fadeOut1to0; animation-delay: 0.53s; animation-duration: 0.2s; animation-timing-function: cubic-bezier(0, 0, 0, 1), linear; animation-fill-mode: backwards, backwards; } .ban-showcase.enemy-team-visible .ban-announcement-label { animation-name: banShowcaseAnnouncementLabelZoomIntro, fadeIn0to1; animation-delay: 0.7s, 0.7s; animation-duration: 0.2s, 0.2s; animation-fill-mode: backwards; animation-timing-function: cubic-bezier(1, 0, 1, 1), linear; } .ban-showcase.enemy-team-visible .ban-announcement-label-glow { animation-name: fadeOut1to0; animation-delay: 0.9s; animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77); } .ban-showcase.enemy-team-visible .ban-announcement-bg-glow { background-image: radial-gradient(circle closest-side at 50% 50%, rgba(255,103,127,0.27) 0%, rgba(255,103,127,0.2) 20%, rgba(255,103,127,0) 100%); width: 100%; height: 225px; position: absolute; top: -47px; left: 0; animation-name: fadeOut1to0; animation-delay: 0.4s; animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77); opacity: 0; } .ban-showcase.enemy-team-visible .ban-announcement-label::before, .ban-showcase.enemy-team-visible .ban-announcement-label::after { animation-name: fadeIn0to1, banAnnouncementRuleColorIntro; animation-delay: 0.33s, 0.4s; animation-duration: 0.03s, 0.83s; animation-fill-mode: backwards; animation-timing-function: linear; } @-moz-keyframes banShowcaseLabelZoomIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @-webkit-keyframes banShowcaseLabelZoomIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @-o-keyframes banShowcaseLabelZoomIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes banShowcaseLabelZoomIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @-moz-keyframes banShowcaseAnnouncementLabelZoomIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @-webkit-keyframes banShowcaseAnnouncementLabelZoomIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @-o-keyframes banShowcaseAnnouncementLabelZoomIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes banShowcaseAnnouncementLabelZoomIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @-moz-keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes banShowcaseLabelZoomOutro { 0% { transform: scale(1); } 100% { transform: scale(0.8); } } @-webkit-keyframes banShowcaseLabelZoomOutro { 0% { transform: scale(1); } 100% { transform: scale(0.8); } } @-o-keyframes banShowcaseLabelZoomOutro { 0% { transform: scale(1); } 100% { transform: scale(0.8); } } @keyframes banShowcaseLabelZoomOutro { 0% { transform: scale(1); } 100% { transform: scale(0.8); } } @-moz-keyframes banAnnouncementRuleColorIntro { 0% { background-color: #fff; } 100% { background-color: #be1e37; } } @-webkit-keyframes banAnnouncementRuleColorIntro { 0% { background-color: #fff; } 100% { background-color: #be1e37; } } @-o-keyframes banAnnouncementRuleColorIntro { 0% { background-color: #fff; } 100% { background-color: #be1e37; } } @keyframes banAnnouncementRuleColorIntro { 0% { background-color: #fff; } 100% { background-color: #be1e37; } } @-moz-keyframes banShowcaseScaleOutro { 0% { transform: scale(1); } 100% { transform: scale(0.7); } } @-webkit-keyframes banShowcaseScaleOutro { 0% { transform: scale(1); } 100% { transform: scale(0.7); } } @-o-keyframes banShowcaseScaleOutro { 0% { transform: scale(1); } 100% { transform: scale(0.7); } } @keyframes banShowcaseScaleOutro { 0% { transform: scale(1); } 100% { transform: scale(0.7); } } .ban-showcase-team .bans-label { font-family: var(--font-display); } .ban-showcase-team .ban-champion > .champion-name { font-family: var(--font-body); } .ban-showcase-team .bans-label, .ban-showcase-team .ban-champion > .champion-name { -webkit-user-select: none; } .ban-showcase-team .bans-label, .ban-showcase-team .ban-champion > .champion-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .ban-showcase-team .bans-label { text-transform: uppercase; } .ban-showcase-team .bans-label:lang(ko-kr), .ban-showcase-team .bans-label:lang(ja-jp), .ban-showcase-team .bans-label:lang(tr-tr), .ban-showcase-team .bans-label:lang(el-gr), .ban-showcase-team .bans-label:lang(th-th), .ban-showcase-team .bans-label:lang(zh-tw) { text-transform: none; } .ban-showcase-team .bans-label { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .ban-showcase-team .bans-label:lang(ar-ae) { letter-spacing: 0; } .ban-showcase-team .ban-champion > .champion-name { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .ban-showcase-team .ban-champion > .champion-name:lang(ja-jp) { font-size: 13px; } .ban-showcase-team .ban-champion > .champion-name:lang(ar-ae) { letter-spacing: 0; } .ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-champion-thumbnail { border: thin solid #3c3c41; outline: 1px solid rgba(1,10,19,0.75); box-shadow: none; } .ban-showcase-team { height: 132px; width: 100%; position: absolute; top: 130px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transform: translateZ(0); } .ban-showcase-team .bans-label { direction: ltr; height: 20px; color: #0a96aa; position: relative; transform: translateZ(0); } .ban-showcase-team.vote { top: 260px; } .ban-showcase-team .bans-label-glow { position: absolute; top: 0; left: 0; opacity: 0; transform: translateZ(0); } .ban-showcase-team.my-team .bans-label-glow { text-shadow: 0 0 8px #fff, 0 0 12px #fff; } .ban-showcase-team.their-team .bans-label-glow { text-shadow: 0 0 8px #fff, 0 0 12px #fff; } .ban-showcase-team .bans-list { width: 510px; height: 94px; display: flex; justify-content: space-around; transform: translateZ(0); } .ban-showcase-team .ban-champion { width: 69px; height: 83px; padding: 1px; transform: translateZ(0); } .ban-showcase-team .ban-champion > .ban-champion-shake-container { width: 69px; height: 83px; padding: 1px; position: absolute; transform: translateZ(0); } .ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-champion-thumbnail { display: inline-block; width: 67px; height: 67px; background-color: rgba(1,10,19,0.8); -webkit-filter: none; box-sizing: border-box; position: relative; overflow: hidden; transform: translateZ(0); } .ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-champion-thumbnail::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: thin solid rgba(1,10,19,0.8); } .ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-champion-thumbnail > .thumbnail-circle-x-background { width: 65%; height: 65%; position: absolute; top: 11px; left: 10px; transform: translateZ(0); } .ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-champion-thumbnail > .champion-background-image { width: 72px; height: 72px; position: absolute; margin-left: -4px; margin-top: -4px; -webkit-filter: none; transform: translateZ(0); } .ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-champion-thumbnail > .champion-background-image.grayed-out { -webkit-filter: grayscale(1) brightness(0.75); } .ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-gradient-background { width: 120px; height: 120px; top: -25px; left: -25px; position: absolute; background-image: radial-gradient(circle closest-side at 50% 50%, rgba(160,15,38,0.47) 0%, rgba(183,14,41,0.8) 20%, rgba(255,103,127,0) 100%); opacity: 0; transform: translateZ(0); } .ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-marching-border-background-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; } .ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-marching-border-background-container .ban-marching-border-background { position: absolute; top: -1px; left: -1px; width: 71px; height: 71px; overflow: hidden; -webkit-filter: drop-shadow(0px 0px 3px #f00); } .ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-marching-border-background-container .ban-marching-border-background::after { content: ''; position: absolute; background-image: linear-gradient(180deg, transparent 57px, #ff3217 61px, rgba(255,50,23,0) 122px); top: -50px; left: -50px; right: 50%; bottom: -50px; transform: rotate(0deg); transform-origin: right center; } .ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-marching-border-background-container .ban-marching-border-background::before { content: ''; position: absolute; background-image: linear-gradient(0deg, transparent 57px, #ff3217 61px, rgba(255,50,23,0) 122px); top: -50px; left: 50%; right: -50px; bottom: -50px; transform: rotate(0deg); transform-origin: left center; } .ban-showcase-team .ban-champion > .ban-champion-shake-container > .circle-x-overlay { width: 100%; height: 100%; top: 0; left: 0; background-image: url("/fe/lol-champ-select/images/ban-showcase/icon-ban.png"); background-size: 30%; background-position-x: 50%; background-position-y: 90%; background-repeat: no-repeat; position: absolute; transform: translateZ(0); } .ban-showcase-team .ban-champion > .ban-champion-shake-container > .circle-x-overlay.red { background-image: url("/fe/lol-champ-select/images/ban-showcase/icon-ban-red.png"); } .ban-showcase-team .ban-champion > .ban-champion-shake-container.vote > .ban-gradient-background { background-image: radial-gradient(circle closest-side at 50% 50%, rgba(38,15,160,0.47) 0%, rgba(41,14,183,0.8) 20%, rgba(127,103,255,0) 100%); } .ban-showcase-team .ban-champion > .ban-champion-shake-container.vote > .ban-marching-border-background-container .ban-marching-border-background::after { background-image: linear-gradient(180deg, transparent 57px, #1732ff 61px, rgba(23,50,255,0) 122px); } .ban-showcase-team .ban-champion > .ban-champion-shake-container.vote > .ban-marching-border-background-container .ban-marching-border-background::before { background-image: linear-gradient(0deg, transparent 57px, #1732ff 61px, rgba(23,50,255,0) 122px); } .ban-showcase-team .ban-champion > .champion-name { width: 140%; top: 70px; margin-top: 10px; margin-left: -20%; position: absolute; color: #a09b8c; text-align: center; -webkit-font-smoothing: subpixel-antialiased; } .ban-showcase-team .ban-champion.selected .champion-background-image { animation-name: banChampionSelectedSlideIn, banChampionImageSelectedSaturationAndBrightness; animation-delay: 0s; animation-duration: 0.33s, 0.6s; animation-fill-mode: backwards, forwards; animation-timing-function: cubic-bezier(0.85, 0, 1, 1), cubic-bezier(0.85, 0, 0, 1); } .ban-showcase-team .ban-champion.selected .thumbnail-circle-x-background { animation-name: banChampionSelectedSlideOut, fadeOut1to0; animation-delay: 0s, 0.33s; animation-duration: 0.33s, 0s; animation-fill-mode: backwards; animation-timing-function: cubic-bezier(0.85, 0, 1, 1); } .ban-showcase-team .ban-champion.selected .champion-name { animation-name: banChampionNameSelectedSlideIn, fadeIn0to1; animation-delay: 0.27s; animation-duration: 0.33s, 0s; animation-fill-mode: backwards; animation-timing-function: cubic-bezier(0, 0, 0, 1); } .ban-showcase-team .ban-champion.selected .circle-x-overlay { animation-name: fadeIn0to1; animation-delay: 0.33s; animation-duration: 0s; animation-fill-mode: backwards; } .ban-showcase-team .ban-champion.selected .ban-champion-thumbnail { animation-name: banChampionBorderSelectedColorChange; animation-delay: 0.33s; animation-duration: 0.33s; animation-timing-function: linear; } .ban-showcase-team .ban-champion.selected.locked-in .ban-champion-shake-container { animation-name: banChampionLockedInPositionShakeAndGlow; animation-delay: 0s; animation-duration: 0.3s; animation-timing-function: cubic-bezier(0, 0, 0.5, 1); } .ban-showcase-team .ban-champion.selected.locked-in .champion-name { animation-name: banChampionNameLockedInColorChange; animation-delay: 0s; animation-duration: 0.33s; animation-timing-function: linear; animation-fill-mode: backwards; } .ban-showcase-team .ban-champion.selected.locked-in .champion-background-image { animation-name: banChampionImageLockedInSaturationAndBrightness; animation-delay: 0s; animation-duration: 0.33s; animation-timing-function: cubic-bezier(0, 0, 0.66, 1); animation-fill-mode: backwards; } .ban-showcase-team .ban-champion.selected.locked-in .ban-champion-thumbnail { animation-name: banChampionBorderLockedInColorChange; animation-delay: 0s; animation-duration: 1.17s; animation-timing-function: cubic-bezier(0, 0, 0.5, 1); animation-fill-mode: forwards; } .ban-showcase-team .ban-champion.selected.locked-in .ban-gradient-background { animation-name: fadeOut1to0; animation-delay: 0s; animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77); } .ban-showcase-team .ban-champion.selected.locked-in .ban-gradient-background::after { animation-delay: 0s; } .ban-showcase-team .ban-champion.selected.locked-in .ban-marching-border-background-container { animation: fadeOut1to0; animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 1.2s; animation-timing-function: cubic-bezier(0.51, 0.26, 0.64, 0.46); } .ban-showcase-team .ban-champion.selected.locked-in .ban-marching-border-background::before, .ban-showcase-team .ban-champion.selected.locked-in .ban-marching-border-background::after { animation-name: banChampionLockedInMarchingBorderRotation; animation-delay: 0s; animation-duration: 1.2s; animation-timing-function: cubic-bezier(0.1, 0.69, 0.3, 0.93); animation-fill-mode: both; transform: rotate(45deg); } .ban-showcase-team.my-team .ban-champion.selected.locked-in.sniped-player-pick .champion-name, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.selected.locked-in.sniped-player-pick .champion-name { animation-name: fadeIn0to1, banChampionNameLockedInPickSnipedColorChange; animation-fill-mode: backwards, both; } .ban-showcase-team.my-team .ban-champion.selected.locked-in.sniped-player-pick .ban-champion-thumbnail, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.selected.locked-in.sniped-player-pick .ban-champion-thumbnail { animation-name: banChampionBorderLockedInPickSnipedColorChange; box-shadow: 0px 0px 3px #ce4258; } .ban-showcase-team.my-team .ban-champion.selected.locked-in.sniped-player-pick .ban-champion-shake-container .circle-x-overlay, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.selected.locked-in.sniped-player-pick .ban-champion-shake-container .circle-x-overlay { background-image: url("/fe/lol-champ-select/images/ban-showcase/icon-ban-red.png"); } .ban-showcase-team.my-team .ban-champion.selected.locked-in.sniped-player-pick .ban-gradient-background::after, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.selected.locked-in.sniped-player-pick .ban-gradient-background::after { content: ''; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; border: 7px solid #ff3217; -webkit-filter: blur(9px); border-radius: 36px; animation-name: banChampionBorderLockedInPickSnipedGradientBgScale; animation-duration: 0.6s; animation-fill-mode: both; animation-timing-function: linear; } .ban-showcase-team.my-team .ban-champion.selected.locked-in.sniped-player-pick .ban-marching-border-background, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.selected.locked-in.sniped-player-pick .ban-marching-border-background { -webkit-filter: drop-shadow(0px 0px 3px #f00) drop-shadow(0px 0px 3px #f00); } .ban-showcase-team.my-team .ban-champion.selected.locked-in.sniped-player-pick .ban-marching-border-background::after, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.selected.locked-in.sniped-player-pick .ban-marching-border-background::after { background-image: linear-gradient(180deg, transparent 57px, #ffdfdb 61px, rgba(255,50,23,0) 122px); } .ban-showcase-team.my-team .ban-champion.selected.locked-in.sniped-player-pick .ban-marching-border-background::before, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.selected.locked-in.sniped-player-pick .ban-marching-border-background::before { background-image: linear-gradient(0deg, transparent 57px, #ffdfdb 61px, rgba(255,50,23,0) 122px); } .ban-showcase-team.my-team.intro-animation.my-team-banning .bans-label { animation-name: teamBansLabelFadeAndZoomIntro, myTeamBansLabelTextColorIntro; animation-delay: 0s, 0.67s; animation-duration: 0.2s, 0.7s; animation-fill-mode: backwards; animation-timing-function: cubic-bezier(1, 0, 1, 1), linear; } .ban-showcase-team.my-team.intro-animation.my-team-banning.bans-label-glow { animation-name: fadeOut1to0; animation-delay: 0.2s; animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77); } .ban-showcase-team.my-team.intro-animation.my-team-banning .ban-champion { animation-name: banChampionFadeAndZoomIntro; animation-delay: 0.07s; animation-duration: 0.17s; animation-fill-mode: backwards; animation-timing-function: cubic-bezier(0.75, 0.07, 0, 1); } .ban-showcase-team.my-team.intro-animation.my-team-banning .ban-champion:nth-child(2), .ban-showcase-team.my-team.intro-animation.my-team-banning .ban-champion:nth-child(4) { animation-delay: 0.1s; } .ban-showcase-team.my-team.intro-animation.my-team-banning .ban-champion:nth-child(3) { animation-delay: 0.13s; } .ban-showcase-team.my-team.intro-animation.enemy-bans-visible .bans-label, .ban-showcase-team.my-team.intro-animation.enemy-bans-visible .bans-list { animation-name: myTeamBansListSlidePart1, myTeamBansListSlidePart2; animation-delay: 0.5s, 0.7s; animation-duration: 0.2s, 0.67s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(1, 0, 1, 1), cubic-bezier(0, 0, 0, 1); } .ban-showcase-team.my-team.intro-animation.enemy-bans-visible .bans-list { animation-delay: 0.57s, 0.77s; } .ban-showcase-team.their-team { flex-direction: column-reverse; top: 263px; } .ban-showcase-team.their-team .waiting-for-bans { top: 200px; } .ban-showcase-team.their-team .bans-label { color: #be1e37; } .ban-showcase-team.their-team.enemy-bans-visible .bans-label { animation-name: teamBansLabelFadeAndZoomIntro, theirTeamBansLabelTextColorIntro; animation-delay: 0.57s, 1.53s; animation-duration: 0.2s, 0.7s; animation-fill-mode: backwards; animation-timing-function: cubic-bezier(1, 0, 1, 1), linear; } .ban-showcase-team.their-team.enemy-bans-visible .bans-label-glow { animation-name: fadeOut1to0; animation-delay: 0.77s; animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77); } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion { animation-name: banChampionFadeAndZoomIntro; animation-delay: 0.77s; animation-duration: 0.4s; animation-fill-mode: backwards; animation-timing-function: cubic-bezier(0.75, 0.07, 0, 1); } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion:nth-child(2), .ban-showcase-team.their-team.enemy-bans-visible .ban-champion:nth-child(4) { animation-delay: 0.8s; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion:nth-child(3) { animation-delay: 0.83s; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .ban-champion-shake-container { animation-name: banChampionLockedInPositionShakeAndGlow; animation-delay: 0.83s; animation-duration: 0.3s; animation-timing-function: cubic-bezier(0, 0, 0.5, 1); } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .champion-background-image { animation-name: banChampionSelectedSlideIn, banChampionImageLockedInSaturationAndBrightness; animation-delay: 0.5s, 0.83s; animation-duration: 0.33s, 0.6s; animation-fill-mode: backwards, backwards; animation-timing-function: cubic-bezier(0.85, 0, 1, 1), cubic-bezier(0, 0, 0, 1); } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .thumbnail-circle-x-background { animation-name: banChampionSelectedSlideOut; animation-delay: 0.5s; animation-duration: 0.33s; animation-fill-mode: backwards; animation-timing-function: cubic-bezier(0.85, 0, 1, 1); } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .champion-name { animation-name: fadeIn0to1, banChampionNameLockedInColorChange; animation-delay: 0.83s; animation-duration: 0s, 0.33s; animation-fill-mode: backwards, backwards; animation-timing-function: linear, linear; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .circle-x-overlay { animation-name: fadeIn0to1; animation-delay: 0.83s; animation-duration: 0s; animation-fill-mode: backwards; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .ban-champion-thumbnail { animation-name: banChampionBorderSelectedColorChange; animation-delay: 0.83s; animation-duration: 0.33s; animation-timing-function: linear; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .ban-gradient-background { animation-name: fadeOut1to0; animation-delay: 0.83s; animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77); } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .ban-gradient-background::after { animation-delay: 0.83s; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .ban-marching-border-background-container { animation-name: fadeOut1to0; animation-fill-mode: forwards; animation-delay: 0.83s; animation-duration: 1.2s; animation-timing-function: cubic-bezier(0.51, 0.26, 0.64, 0.46); } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .ban-marching-border-background::before, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .ban-marching-border-background::after { animation-name: banChampionLockedInMarchingBorderRotation; animation-delay: 0.83s; animation-duration: 1.2s; animation-timing-function: cubic-bezier(0.1, 0.69, 0.3, 0.93); animation-fill-mode: both; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .champion-background-image, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .thumbnail-circle-x-background { animation-delay: 1.15s, 1.48s; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .circle-x-overlay, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .ban-champion-thumbnail, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .champion-name, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .ban-gradient-background, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .ban-gradient-background::after, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .ban-champion-shake-container, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .ban-marching-border-background-container, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .ban-marching-border-background::before, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .ban-marching-border-background::after { animation-delay: 1.48s; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .champion-background-image, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .thumbnail-circle-x-background { animation-delay: 1.8s, 2.13s; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .circle-x-overlay, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .ban-champion-thumbnail, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .champion-name, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .ban-gradient-background, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .ban-gradient-background::after, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .ban-champion-shake-container, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .ban-marching-border-background-container, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .ban-marching-border-background::before, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .ban-marching-border-background::after { animation-delay: 2.13s; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .champion-background-image, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .thumbnail-circle-x-background { animation-delay: 2.45s, 2.78s; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .circle-x-overlay, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .ban-champion-thumbnail, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .champion-name, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .ban-gradient-background, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .ban-gradient-background::after, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .ban-champion-shake-container, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .ban-marching-border-background-container, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .ban-marching-border-background::before, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .ban-marching-border-background::after { animation-delay: 2.78s; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .champion-background-image, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .thumbnail-circle-x-background { animation-delay: 3.1s, 3.43s; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .circle-x-overlay, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .ban-champion-thumbnail, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .champion-name, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .ban-gradient-background, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .ban-gradient-background::after, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .ban-champion-shake-container, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .ban-marching-border-background-container, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .ban-marching-border-background::before, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .ban-marching-border-background::after { animation-delay: 3.43s; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .champion-background-image, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .thumbnail-circle-x-background { animation-delay: 3.75s, 4.08s; } .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .circle-x-overlay, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .ban-champion-thumbnail, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .champion-name, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .ban-gradient-background, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .ban-gradient-background::after, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .ban-champion-shake-container, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .ban-marching-border-background-container, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .ban-marching-border-background::before, .ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .ban-marching-border-background::after { animation-delay: 4.08s; } @-moz-keyframes myTeamBansListSlidePart1 { 0% { transform: translateY(0); } 100% { transform: translateY(-108px); } } @-webkit-keyframes myTeamBansListSlidePart1 { 0% { transform: translateY(0); } 100% { transform: translateY(-108px); } } @-o-keyframes myTeamBansListSlidePart1 { 0% { transform: translateY(0); } 100% { transform: translateY(-108px); } } @keyframes myTeamBansListSlidePart1 { 0% { transform: translateY(0); } 100% { transform: translateY(-108px); } } @-moz-keyframes myTeamBansListSlidePart2 { 0% { transform: translateY(-108px); } 100% { transform: translateY(-122px); } } @-webkit-keyframes myTeamBansListSlidePart2 { 0% { transform: translateY(-108px); } 100% { transform: translateY(-122px); } } @-o-keyframes myTeamBansListSlidePart2 { 0% { transform: translateY(-108px); } 100% { transform: translateY(-122px); } } @keyframes myTeamBansListSlidePart2 { 0% { transform: translateY(-108px); } 100% { transform: translateY(-122px); } } @-moz-keyframes teamBansLabelFadeAndZoomIntro { 0% { transform: scale(2); opacity: 0; } 100% { tranform: scale(1); opacity: 1; } } @-webkit-keyframes teamBansLabelFadeAndZoomIntro { 0% { transform: scale(2); opacity: 0; } 100% { tranform: scale(1); opacity: 1; } } @-o-keyframes teamBansLabelFadeAndZoomIntro { 0% { transform: scale(2); opacity: 0; } 100% { tranform: scale(1); opacity: 1; } } @keyframes teamBansLabelFadeAndZoomIntro { 0% { transform: scale(2); opacity: 0; } 100% { tranform: scale(1); opacity: 1; } } @-moz-keyframes theirTeamBansLabelTextColorIntro { 0% { color: #fff; } 100% { color: #be1e37; } } @-webkit-keyframes theirTeamBansLabelTextColorIntro { 0% { color: #fff; } 100% { color: #be1e37; } } @-o-keyframes theirTeamBansLabelTextColorIntro { 0% { color: #fff; } 100% { color: #be1e37; } } @keyframes theirTeamBansLabelTextColorIntro { 0% { color: #fff; } 100% { color: #be1e37; } } @-moz-keyframes myTeamBansLabelTextColorIntro { 0% { color: #fff; } 100% { color: #0a96aa; } } @-webkit-keyframes myTeamBansLabelTextColorIntro { 0% { color: #fff; } 100% { color: #0a96aa; } } @-o-keyframes myTeamBansLabelTextColorIntro { 0% { color: #fff; } 100% { color: #0a96aa; } } @keyframes myTeamBansLabelTextColorIntro { 0% { color: #fff; } 100% { color: #0a96aa; } } @-moz-keyframes banChampionFadeAndZoomIntro { 0% { transform: scale(1.25); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes banChampionFadeAndZoomIntro { 0% { transform: scale(1.25); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @-o-keyframes banChampionFadeAndZoomIntro { 0% { transform: scale(1.25); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes banChampionFadeAndZoomIntro { 0% { transform: scale(1.25); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @-moz-keyframes banChampionSelectedSlideIn { 0% { transform: translateY(-67px); } 100% { transform: translateY(0px); } } @-webkit-keyframes banChampionSelectedSlideIn { 0% { transform: translateY(-67px); } 100% { transform: translateY(0px); } } @-o-keyframes banChampionSelectedSlideIn { 0% { transform: translateY(-67px); } 100% { transform: translateY(0px); } } @keyframes banChampionSelectedSlideIn { 0% { transform: translateY(-67px); } 100% { transform: translateY(0px); } } @-moz-keyframes banChampionSelectedSlideOut { 0% { transform: translateY(0px); } 100% { transform: translateY(67px); } } @-webkit-keyframes banChampionSelectedSlideOut { 0% { transform: translateY(0px); } 100% { transform: translateY(67px); } } @-o-keyframes banChampionSelectedSlideOut { 0% { transform: translateY(0px); } 100% { transform: translateY(67px); } } @keyframes banChampionSelectedSlideOut { 0% { transform: translateY(0px); } 100% { transform: translateY(67px); } } @-moz-keyframes banChampionNameSelectedSlideInAndColorChange { 0% { transform: translateY(-4px); color: #fffefd; } 100% { transform: translateY(0px); color: #a0998c; } } @-webkit-keyframes banChampionNameSelectedSlideInAndColorChange { 0% { transform: translateY(-4px); color: #fffefd; } 100% { transform: translateY(0px); color: #a0998c; } } @-o-keyframes banChampionNameSelectedSlideInAndColorChange { 0% { transform: translateY(-4px); color: #fffefd; } 100% { transform: translateY(0px); color: #a0998c; } } @keyframes banChampionNameSelectedSlideInAndColorChange { 0% { transform: translateY(-4px); color: #fffefd; } 100% { transform: translateY(0px); color: #a0998c; } } @-moz-keyframes banChampionNameLockedInColorChange { 0% { color: #fffefd; } 100% { color: #a0998c; } } @-webkit-keyframes banChampionNameLockedInColorChange { 0% { color: #fffefd; } 100% { color: #a0998c; } } @-o-keyframes banChampionNameLockedInColorChange { 0% { color: #fffefd; } 100% { color: #a0998c; } } @keyframes banChampionNameLockedInColorChange { 0% { color: #fffefd; } 100% { color: #a0998c; } } @-moz-keyframes banChampionNameLockedInPickSnipedColorChange { 0% { color: #fffefd; } 100% { color: #be1e37; } } @-webkit-keyframes banChampionNameLockedInPickSnipedColorChange { 0% { color: #fffefd; } 100% { color: #be1e37; } } @-o-keyframes banChampionNameLockedInPickSnipedColorChange { 0% { color: #fffefd; } 100% { color: #be1e37; } } @keyframes banChampionNameLockedInPickSnipedColorChange { 0% { color: #fffefd; } 100% { color: #be1e37; } } @-moz-keyframes banChampionBorderSelectedColorChange { 0% { border-color: #ffebeb; } 100% { border-color: #3c3c41; } } @-webkit-keyframes banChampionBorderSelectedColorChange { 0% { border-color: #ffebeb; } 100% { border-color: #3c3c41; } } @-o-keyframes banChampionBorderSelectedColorChange { 0% { border-color: #ffebeb; } 100% { border-color: #3c3c41; } } @keyframes banChampionBorderSelectedColorChange { 0% { border-color: #ffebeb; } 100% { border-color: #3c3c41; } } @-moz-keyframes banChampionBorderLockedInColorChange { 0% { border-color: #bebdbc; } 100% { border-color: #3c3c41; } } @-webkit-keyframes banChampionBorderLockedInColorChange { 0% { border-color: #bebdbc; } 100% { border-color: #3c3c41; } } @-o-keyframes banChampionBorderLockedInColorChange { 0% { border-color: #bebdbc; } 100% { border-color: #3c3c41; } } @keyframes banChampionBorderLockedInColorChange { 0% { border-color: #bebdbc; } 100% { border-color: #3c3c41; } } @-moz-keyframes banChampionBorderLockedInPickSnipedColorChange { 0% { border-color: #bebdbc; } 100% { border-color: #94293a; } } @-webkit-keyframes banChampionBorderLockedInPickSnipedColorChange { 0% { border-color: #bebdbc; } 100% { border-color: #94293a; } } @-o-keyframes banChampionBorderLockedInPickSnipedColorChange { 0% { border-color: #bebdbc; } 100% { border-color: #94293a; } } @keyframes banChampionBorderLockedInPickSnipedColorChange { 0% { border-color: #bebdbc; } 100% { border-color: #94293a; } } @-moz-keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes banChampionImageSelectedSaturationAndBrightness { 0% { -webkit-filter: grayscale(1) brightness(2); } 100% { -webkit-filter: grayscale(1) brightness(0.75); } } @-webkit-keyframes banChampionImageSelectedSaturationAndBrightness { 0% { -webkit-filter: grayscale(1) brightness(2); } 100% { -webkit-filter: grayscale(1) brightness(0.75); } } @-o-keyframes banChampionImageSelectedSaturationAndBrightness { 0% { -webkit-filter: grayscale(1) brightness(2); } 100% { -webkit-filter: grayscale(1) brightness(0.75); } } @keyframes banChampionImageSelectedSaturationAndBrightness { 0% { -webkit-filter: grayscale(1) brightness(2); } 100% { -webkit-filter: grayscale(1) brightness(0.75); } } @-moz-keyframes banChampionImageLockedInSaturationAndBrightness { 0% { -webkit-filter: grayscale(1) brightness(0.75); } 100% { -webkit-filter: grayscale(0) brightness(1); } } @-webkit-keyframes banChampionImageLockedInSaturationAndBrightness { 0% { -webkit-filter: grayscale(1) brightness(0.75); } 100% { -webkit-filter: grayscale(0) brightness(1); } } @-o-keyframes banChampionImageLockedInSaturationAndBrightness { 0% { -webkit-filter: grayscale(1) brightness(0.75); } 100% { -webkit-filter: grayscale(0) brightness(1); } } @keyframes banChampionImageLockedInSaturationAndBrightness { 0% { -webkit-filter: grayscale(1) brightness(0.75); } 100% { -webkit-filter: grayscale(0) brightness(1); } } @-moz-keyframes banChampionLockedInPositionShakeAndGlow { 0% { transform: translate(-1px, -1px); -webkit-filter: brightness(1.4) contrast(0.9); } 12% { transform: translate(0px, 1px); -webkit-filter: none; } 24% { transform: translate(1px, 0px); } 36% { transform: translate(1px, -1px); } 48% { transform: translate(1px, 1px); } 60% { transform: translate(0px, 1px); } 72% { transform: translate(-0.5px, -0.5px); } 84% { transform: translate(0.5px, -0.5px); } 96% { transform: tranlate(0px, 0.5px); } } @-webkit-keyframes banChampionLockedInPositionShakeAndGlow { 0% { transform: translate(-1px, -1px); -webkit-filter: brightness(1.4) contrast(0.9); } 12% { transform: translate(0px, 1px); -webkit-filter: none; } 24% { transform: translate(1px, 0px); } 36% { transform: translate(1px, -1px); } 48% { transform: translate(1px, 1px); } 60% { transform: translate(0px, 1px); } 72% { transform: translate(-0.5px, -0.5px); } 84% { transform: translate(0.5px, -0.5px); } 96% { transform: tranlate(0px, 0.5px); } } @-o-keyframes banChampionLockedInPositionShakeAndGlow { 0% { transform: translate(-1px, -1px); -webkit-filter: brightness(1.4) contrast(0.9); } 12% { transform: translate(0px, 1px); -webkit-filter: none; } 24% { transform: translate(1px, 0px); } 36% { transform: translate(1px, -1px); } 48% { transform: translate(1px, 1px); } 60% { transform: translate(0px, 1px); } 72% { transform: translate(-0.5px, -0.5px); } 84% { transform: translate(0.5px, -0.5px); } 96% { transform: tranlate(0px, 0.5px); } } @keyframes banChampionLockedInPositionShakeAndGlow { 0% { transform: translate(-1px, -1px); -webkit-filter: brightness(1.4) contrast(0.9); } 12% { transform: translate(0px, 1px); -webkit-filter: none; } 24% { transform: translate(1px, 0px); } 36% { transform: translate(1px, -1px); } 48% { transform: translate(1px, 1px); } 60% { transform: translate(0px, 1px); } 72% { transform: translate(-0.5px, -0.5px); } 84% { transform: translate(0.5px, -0.5px); } 96% { transform: tranlate(0px, 0.5px); } } @-moz-keyframes banChampionLockedInMarchingBorderRotation { 0% { transform: rotate(45deg); } 100% { transform: rotate(300deg); } } @-webkit-keyframes banChampionLockedInMarchingBorderRotation { 0% { transform: rotate(45deg); } 100% { transform: rotate(300deg); } } @-o-keyframes banChampionLockedInMarchingBorderRotation { 0% { transform: rotate(45deg); } 100% { transform: rotate(300deg); } } @keyframes banChampionLockedInMarchingBorderRotation { 0% { transform: rotate(45deg); } 100% { transform: rotate(300deg); } } @-moz-keyframes banChampionBorderLockedInPickSnipedGradientBgScale { 0% { transform: scale(0.4); } 100% { transform: scale(1); } } @-webkit-keyframes banChampionBorderLockedInPickSnipedGradientBgScale { 0% { transform: scale(0.4); } 100% { transform: scale(1); } } @-o-keyframes banChampionBorderLockedInPickSnipedGradientBgScale { 0% { transform: scale(0.4); } 100% { transform: scale(1); } } @keyframes banChampionBorderLockedInPickSnipedGradientBgScale { 0% { transform: scale(0.4); } 100% { transform: scale(1); } } .champion-bench .bench-label { font-family: var(--font-display); } .champion-bench .bench-label { -webkit-user-select: none; } .champion-bench .bench-label { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .champion-bench .bench-label { text-transform: uppercase; } .champion-bench .bench-label:lang(ko-kr), .champion-bench .bench-label:lang(ja-jp), .champion-bench .bench-label:lang(tr-tr), .champion-bench .bench-label:lang(el-gr), .champion-bench .bench-label:lang(th-th), .champion-bench .bench-label:lang(zh-tw) { text-transform: none; } .champion-bench .bench-label { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .champion-bench .bench-label:lang(ja-jp) { font-size: 13px; } .champion-bench .bench-label:lang(ar-ae) { letter-spacing: 0; } .champion-bench { top: 10px; position: relative; align-self: flex-start; margin-left: 26px; } .champion-bench .bench-container { justify-content: space-between; display: flex; flex-direction: row; flex-wrap: wrap; width: 578px; height: 50px; margin-left: 5px; } .champion-bench .bench-label { direction: ltr; line-height: 14px; color: #a09b8c; position: absolute; right: 610px; top: 5px ; white-space: normal ; text-align: right; } .champion-bench .bench-label:lang(zh-tw), .champion-bench .bench-label:lang(zh-cn), .champion-bench .bench-label:lang(zh-my), .champion-bench .bench-label:lang(ja-jp), .champion-bench .bench-label:lang(ko-kr) { white-space: nowrap; top: 13px; } .champion-bench .bench-info { position: absolute; width: 18px; height: 18px; background-size: contain; left: 623px; top: 10px; background-image: url("/fe/lol-champ-select/images/champion-bench/MoreInfo4k_Default.png"); } .champion-bench .bench-info:hover { background-image: url("/fe/lol-champ-select/images/champion-bench/MoreInfo4k_Hover.png"); } .bench-container .champion-bench-item { position: relative; border: 1px solid #3c3c41; } .bench-container .champion-bench-item .bench-champion-background { width: 48px; height: 48px; background-position: center; background-size: 115% 115%; border: 1px solid #010a13; position: relative; box-sizing: border-box; } .bench-container .champion-bench-item.grayed-out { -webkit-filter: grayscale(1) brightness(0.75); } .bench-container .champion-bench-item:hover:not(.grayed-out):not(.empty-bench-item):not(.on-cooldown) { border: 1px solid #c89b3c; cursor: pointer; } .bench-container .champion-bench-item .bench-champion-icon { position: relative; width: 48px; height: 48px; overflow: hidden; align-self: center; } .bench-container .champion-bench-item .bench-champion-icon .cooldown-mask { position: absolute; top: 0; left: 0; width: 48px; height: 48px; overflow: hidden; opacity: 0.85; visibility: hidden; } .bench-container .champion-bench-item .bench-champion-icon .cooldown { width: 96px; height: 96px; position: absolute; top: -24px; left: -24px; } .bench-container .champion-bench-item .bench-champion-icon .cooldown .right-half { width: 50%; height: 100%; position: absolute; left: 50%; top: 0; transform-origin: 0 50%; background: #010a13; } .bench-container .champion-bench-item .bench-champion-icon .cooldown .left-half-mask { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; border-left: 1px solid #010a13; box-sizing: border-box; } .bench-container .champion-bench-item .bench-champion-icon .cooldown .left-half { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 100% 50%; background: #010a13; } .bench-container .champion-bench-item.empty-bench-item .bench-champion-icon { opacity: 0.5; background-color: #1e2328; border: none; } .bench-container .champion-bench-item.empty-bench-item .bench-champion-icon .cooldown-mask { visibility: hidden; } .bench-container .champion-bench-item.on-cooldown .cooldown-mask { visibility: visible; } .bench-container .champion-bench-item.on-cooldown .cooldown-mask .cooldown .right-half { animation: rotate-half linear forwards 1.35s; } .bench-container .champion-bench-item.on-cooldown .cooldown-mask .cooldown .left-half { animation: rotate-half linear forwards 1.35s 1.35s; } .bench-container .champion-bench-item.on-cooldown.from-non-prioritized-prefill .cooldown .right-half { animation-duration: 4.85s; } .bench-container .champion-bench-item.on-cooldown.from-non-prioritized-prefill .cooldown .left-half { animation-duration: 4.85s; animation-delay: 4.85s; } .bench-champion-icon-chest-available-glow { height: 48px; width: 48px; top: -1px; position: absolute; border: thin solid #cdbe91; left: -1px; filter: drop-shadow(0px 0px 4px rgba(200,155,60,0.9)) drop-shadow(0px 0px 2px rgba(200,155,60,0.9)) drop-shadow(0px 0px 1px #cdbe91) drop-shadow(0px 0px 1px #cdbe91); opacity: 0; transition: opacity 3s ease 1s; } .show-chest-availability-hinted-portraits .bench-champion-icon-chest-available-glow { opacity: 1; transition-delay: 0s; transition-duration: 0.4s; } @-moz-keyframes rotate-half { 0% { opacity: 1; transform: rotateZ(0deg); } 99% { opacity: 1; transform: rotateZ(180deg); } 100% { opacity: 0; transform: rotateZ(180deg); } } @-webkit-keyframes rotate-half { 0% { opacity: 1; transform: rotateZ(0deg); } 99% { opacity: 1; transform: rotateZ(180deg); } 100% { opacity: 0; transform: rotateZ(180deg); } } @-o-keyframes rotate-half { 0% { opacity: 1; transform: rotateZ(0deg); } 99% { opacity: 1; transform: rotateZ(180deg); } 100% { opacity: 0; transform: rotateZ(180deg); } } @keyframes rotate-half { 0% { opacity: 1; transform: rotateZ(0deg); } 99% { opacity: 1; transform: rotateZ(180deg); } 100% { opacity: 0; transform: rotateZ(180deg); } } .tooltip-champion-chest-available { font-family: var(--font-body); } .tooltip-champion-chest-available { -webkit-user-select: none; } .tooltip-champion-chest-available { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .tooltip-champion-chest-available { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .tooltip-champion-chest-available:lang(ja-jp) { font-size: 13px; } .tooltip-champion-chest-available:lang(ar-ae) { letter-spacing: 0; } .champion-chest-availability { display: flex; position: absolute; top: 24px; right: 6px; } .champion-chest-availability.available .champion-chest-available-icon path { fill: #cdbe91; } .champion-chest-availability.available:hover .champion-chest-available-glow { opacity: 0.7; transition-delay: 0s; transition-duration: 0.3s; } .champion-chest-available-glow { position: absolute; top: 0; left: 0; width: 16px; height: 16px; box-shadow: 0 0 20px #fabe0a, 0px 0px 42px #fabe0a; background: radial-gradient(rgba(205,190,10,0.75) 0%, rgba(205,190,10,0) 300%); transition: opacity ease 3s 1s; opacity: 0; } .champion-chest-available-icon { position: absolute; top: 0; left: 0; width: 16px; height: 16px; } .champion-chest-available-icon path { transition: fill 0.3s linear; } .tooltip-champion-chest-available { display: inline-block; background: #a09b8c; padding: 2px 4px; border-radius: 4px; color: #010a13; } .tooltip-champion-chest-available::before { content: ''; display: inline-block; height: 12px; width: 12px; margin: 0 4px 0 2px; vertical-align: middle; background: url("/fe/lol-static-assets/svg/hextech-chest-black.svg") no-repeat center center; background-size: cover; } .champion-grid .champion-container::-webkit-scrollbar, .champion-grid .champion-container ::-webkit-scrollbar { width: 11px; height: 11px; background-color: transparent; } .champion-grid .champion-container::-webkit-scrollbar-thumb, .champion-grid .champion-container ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 6px; background-clip: padding-box; min-height: 32px; background-color: #785a28; } .champion-grid .champion-container::-webkit-scrollbar-thumb:hover, .champion-grid .champion-container ::-webkit-scrollbar-thumb:hover { background-color: #c8aa6e; } .champion-grid .champion-container::-webkit-scrollbar-thumb:active, .champion-grid .champion-container ::-webkit-scrollbar-thumb:active { background-color: #463714; } .champion-grid .champion-container::-webkit-scrollbar-thumb:disabled, .champion-grid .champion-container ::-webkit-scrollbar-thumb:disabled { background-color: #a09b8c; } .champion-grid { position: absolute; top: 80px; left: 8px; } .champion-grid .champion-container > div { overflow-x: hidden !important; } .champion-grid .champion-container > div > div { overflow-x: hidden; } .champion-grid .champion-container > div > div > div { transition: none; } .champion-grid.champion-grid-animating .champion-container > div > div > div { transition: transform 300ms; } .champion-grid.champion-grid-hidden { opacity: 0; pointer-events: none; } .champion-grid.champion-grid-hidden .champion-container { transform: translateY(600px); } .champion-grid .champion-grid-header { height: 40px; border-bottom: thin solid rgba(120,90,40,0.6); margin: 0px 22px 13px 22px; display: flex; justify-content: space-between; align-items: center; width: 578px; } .champion-grid .champion-grid-header > div { flex-grow: 0; } .champion-grid .champion-grid-header > div.spacer { flex-grow: 1; } .champion-grid .champion-grid-header lol-uikit-flat-input { width: 195px; float: right; margin-top: 8px; opacity: 0.45; } .champion-grid .champion-grid-header lol-uikit-framed-dropdown { margin-top: 8px; margin-right: 3px; height: 24px; width: auto; } .champion-grid .champion-grid-header .champion-input { height: 24px; } .champion-grid .champion-container { position: relative; height: 456px; width: 633px; margin-left: -7px; } .champion-grid .champions { height: 456px; width: 633px; margin-top: -12px; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 1%, #000 99%, transparent 100%); } .champion-grid .champions.champions-disabled { pointer-events: none; } .champion-grid.champion-grid-picked .champion-container > div > div { pointer-events: none; } .champion-grid.champion-grid-picked.champion-grid-banning .champion-container > div > div { pointer-events: auto; } .filter-icons { margin-top: 8px; display: flex; justify-content: space-between; width: 180px; height: 20px; } .filter-icons .filter { cursor: pointer; width: 20px; height: 26px; margin: 0 5px; box-sizing: border-box; } .filter-icons .filter.top, .filter-icons .filter.jungle, .filter-icons .filter.middle, .filter-icons .filter.bottom, .filter-icons .filter.support, .filter-icons .filter.chest { background-size: 180px; background-repeat: no-repeat; background-image: url("/fe/lol-champ-select/images/champion-grid/filter-icons-disabled.png"); } .filter-icons .filter.top.active, .filter-icons .filter.jungle.active, .filter-icons .filter.middle.active, .filter-icons .filter.bottom.active, .filter-icons .filter.support.active, .filter-icons .filter.chest.active, .filter-icons .filter.top:hover, .filter-icons .filter.jungle:hover, .filter-icons .filter.middle:hover, .filter-icons .filter.bottom:hover, .filter-icons .filter.support:hover, .filter-icons .filter.chest:hover { background-size: 180px; background-repeat: no-repeat; background-image: url("/fe/lol-champ-select/images/champion-grid/filter-icons-enabled.png"); } .filter-icons .filter.top { background-position: 0 0; } .filter-icons .filter.jungle { background-position: -32px 0; } .filter-icons .filter.middle { background-position: -64px 0; } .filter-icons .filter.bottom { background-position: -96px 0; } .filter-icons .filter.support { background-position: -128px 0; } .filter-icons .filter.chest { background-position: -160px 0; } .filter-icons .filter:first-child { margin-left: 0; } .filter-icons .filter:last-child { margin-right: 0; } .filter-icons .filter:after { content: url("/fe/lol-champ-select/images/champion-grid/filter-icons-enabled.png"); display: none; height: 0; width: 0; } .filter-icons .filter.active { border-bottom: 3px solid #785a28; } .grid-champion > .grid-champion-hitbox > .champion-name { font-family: var(--font-body); } .grid-champion > .grid-champion-hitbox > .champion-name { -webkit-user-select: none; } .grid-champion > .grid-champion-hitbox > .champion-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .grid-champion > .grid-champion-hitbox > .champion-name { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .grid-champion > .grid-champion-hitbox > .champion-name:lang(ja-jp) { font-size: 13px; } .grid-champion > .grid-champion-hitbox > .champion-name:lang(ar-ae) { letter-spacing: 0; } .grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail, .champion-grid-banning .grid-champion[disabled] > .grid-champion-hitbox > .champion-grid-champion-thumbnail, .champion-grid-banning .grid-champion.pick-intented > .grid-champion-hitbox > .champion-grid-champion-thumbnail, .champion-grid-banning .grid-champion.ban-intented > .grid-champion-hitbox > .champion-grid-champion-thumbnail { border: thin solid #3c3c41; outline: 1px solid rgba(1,10,19,0.75); box-shadow: none; } .champion-grid-banning .grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail, .champion-grid-banning .grid-champion > .grid-champion-hitbox:not(:active):hover > .champion-grid-champion-thumbnail { border-color: #fe734f; box-shadow: 0 0 0 1px rgba(1,10,19,0.85), 0 0 7px 1px rgba(190,30,55,0.85); outline: none; } .grid-champion { width: 71px; height: 83px; cursor: pointer; position: relative; margin-top: 9px; margin-bottom: 4px; margin-left: 31px; backface-visibility: hidden; } .grid-champion[disabled], .grid-champion.grid-champion-selected, .grid-champion.grid-champion-ban-selected { cursor: default; } .grid-champion[disabled] > .grid-champion-hitbox, .grid-champion.grid-champion-selected > .grid-champion-hitbox, .grid-champion.grid-champion-ban-selected > .grid-champion-hitbox { pointer-events: none; } .grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail { display: inline-block; width: 67px; height: 67px; border-image-slice: 1; border-image-repeat: stretch; -webkit-filter: none; box-sizing: border-box; position: relative; overflow: hidden; } .grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: thin solid rgba(1,10,19,0.8); } .grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail > .champion-background-image { width: 72px; height: 72px; margin-left: -4px; margin-top: -4px; } .grid-champion > .grid-champion-hitbox > .champion-name { display: block; margin-top: 3px; line-height: 12px; color: #a09b8c; text-align: center; width: 140%; margin-left: -20%; -webkit-font-smoothing: subpixel-antialiased; } .grid-champion > .grid-champion-hitbox > .champion-name:lang(ja-jp) { letter-spacing: -1px; margin-top: 0px; } .grid-champion > .grid-champion-hitbox:hover > .champion-grid-champion-thumbnail { border-image-source: linear-gradient(to bottom, #f0e6d2 4%, #c89b3c 100%); } .grid-champion > .grid-champion-hitbox:hover > .champion-grid-champion-thumbnail > .champion-background-image { -webkit-filter: brightness(1.25); } .grid-champion > .grid-champion-hitbox:active > .champion-grid-champion-thumbnail { border-image-source: linear-gradient(to bottom, #463714 0%, #695625 100%); } .grid-champion.pick-intented .champion-background-image, .grid-champion.ban-intented .champion-background-image { -webkit-filter: grayscale(0.65); } .grid-champion[disabled] .champion-background-image { -webkit-filter: grayscale(1) brightness(0.75); } .champion-grid-banning .grid-champion > .grid-champion-hitbox:not(:active):hover > .champion-grid-champion-thumbnail { border-image-source: none; } .champion-grid-selected .champion-background-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(1,10,19,0.5); } .champion-grid-selected .grid-champion-selected .champion-background-image::after, .champion-grid-selected .grid-champion-hitbox:hover .champion-background-image::after { content: none; } @-moz-keyframes pickBorderBlinkAnimation { 0% { border-color: #3c3c41; } 75% { border-color: #5d5d71; } 100% { border-color: #3c3c41; } } @-webkit-keyframes pickBorderBlinkAnimation { 0% { border-color: #3c3c41; } 75% { border-color: #5d5d71; } 100% { border-color: #3c3c41; } } @-o-keyframes pickBorderBlinkAnimation { 0% { border-color: #3c3c41; } 75% { border-color: #5d5d71; } 100% { border-color: #3c3c41; } } @keyframes pickBorderBlinkAnimation { 0% { border-color: #3c3c41; } 75% { border-color: #5d5d71; } 100% { border-color: #3c3c41; } } .grid-champion-overlay { width: 81px; height: 81px; position: absolute; top: -6px; left: -7px; pointer-events: none; } .grid-champion-overlay::before { content: ''; background: center no-repeat; background-size: 100% 100%; position: absolute; width: 20px; height: 20px; right: 0px; } .champion-grid.sort-by-favorites .grid-champion.grid-champion-favorite > .grid-champion-hitbox > .grid-champion-overlay::before { background-image: url("/fe/lol-champ-select/images/config/champ-favorite-flag.png"); } .champion-grid .grid-champion.grid-champion-loyalty-reward-new > .grid-champion-hitbox > .grid-champion-overlay::before { background-image: url("/fe/lol-champ-select/images/config/champ-free-to-play-reward-flag-new.png"); } .champion-grid .grid-champion.grid-champion-loyalty-reward > .grid-champion-hitbox > .grid-champion-overlay::before { background-image: url("/fe/lol-champ-select/images/config/champ-free-to-play-reward-flag.png"); } .champion-grid .grid-champion.grid-champion-free-to-play-rgm > .grid-champion-hitbox > .grid-champion-overlay::before { background-image: url("/fe/lol-champ-select/images/config/champ-free-to-play-rgm-flag.png"); } .champion-grid .grid-champion.grid-champion-free-to-play > .grid-champion-hitbox > .grid-champion-overlay::before { background-image: url("/fe/lol-champ-select/images/config/champ-free-to-play-flag.png"); } .champion-grid .grid-champion.grid-champion-favorite > .grid-champion-hitbox > .grid-champion-overlay::before { background-image: url("/fe/lol-champ-select/images/config/champ-favorite-flag.png"); } .champion-grid .grid-champion.grid-champion-rented > .grid-champion-hitbox > .grid-champion-overlay::before { background-image: url("/fe/lol-champ-select/images/config/champ-rental-flag.png"); } .champion-grid .grid-champion > .grid-champion-hitbox > .grid-champion-overlay { background-repeat: no-repeat; background-size: 162px 486px; background-image: url("/fe/lol-champ-select/images/config/reticle-sprite-324x324-2x6F.png"); background-position: 0px 120px; } .champion-grid .grid-champion.self-pick-intented > .grid-champion-hitbox > .grid-champion-overlay { background-position: 0px -81px; } .champion-grid .grid-champion.ban-intented > .grid-champion-hitbox > .grid-champion-overlay { background-position: -81px -405px; } .champion-grid .grid-champion.pick-intented-MIDDLE > .grid-champion-hitbox > .grid-champion-overlay { background-position: -81px 0px; } .champion-grid .grid-champion.pick-intented-TOP > .grid-champion-hitbox > .grid-champion-overlay { background-position: -81px -81px; } .champion-grid .grid-champion.pick-intented-BOTTOM > .grid-champion-hitbox > .grid-champion-overlay { background-position: -81px -162px; } .champion-grid .grid-champion.pick-intented-UTILITY > .grid-champion-hitbox > .grid-champion-overlay { background-position: -81px -243px; } .champion-grid .grid-champion.pick-intented-JUNGLE > .grid-champion-hitbox > .grid-champion-overlay { background-position: -81px -324px; } .champion-grid .grid-champion.grid-champion-selected > .grid-champion-hitbox > .grid-champion-overlay, .champion-grid .grid-champion.grid-champion-selected > .grid-champion-hitbox:hover > .grid-champion-overlay { background-position: 0px -162px; } .champion-grid .grid-champion.grid-champion-ban-selected > .grid-champion-hitbox > .grid-champion-overlay, .champion-grid .grid-champion.grid-champion-ban-selected > .grid-champion-hitbox:hover > .grid-champion-overlay { background-position: 0px -324px; } .champion-grid .grid-champion > .grid-champion-hitbox:hover > .grid-champion-overlay { background-position: 0px 0px; } .champion-grid .grid-champion.grid-champion-banned > .grid-champion-hitbox > .grid-champion-overlay { background-position: 0px -405px; } .champion-grid.champion-grid-banning .grid-champion > .grid-champion-hitbox:hover > .grid-champion-overlay { background-position: 0px -243px; } .champion-select .champion-splash-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("/fe/lol-champ-select/images/config/overlay-defocus.png"); } .champion-select .champion-splash-background.mask-splash .background-vignette-container { -webkit-mask-image: url("/fe/lol-champ-select/images/background/center-splash-mask.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position-y: -45px; } .champion-select .champion-splash-background .background-vignette-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .champion-select .champion-splash-background .background-vignette-container.defocussed > .champ-select-bg { -webkit-filter: brightness(35%); } .champion-select .champion-splash-background .background-vignette-container::after { content: ''; opacity: 1; transform: translateZ(0); } .champion-select .champion-splash-background .background-vignette-container.defocussed::after { opacity: 1; } .champion-select .champion-splash-background .background-vignette-container.animated::after::after { transition: opacity 300ms cubic-bezier(0, 0.6, 0.1, 1); } .champion-select .champion-splash-background .background-vignette-container .champ-select-bg-darken { position: absolute; width: 100%; height: 100%; background-image: url("/fe/lol-champ-select/images/background/skin-splash-darken.png"); opacity: 0.55; } .champion-select .champion-splash-background.new-pick-outro-left .uikit-background-switcher { animation-name: transitionFromBright, fadeOut0to1, slideLeft, transitionToBright; animation-duration: 0.9s, 0.2s, 0.2s, 0.2s; animation-delay: 0s, 1.5s, 1.5s, 1.5s; animation-timing-function: cubic-bezier(0, 0, 0, 1), linear, cubic-bezier(1, 0, 1, 1), linear; animation-fill-mode: forwards; } .champion-select .champion-splash-background.new-pick-outro-right .uikit-background-switcher { animation-name: transitionFromBright, fadeOut0to1, slideRight, transitionToBright; animation-duration: 0.9s, 0.2s, 0.2s, 0.2s; animation-delay: 0s, 1.5s, 1.5s, 1.5s; animation-timing-function: cubic-bezier(0, 0, 0, 1), linear, cubic-bezier(1, 0, 1, 1), linear; animation-fill-mode: forwards; } .champion-select .champion-splash-background #champion-splash-ban-container { position: absolute; top: 56%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: opacity 300ms linear; } .champion-select .champion-splash-background #champion-splash-ban-image { position: absolute; transform: translateX(-50%) translateY(-50%); } .champion-select .champion-splash-background #champion-splash-ban-component { position: absolute; transform: translateX(-50%) translateY(calc(-50% - 68px)); } .champion-select .champion-splash-background #champion-splash-ban-component .container-slice-rotation { transform-origin: 269px; transform: rotate(0deg); } .champion-select .champion-splash-background #champion-splash-ban-component #image-top, .champion-select .champion-splash-background #champion-splash-ban-component #image-bottom { transform: translateX(0); } .champion-select .champion-splash-background #champion-splash-ban-component #rect-container-slice { transform-origin: center; transform: translateX(-100%); } .champion-select .champion-splash-background.is-animating #champion-splash-ban-image { transition: opacity 700ms 200ms linear; opacity: 0; } .champion-select .champion-splash-background.is-showing-grid #champion-splash-ban-container { opacity: 0; } .champion-select .champion-splash-background .hidden { display: none; } .champion-select .champion-splash-background.is-not-rotating #champion-splash-ban-component .container-slice-rotation { transform: rotate(0deg); } .champion-select .champion-splash-background.large-area-animations-enabled.is-animating #champion-splash-ban-component { animation: fadeToGrayscale 400ms 300ms cubic-bezier(0, 0.6, 0.1, 1); animation-fill-mode: forwards; } .champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-player-team #champion-splash-ban-component #rect-container-slice { animation: sliceMaskPlayer 300ms 100ms cubic-bezier(1, 0, 1, 1); animation-fill-mode: forwards; } .champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-player-team #champion-splash-ban-component #image-top { animation: sliceRight 2500ms 250ms cubic-bezier(0, 0.94, 0.21, 1); animation-fill-mode: forwards; } .champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-player-team #champion-splash-ban-component #image-bottom { animation: sliceLeft 2500ms 250ms cubic-bezier(0, 0.94, 0.21, 1); animation-fill-mode: forwards; } .champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-player-team.is-rotating #champion-splash-ban-component .container-slice-rotation { animation: rotatePlayer 250ms linear; animation-fill-mode: forwards; } .champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-enemy-team #champion-splash-ban-component #rect-container-slice { animation: sliceMaskEnemy 300ms 100ms cubic-bezier(1, 0, 1, 1); animation-fill-mode: forwards; } .champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-enemy-team #champion-splash-ban-component #image-top { animation: sliceLeft 2500ms 250ms cubic-bezier(0, 0.94, 0.21, 1); animation-fill-mode: forwards; } .champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-enemy-team #champion-splash-ban-component #image-bottom { animation: sliceRight 2500ms 250ms cubic-bezier(0, 0.94, 0.21, 1); animation-fill-mode: forwards; } .champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-rotating #champion-splash-ban-component .container-slice-rotation { animation: rotateEnemy 250ms linear; animation-fill-mode: forwards; } .champion-select .champion-splash-background .background-edge-backlight { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; } .champion-select .champion-splash-background .background-edge-backlight::before, .champion-select .champion-splash-background .background-edge-backlight::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 50%; background-repeat: no-repeat; } .champion-select .champion-splash-background .background-edge-backlight::after { left: 50%; right: 0; transform: scaleX(-1); } .champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight { animation-name: edgeBacklightSinglePulse; animation-duration: 1.13s; animation-delay: 0s; animation-timing-function: cubic-bezier(0, 0, 0.88, 0.47); background-color: rgba(248,2,0,0.05); } .champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight::before, .champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight::after { background-image: url("/fe/lol-champ-select/images/background/red-background-backlight-bg.png"); } .champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight.pick-snipe-banned-by-enemy-index-0 { animation-delay: 0.83s; } .champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight.pick-snipe-banned-by-enemy-index-1 { animation-delay: 1.48s; } .champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight.pick-snipe-banned-by-enemy-index-2 { animation-delay: 2.13s; } .champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight.pick-snipe-banned-by-enemy-index-3 { animation-delay: 2.78s; } .champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight.pick-snipe-banned-by-enemy-index-4 { animation-delay: 3.43s; } .champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight.pick-snipe-banned-by-enemy-index-5 { animation-delay: 4.08s; } .champion-select.is-banning-now .champion-splash-background .background-edge-backlight { opacity: 1; } .champion-select.is-banning-now .champion-splash-background .background-edge-backlight::before, .champion-select.is-banning-now .champion-splash-background .background-edge-backlight::after { opacity: 0; background-position: -40px; transition: opacity 0.5s; background-image: url("/fe/lol-champ-select/images/background/red-background-backlight-bg.png"); } .champion-select.is-picking-now.pick-screen .champion-splash-background .background-edge-backlight { opacity: 1; } .champion-select.is-picking-now.pick-screen .champion-splash-background .background-edge-backlight::before, .champion-select.is-picking-now.pick-screen .champion-splash-background .background-edge-backlight::after { opacity: 0; background-position: -80px; transition: opacity 0.5s; background-image: url("/fe/lol-champ-select/images/background/blue-background-backlight-bg.png"); } .champion-select.is-banning-now.timer-less-than-11-seconds .background-edge-backlight, .champion-select.is-picking-now.pick-screen.timer-less-than-11-seconds .background-edge-backlight { animation-name: edgeBacklightMultiPulse; animation-duration: 1s; animation-delay: 0s; animation-iteration-count: 10; animation-timing-function: cubic-bezier(0.46, 0.19, 0.7, 0.98); } .champion-select.is-banning-now.timer-less-than-11-seconds .background-edge-backlight::before, .champion-select.is-picking-now.pick-screen.timer-less-than-11-seconds .background-edge-backlight::before, .champion-select.is-banning-now.timer-less-than-11-seconds .background-edge-backlight::after, .champion-select.is-picking-now.pick-screen.timer-less-than-11-seconds .background-edge-backlight::after { opacity: 1; } .champion-select .champion-splash-emblem-overlay { position: absolute; bottom: 255px; display: flex; align-items: flex-start; justify-content: center; width: 100%; } .champion-select .champion-splash-emblem-overlay img { width: 150px; } .champion-select .champselect-ban-lowspec-animation { animation: banOpacity 0.4s 0.87s forwards linear, banFilter 900ms forwards cubic-bezier(0, 0, 0.66, 1); } @-moz-keyframes edgeBacklightSinglePulse { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes edgeBacklightSinglePulse { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes edgeBacklightSinglePulse { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes edgeBacklightSinglePulse { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes edgeBacklightMultiPulse { 0% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 1; } } @-webkit-keyframes edgeBacklightMultiPulse { 0% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 1; } } @-o-keyframes edgeBacklightMultiPulse { 0% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes edgeBacklightMultiPulse { 0% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 1; } } @-moz-keyframes transitionFromBright { 0% { -webkit-filter: brightness(1.5); } 100% { -webkit-filter: brightness(1); } } @-webkit-keyframes transitionFromBright { 0% { -webkit-filter: brightness(1.5); } 100% { -webkit-filter: brightness(1); } } @-o-keyframes transitionFromBright { 0% { -webkit-filter: brightness(1.5); } 100% { -webkit-filter: brightness(1); } } @keyframes transitionFromBright { 0% { -webkit-filter: brightness(1.5); } 100% { -webkit-filter: brightness(1); } } @-moz-keyframes fadeOut0to1 { 0% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut0to1 { 0% { opacity: 1; } 100% { opacity: 1; } } @-o-keyframes fadeOut0to1 { 0% { opacity: 1; } 100% { opacity: 1; } } @keyframes fadeOut0to1 { 0% { opacity: 1; } 100% { opacity: 1; } } @-moz-keyframes slideLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-300px); } } @-webkit-keyframes slideLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-300px); } } @-o-keyframes slideLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-300px); } } @keyframes slideLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-300px); } } @-moz-keyframes slideRight { 0% { transform: translateX(0); } 100% { transform: translateX(300px); } } @-webkit-keyframes slideRight { 0% { transform: translateX(0); } 100% { transform: translateX(300px); } } @-o-keyframes slideRight { 0% { transform: translateX(0); } 100% { transform: translateX(300px); } } @keyframes slideRight { 0% { transform: translateX(0); } 100% { transform: translateX(300px); } } @-moz-keyframes transitionToBright { 0% { -webkit-filter: brightness(1) blur(0px); } 100% { -webkit-filter: brightness(1.5) blur(8px); } } @-webkit-keyframes transitionToBright { 0% { -webkit-filter: brightness(1) blur(0px); } 100% { -webkit-filter: brightness(1.5) blur(8px); } } @-o-keyframes transitionToBright { 0% { -webkit-filter: brightness(1) blur(0px); } 100% { -webkit-filter: brightness(1.5) blur(8px); } } @keyframes transitionToBright { 0% { -webkit-filter: brightness(1) blur(0px); } 100% { -webkit-filter: brightness(1.5) blur(8px); } } @-moz-keyframes banOpacity { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes banOpacity { from { opacity: 1; } to { opacity: 0; } } @-o-keyframes banOpacity { from { opacity: 1; } to { opacity: 0; } } @keyframes banOpacity { from { opacity: 1; } to { opacity: 0; } } @-moz-keyframes banFilter { from { -webkit-filter: grayscale(0) brightness(1.5); } to { -webkit-filter: grayscale(1) brightness(1); } } @-webkit-keyframes banFilter { from { -webkit-filter: grayscale(0) brightness(1.5); } to { -webkit-filter: grayscale(1) brightness(1); } } @-o-keyframes banFilter { from { -webkit-filter: grayscale(0) brightness(1.5); } to { -webkit-filter: grayscale(1) brightness(1); } } @keyframes banFilter { from { -webkit-filter: grayscale(0) brightness(1.5); } to { -webkit-filter: grayscale(1) brightness(1); } } .champion-select.entry-animation.should-play-intro .ring-splash-outer .left-ring, .champion-select.entry-animation.should-play-intro .ring-splash-outer .right-ring { animation-name: initialOuterRingSizeAnimation, initialOuterRingFlashAnimation; animation-duration: 0.8s, 0.9s; animation-delay: 0s, 0.8s; animation-timing-function: cubic-bezier(0.01, 1, 0.085, 0.915), cubic-bezier(0, 0.755, 0.425, 0.91); animation-direction: forwards; animation-iteration-count: 1; } .champion-select.entry-animation.should-play-intro .ring-splash-inner .left-ring, .champion-select.entry-animation.should-play-intro .ring-splash-inner .right-ring { animation-name: initialInnerRingSizeAnimation, initialInnerRingFlashAnimation; animation-duration: 0.8s, 0.9s; animation-delay: 0s, 0.8s; animation-timing-function: cubic-bezier(0.01, 1, 0.085, 0.915), cubic-bezier(0, 0.755, 0.425, 0.91); animation-direction: forwards; animation-iteration-count: 1; } .champion-select.entry-animation.should-play-intro .ring-splash-dashed:before { animation-name: initialDashedRingSizeAnimation, initialDashedRingFlashAnimation; animation-duration: 0.8s, 0.9s; animation-delay: 0s, 0.8s; animation-timing-function: cubic-bezier(0.01, 1, 0.085, 0.915), cubic-bezier(0, 0.755, 0.425, 0.91); animation-direction: forwards; animation-iteration-count: 1; } .champion-splash-ring { --caret-rotation-duration: 800ms; position: absolute; width: 100%; height: 100%; top: -62.5px; left: 50%; transform: translateX(-50%); overflow: hidden; pointer-events: none; } .champion-splash-ring .ring-splash-dashed { position: absolute; width: 100%; height: 100%; -webkit-mask-repeat: no-repeat; } .champion-splash-ring .ring-splash-dashed::before, .champion-splash-ring .ring-splash-dashed::after { content: ''; position: absolute; width: 100%; height: 100%; background-image: url("/fe/lol-champ-select/images/champion-ring/ring-splash-dashed.png"); background-repeat: no-repeat; background-size: 598px; background-position: center; } .champion-splash-ring .ring-splash-outer, .champion-splash-ring .ring-splash-inner { position: absolute; top: 50%; left: 50%; } .champion-splash-ring .ring-splash-outer .left-ring, .champion-splash-ring .ring-splash-inner .left-ring, .champion-splash-ring .ring-splash-outer .right-ring, .champion-splash-ring .ring-splash-inner .right-ring { content: ''; position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-size: contain; background-position: left center; } .champion-splash-ring .ring-splash-outer .left-ring, .champion-splash-ring .ring-splash-inner .left-ring { transform: translateX(-100%) translateY(-50%); } .champion-splash-ring .ring-splash-outer .right-ring, .champion-splash-ring .ring-splash-inner .right-ring { transform-origin: center; transform: scaleX(-1) translateY(-50%); } .champion-splash-ring .ring-splash-outer .left-ring, .champion-splash-ring .ring-splash-outer .right-ring { width: 324px; height: 404px; background-image: url("/fe/lol-champ-select/images/champion-ring/ring-splash-outer-left.png"); } .champion-splash-ring .ring-splash-inner .left-ring, .champion-splash-ring .ring-splash-inner .right-ring { width: 324px; height: 406px; background-image: url("/fe/lol-champ-select/images/champion-ring/ring-splash-inner-left.png"); background-position: 7.5px center; } .champion-splash-ring.animation-enabled .ring-splash-dashed::before, .champion-splash-ring.animation-enabled .ring-splash-dashed::after { animation: rotateSplashRing 60s linear infinite; } .champion-select.pick-screen.is-acting-now .champion-splash-ring, .champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring { top: 0; } .champion-select.pick-screen.is-acting-now .champion-splash-ring .ring-splash-dashed, .champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring .ring-splash-dashed { -webkit-mask-image: linear-gradient(to right, #000 0, #000 27%, transparent 28.5%, transparent 71.5%, #000 73%); } .champion-select.pick-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::before, .champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::before, .champion-select.pick-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::after, .champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::after { opacity: 0.6; } .champion-select.pick-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::before, .champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::before { left: -50px; } .champion-select.pick-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::after, .champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::after { right: -50px; } .champion-select.pick-screen.is-acting-now .champion-splash-ring .ring-splash-outer, .champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring .ring-splash-outer, .champion-select.pick-screen.is-acting-now .champion-splash-ring .ring-splash-inner, .champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring .ring-splash-inner { display: none; } .champion-select.selected-screen .champion-splash-ring .ring-splash-dashed, .champion-select.position-assignment-screen .champion-splash-ring .ring-splash-dashed, .champion-select.game-starting-screen .champion-splash-ring .ring-splash-dashed { -webkit-mask-image: linear-gradient(to top, transparent 0, transparent 160px, #000 160px, #000 565px, transparent 82%); } .champion-select.selected-screen .champion-splash-ring .ring-splash-dashed:after, .champion-select.position-assignment-screen .champion-splash-ring .ring-splash-dashed:after, .champion-select.game-starting-screen .champion-splash-ring .ring-splash-dashed:after { display: none; } .champion-select.selected-screen .champion-splash-ring.expanded-header .ring-splash-dashed, .champion-select.position-assignment-screen .champion-splash-ring.expanded-header .ring-splash-dashed, .champion-select.game-starting-screen .champion-splash-ring.expanded-header .ring-splash-dashed { -webkit-mask-image: linear-gradient(to top, transparent 0, transparent 160px, #000 160px, #000 565px, transparent 80%); } @-moz-keyframes initialOuterRingSizeAnimation { 0% { width: 750px; } 100% { width: 374px; } } @-webkit-keyframes initialOuterRingSizeAnimation { 0% { width: 750px; } 100% { width: 374px; } } @-o-keyframes initialOuterRingSizeAnimation { 0% { width: 750px; } 100% { width: 374px; } } @keyframes initialOuterRingSizeAnimation { 0% { width: 750px; } 100% { width: 374px; } } @-moz-keyframes initialInnerRingSizeAnimation { 0% { width: 180px; } 100% { width: 287.5px; } } @-webkit-keyframes initialInnerRingSizeAnimation { 0% { width: 180px; } 100% { width: 287.5px; } } @-o-keyframes initialInnerRingSizeAnimation { 0% { width: 180px; } 100% { width: 287.5px; } } @keyframes initialInnerRingSizeAnimation { 0% { width: 180px; } 100% { width: 287.5px; } } @-moz-keyframes initialOuterRingFlashAnimation { 0% { width: 374px; } 5% { width: 324px; -webkit-filter: brightness(4); } 100% { width: 324px; -webkit-filter: brightness(1); } } @-webkit-keyframes initialOuterRingFlashAnimation { 0% { width: 374px; } 5% { width: 324px; -webkit-filter: brightness(4); } 100% { width: 324px; -webkit-filter: brightness(1); } } @-o-keyframes initialOuterRingFlashAnimation { 0% { width: 374px; } 5% { width: 324px; -webkit-filter: brightness(4); } 100% { width: 324px; -webkit-filter: brightness(1); } } @keyframes initialOuterRingFlashAnimation { 0% { width: 374px; } 5% { width: 324px; -webkit-filter: brightness(4); } 100% { width: 324px; -webkit-filter: brightness(1); } } @-moz-keyframes initialInnerRingFlashAnimation { 0% { width: 287.5px; } 5% { width: 324px; -webkit-filter: brightness(4); } 100% { width: 324px; -webkit-filter: brightness(1); } } @-webkit-keyframes initialInnerRingFlashAnimation { 0% { width: 287.5px; } 5% { width: 324px; -webkit-filter: brightness(4); } 100% { width: 324px; -webkit-filter: brightness(1); } } @-o-keyframes initialInnerRingFlashAnimation { 0% { width: 287.5px; } 5% { width: 324px; -webkit-filter: brightness(4); } 100% { width: 324px; -webkit-filter: brightness(1); } } @keyframes initialInnerRingFlashAnimation { 0% { width: 287.5px; } 5% { width: 324px; -webkit-filter: brightness(4); } 100% { width: 324px; -webkit-filter: brightness(1); } } @-moz-keyframes initialDashedRingSizeAnimation { 0% { transform: scale(1); } 100% { transform: scale(1.175); } } @-webkit-keyframes initialDashedRingSizeAnimation { 0% { transform: scale(1); } 100% { transform: scale(1.175); } } @-o-keyframes initialDashedRingSizeAnimation { 0% { transform: scale(1); } 100% { transform: scale(1.175); } } @keyframes initialDashedRingSizeAnimation { 0% { transform: scale(1); } 100% { transform: scale(1.175); } } @-moz-keyframes initialDashedRingFlashAnimation { 0% { transform: scale(1.175); } 5% { transform: scale(1); -webkit-filter: brightness(4); } 100% { transform: scale(1); -webkit-filter: brightness(1); } } @-webkit-keyframes initialDashedRingFlashAnimation { 0% { transform: scale(1.175); } 5% { transform: scale(1); -webkit-filter: brightness(4); } 100% { transform: scale(1); -webkit-filter: brightness(1); } } @-o-keyframes initialDashedRingFlashAnimation { 0% { transform: scale(1.175); } 5% { transform: scale(1); -webkit-filter: brightness(4); } 100% { transform: scale(1); -webkit-filter: brightness(1); } } @keyframes initialDashedRingFlashAnimation { 0% { transform: scale(1.175); } 5% { transform: scale(1); -webkit-filter: brightness(4); } 100% { transform: scale(1); -webkit-filter: brightness(1); } } @-moz-keyframes rotateSplashRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } } @-webkit-keyframes rotateSplashRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } } @-o-keyframes rotateSplashRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } } @keyframes rotateSplashRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } } .champ-select-chroma-modal .chroma-information .child-skin-name, .champ-select-chroma-modal .chroma-list-item { font-family: var(--font-display); } .champ-select-chroma-modal .chroma-information .child-skin-name .child-skin-disabled-notification { font-family: var(--font-body); } .champ-select-chroma-modal .chroma-information .child-skin-name, .champ-select-chroma-modal .chroma-list-item { font-family: var(--font-display); } .champ-select-chroma-modal .chroma-information .child-skin-name .child-skin-disabled-notification { font-family: var(--font-body); } .champ-select-chroma-modal .chroma-information .child-skin-name .child-skin-disabled-notification, .champ-select-chroma-modal .chroma-list-item { -webkit-user-select: none; } .champ-select-chroma-modal .chroma-information .child-skin-name .child-skin-disabled-notification, .champ-select-chroma-modal .chroma-list-item { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .champ-select-chroma-modal .chroma-list-item { text-transform: uppercase; } .champ-select-chroma-modal .chroma-list-item:lang(ko-kr), .champ-select-chroma-modal .chroma-list-item:lang(ja-jp), .champ-select-chroma-modal .chroma-list-item:lang(tr-tr), .champ-select-chroma-modal .chroma-list-item:lang(el-gr), .champ-select-chroma-modal .chroma-list-item:lang(th-th), .champ-select-chroma-modal .chroma-list-item:lang(zh-tw) { text-transform: none; } .champ-select-chroma-modal .chroma-list-item { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .champ-select-chroma-modal .chroma-list-item:lang(ar-ae) { letter-spacing: 0; } .champ-select-chroma-modal .chroma-information .child-skin-name .child-skin-disabled-notification { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .champ-select-chroma-modal .chroma-information .child-skin-name .child-skin-disabled-notification:lang(ja-jp) { font-size: 13px; } .champ-select-chroma-modal .chroma-information .child-skin-name .child-skin-disabled-notification:lang(ar-ae) { letter-spacing: 0; } .champ-select-chroma-modal { width: 305px; display: flex; flex-direction: column; background: #000; } .champ-select-chroma-modal.hidden { display: none; } .champ-select-chroma-modal.chroma-view { min-height: 355px; max-height: 420px; } .champ-select-chroma-modal .chroma-information { position: relative; flex-grow: 1; height: 315px; width: 100%; border-bottom: thin solid #463714; background-size: cover; } .champ-select-chroma-modal .chroma-information .chroma-information-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: contain; background-repeat: no-repeat; } .champ-select-chroma-modal .chroma-information .child-skin-name { font-weight: bold; font-size: 24px; color: #f7f0de; position: absolute; bottom: 10px; width: 100%; text-align: center; } .champ-select-chroma-modal .chroma-information .child-skin-name .child-skin-disabled-notification { font-style: italic; } .champ-select-chroma-modal .chroma-list-item-content { width: 96%; display: flex; justify-content: space-between; align-items: center; } .champ-select-chroma-modal .chroma-list-item { height: 28px; display: flex; align-items: center; color: #cdbe91; cursor: pointer; display: flex; flex-direction: row; align-items: center; border-bottom: thin solid #1e2328; } .champ-select-chroma-modal .chroma-list-item .chroma-list-item-name { width: 240px; } .champ-select-chroma-modal .chroma-list-item .chroma-list-item-status-icon { width: 14px; height: 11px; background-size: center; background-repeat: no-repeat; } .champ-select-chroma-modal .chroma-list-item .chroma-list-item-highlight-container { width: 10px; height: 22px; } .champ-select-chroma-modal .chroma-list-item .chroma-list-item-highlight { width: 3px; height: 100%; background-color: none; } .champ-select-chroma-modal .chroma-list-item .chroma-list-item-status-icon { width: 24px; height: 24px; background-position: center; } .champ-select-chroma-modal .chroma-list-item:hover { color: #f0e6d2; background-color: #1e2328; } .champ-select-chroma-modal .chroma-list-item:hover .chroma-list-item-highlight { background-color: #f0e6d2; } .champ-select-chroma-modal .chroma-list-item:active { color: #463714; background-color: rgba(30,35,40,0.5); } .champ-select-chroma-modal .chroma-list-item.locked { color: #888; cursor: default; } .champ-select-chroma-modal .chroma-list-item.locked .chroma-list-item-status-icon { background-image: url("/fe/lol-static-assets/images/npe-rewards-lock-grey.png"); background-size: auto; } .champ-select-chroma-modal .chroma-list-item.locked .chroma-list-item-highlight { background: none; } .champ-select-chroma-modal .chroma-list-item.locked:hover { color: #888; background-color: rgba(30,35,40,0); } .champ-select-chroma-modal .chroma-list-item.selected { color: #cdbe91; } .champ-select-chroma-modal .chroma-list-item.selected .chroma-list-item-highlight { width: 2px; background-color: #cdbe91; } .champ-select-chroma-modal .chroma-list-item.selected .chroma-list-item-status-icon { background-size: contain; background-image: url("/fe/lol-static-assets/images/npe-rewards-checkmark-large.png"); } .champ-select-chroma-modal .chroma-selection { flex-grow: 0; min-height: 40px; max-height: 92px; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; padding: 7px 0; } .champ-select-chroma-modal lol-uikit-close-button { position: absolute; right: 0; top: 0; transform: translate(50%, -50%); } lol-uikit-content-block.champ-select-disconnect-notification-content[type=tooltip-system] { padding: 15px; white-space: normal; text-align: left; } lol-uikit-content-block.champ-select-disconnect-notification-content[type=tooltip-system] .spinner-container { width: 40px; height: 34px; position: absolute; left: 15px; top: 15px; } lol-uikit-content-block.champ-select-disconnect-notification-content[type=tooltip-system] .text-container { margin-left: 60px; max-width: 260px; } lol-uikit-content-block.champ-select-disconnect-notification-content[type=tooltip-system] .text-container .body-text-container { margin-top: 7px; } .masteries-modal { position: absolute; top: 75px; left: 108px; } .masteries-modal .masteries-body { background-color: #010a13; } .emotes-modal { position: absolute; top: 75px; left: 108px; } .emotes-modal .emote-root-component { padding: 27px; padding-right: 29px; background: url("/fe/lol-champ-select/images/emotes/emotes-background.png"); background-size: cover; } .custom-loadout-modal { position: absolute; top: 75px; left: 108px; width: 1059px; height: 635px; padding: 5px; padding-right: 29px; } .custom-loadout-modal .root-component { padding: 10px; } .emotes-edit-button-container { display: flex; pointer-events: auto; } .emotes-edit-button-container.disabled.showing-emotes { pointer-events: none; } .emotes-edit-button-container .emotes-edit-button { width: 37px; height: 37px; margin: 0 5px; background: url("/fe/lol-champ-select/images/emotes/edit-emotes-normal-off.png") center no-repeat; background-size: contain; align-self: flex-end; } .emotes-edit-button-container .emotes-edit-button.no-ward-skins { margin: 0 2px 0 8px; } .emotes-edit-button-container .emotes-edit-button:after { content: url("/fe/lol-champ-select/images/emotes/edit-emotes-hover-off.png") url("/fe/lol-champ-select/images/emotes/edit-emotes-click-off.png"); display: none; height: 0; width: 0; } .emotes-edit-button-container .emotes-edit-button:hover { cursor: pointer; background-image: url("/fe/lol-champ-select/images/emotes/edit-emotes-hover-off.png"); } .emotes-edit-button-container .emotes-edit-button:active { background-image: url("/fe/lol-champ-select/images/emotes/edit-emotes-click-off.png"); } .emotes-edit-button-container .emotes-edit-button.disabled { cursor: default; background-image: url("/fe/lol-champ-select/images/emotes/edit-emotes-disabled-off.png"); } .emotes-edit-button-container .emotes-edit-button.showing-emotes { background-image: url("/fe/lol-champ-select/images/emotes/edit-emotes-normal-on.png"); cursor: default; } .emotes-edit-button-container .emotes-edit-button.showing-emotes:after { content: url("/fe/lol-champ-select/images/emotes/edit-emotes-hover-on.png") url("/fe/lol-champ-select/images/emotes/edit-emotes-click-on.png"); display: none; height: 0; width: 0; } .emotes-edit-button-container .emotes-edit-button.showing-emotes:hover { background-image: url("/fe/lol-champ-select/images/emotes/edit-emotes-hover-on.png"); } .emotes-edit-button-container .emotes-edit-button.showing-emotes:active { background-image: url("/fe/lol-champ-select/images/emotes/edit-emotes-click-on.png"); } .emotes-edit-button-container .emotes-edit-button.showing-emotes.disabled { background-image: url("/fe/lol-champ-select/images/emotes/edit-emotes-disabled-on.png"); } .flyout-selector-button-container { position: relative; width: 53px; height: 53px; display: flex; transition: 450ms all ease-out; } .flyout-selector-button-container.disabled .flyout-selector-button-icon .flyout-selector-button .flyout-selector-button-image { opacity: 0.3; } .flyout-selector-button-container.disabled .flyout-selector-button-icon .flyout-selector-button:after { content: ''; size: 30px; bottom: -14px; left: 11px; background-size: cover; position: absolute; } .flyout-selector-button-container .flyout-selector-button-icon { display: flex; flex: 1; position: relative; background: #3c3c41; margin: 1px; cursor: pointer; } .flyout-selector-button-container .flyout-selector-button-icon .flyout-selector-button { padding: 1px; margin: 1px; background: #000; border: 0; display: flex; flex: 1; -webkit-filter: brightness(80%); transition: -webkit-filter 0.3s; } .flyout-selector-button-container .flyout-selector-button-icon .flyout-selector-button .flyout-selector-button-image { height: 100%; opacity: 0.8; transition: all 0.3s; width: 100%; } .flyout-selector-button-container .flyout-selector-button-icon .flyout-selector-button:focus { outline: 0; } .flyout-selector-button-container.selected-item .flyout-selector-button-icon::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; box-sizing: border-box; border-width: 2px; border-style: solid; -webkit-border-image: linear-gradient(to bottom, #785a28 0, #c8aa6e 100%); border-image-slice: 1; transition: opacity 0.3s; box-shadow: 0 0 0 2px #000 inset; animation-name: FlyoutSelectorSelectedButtonIntroAnimation; animation-fill-mode: both; animation-duration: 0.3s; animation-delay: 0.3s; } .flyout-selector-button-container:hover .flyout-selector-button { -webkit-filter: brightness(100%); } .flyout-selector-button-container.disabled .flyout-selector-button-icon { cursor: default; } .flyout-selector-button-container.disabled:hover .flyout-selector-button { -webkit-filter: brightness(80%); } .flyout-selector-button-container:focus { outline: 0; } @-moz-keyframes FlyoutSelectorSelectedButtonIntroAnimation { 0% { -webkit-filter: brightness(1.5); transform: scale(0.96); opacity: 0; } 10% { -webkit-filter: brightness(1.5); transform: scale(0.96); opacity: 1; } 50% { -webkit-filter: brightness(1); transform: scale(0.96); opacity: 1; } 100% { -webkit-filter: brightness(0.8); transform: scale(1); opacity: 1; } } @-webkit-keyframes FlyoutSelectorSelectedButtonIntroAnimation { 0% { -webkit-filter: brightness(1.5); transform: scale(0.96); opacity: 0; } 10% { -webkit-filter: brightness(1.5); transform: scale(0.96); opacity: 1; } 50% { -webkit-filter: brightness(1); transform: scale(0.96); opacity: 1; } 100% { -webkit-filter: brightness(0.8); transform: scale(1); opacity: 1; } } @-o-keyframes FlyoutSelectorSelectedButtonIntroAnimation { 0% { -webkit-filter: brightness(1.5); transform: scale(0.96); opacity: 0; } 10% { -webkit-filter: brightness(1.5); transform: scale(0.96); opacity: 1; } 50% { -webkit-filter: brightness(1); transform: scale(0.96); opacity: 1; } 100% { -webkit-filter: brightness(0.8); transform: scale(1); opacity: 1; } } @keyframes FlyoutSelectorSelectedButtonIntroAnimation { 0% { -webkit-filter: brightness(1.5); transform: scale(0.96); opacity: 0; } 10% { -webkit-filter: brightness(1.5); transform: scale(0.96); opacity: 1; } 50% { -webkit-filter: brightness(1); transform: scale(0.96); opacity: 1; } 100% { -webkit-filter: brightness(0.8); transform: scale(1); opacity: 1; } } .flyout-selector-trigger-button { width: 37px; height: 37px; box-sizing: border-box; border: thin solid #3c3c41; box-sizing: border-box; position: relative; overflow: hidden; transition: border-color 0.2s; margin: 0 5px; } .flyout-selector-trigger-button .selection-button-image { -webkit-filter: brightness(80%); transition: all 200ms; background: #010a13; width: 100%; height: 100%; -webkit-user-drag: none; } .flyout-selector-trigger-button.disabled { background-color: #010a13; -webkit-filter: brightness(35%); border-image-source: linear-gradient(to bottom, #a09b8c 0, #1e2328 100%); } .flyout-selector-trigger-button.disabled .selection-button-image { -webkit-filter: grayscale(100%); } .flyout-selector-trigger-button .animated-border-overlay, .flyout-selector-trigger-button .animated-gradient-overlay { opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; box-sizing: border-box; pointer-events: none; } .flyout-selector-trigger-button.enabled:hover, .flyout-selector-trigger-button.enabled:active { cursor: pointer; border-color: #c89b3c; } .flyout-selector-trigger-button.enabled:hover .selection-button-image, .flyout-selector-trigger-button.enabled:active .selection-button-image { opacity: 1; -webkit-filter: brightness(1.35); } .flyout-selector-trigger-button.enabled .animated-gradient-overlay { top: 0; left: 0; width: 200%; height: 200%; background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0.1) 100%); } .flyout-selector-trigger-button.enabled .animated-border-overlay { box-sizing: border-box; border: 2px solid #c89b3c; transition: opacity 0.5s; } .flyout-selector-trigger-button.enabled.animate-button .animated-gradient-overlay { animation-name: FlyoutSelectorTriggerGradientOverlayAnimation; animation-fill-mode: both; animation-duration: 0.4s; } .flyout-selector-trigger-button.enabled.animate-button .animated-border-overlay { animation-name: FlyoutSelectorTriggerBorderOverlayAnimation; animation-duration: 0.6s; animation-fill-mode: both; } @-moz-keyframes FlyoutSelectorTriggerGradientOverlayAnimation { 0% { opacity: 0.5; transform: translate(-50%, -50%); } 50% { opacity: 0.5; transform: translate(0%, 0%); } 100% { opacity: 0; transform: translate(0%, 0%); } } @-webkit-keyframes FlyoutSelectorTriggerGradientOverlayAnimation { 0% { opacity: 0.5; transform: translate(-50%, -50%); } 50% { opacity: 0.5; transform: translate(0%, 0%); } 100% { opacity: 0; transform: translate(0%, 0%); } } @-o-keyframes FlyoutSelectorTriggerGradientOverlayAnimation { 0% { opacity: 0.5; transform: translate(-50%, -50%); } 50% { opacity: 0.5; transform: translate(0%, 0%); } 100% { opacity: 0; transform: translate(0%, 0%); } } @keyframes FlyoutSelectorTriggerGradientOverlayAnimation { 0% { opacity: 0.5; transform: translate(-50%, -50%); } 50% { opacity: 0.5; transform: translate(0%, 0%); } 100% { opacity: 0; transform: translate(0%, 0%); } } @-moz-keyframes FlyoutSelectorTriggerBorderOverlayAnimation { 0% { -webkit-filter: brightness(1.4); opacity: 0; } 10% { -webkit-filter: brightness(1.4); opacity: 1; } 50% { -webkit-filter: brightness(0.8); opacity: 1; } 100% { -webkit-filter: brightness(0.7); opacity: 0; } } @-webkit-keyframes FlyoutSelectorTriggerBorderOverlayAnimation { 0% { -webkit-filter: brightness(1.4); opacity: 0; } 10% { -webkit-filter: brightness(1.4); opacity: 1; } 50% { -webkit-filter: brightness(0.8); opacity: 1; } 100% { -webkit-filter: brightness(0.7); opacity: 0; } } @-o-keyframes FlyoutSelectorTriggerBorderOverlayAnimation { 0% { -webkit-filter: brightness(1.4); opacity: 0; } 10% { -webkit-filter: brightness(1.4); opacity: 1; } 50% { -webkit-filter: brightness(0.8); opacity: 1; } 100% { -webkit-filter: brightness(0.7); opacity: 0; } } @keyframes FlyoutSelectorTriggerBorderOverlayAnimation { 0% { -webkit-filter: brightness(1.4); opacity: 0; } 10% { -webkit-filter: brightness(1.4); opacity: 1; } 50% { -webkit-filter: brightness(0.8); opacity: 1; } 100% { -webkit-filter: brightness(0.7); opacity: 0; } } .game-event-info-card-title, .game-event-info-card-icon-subtext { font-family: var(--font-display); } .game-event-info-card-description { font-family: var(--font-body); } .game-event-info-card-title, .game-event-info-card-description, .game-event-info-card-icon-subtext { -webkit-user-select: none; } .game-event-info-card-title, .game-event-info-card-description, .game-event-info-card-icon-subtext { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .game-event-info-card-title, .game-event-info-card-icon-subtext { text-transform: uppercase; } .game-event-info-card-title:lang(ko-kr), .game-event-info-card-icon-subtext:lang(ko-kr), .game-event-info-card-title:lang(ja-jp), .game-event-info-card-icon-subtext:lang(ja-jp), .game-event-info-card-title:lang(tr-tr), .game-event-info-card-icon-subtext:lang(tr-tr), .game-event-info-card-title:lang(el-gr), .game-event-info-card-icon-subtext:lang(el-gr), .game-event-info-card-title:lang(th-th), .game-event-info-card-icon-subtext:lang(th-th), .game-event-info-card-title:lang(zh-tw), .game-event-info-card-icon-subtext:lang(zh-tw) { text-transform: none; } .game-event-info-card-title, .game-event-info-card-icon-subtext { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .game-event-info-card-title:lang(ar-ae), .game-event-info-card-icon-subtext:lang(ar-ae) { letter-spacing: 0; } .game-event-info-card-description { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .game-event-info-card-description:lang(ar-ae) { letter-spacing: 0; } .game-event-info-card { display: flex; transform: translateX(-580px); } .game-event-info-card .game-event-info-card-left { display: flex; flex-direction: column; opacity: 0; flex-grow: 1; justify-content: center; text-align: right; padding-bottom: 22px; } .game-event-info-card .game-event-info-card-right { display: flex; flex-direction: column; } .game-event-info-card-title { transform: translateX(-10px); } .game-event-info-card-description { transform: translateX(-10px); } .game-event-info-card-icon { animation: fadeInIntro1 1s ease-out; } .game-event-info-card-icon img { width: 120px; height: 120px; } .game-event-info-card-icon-subtext { animation: fadeInIntro2 1s ease-out; } @-moz-keyframes fadeInIntro1 { 0% { opacity: 0; } 25% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes fadeInIntro1 { 0% { opacity: 0; } 25% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } } @-o-keyframes fadeInIntro1 { 0% { opacity: 0; } 25% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } } @keyframes fadeInIntro1 { 0% { opacity: 0; } 25% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } } @-moz-keyframes fadeInIntro2 { 0% { opacity: 0; } 50% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes fadeInIntro2 { 0% { opacity: 0; } 50% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } } @-o-keyframes fadeInIntro2 { 0% { opacity: 0; } 50% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } } @keyframes fadeInIntro2 { 0% { opacity: 0; } 50% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } } .champion-select .pick-mode { font-family: var(--font-display); } .champion-select .team-size { font-family: var(--font-body); } .champion-select .team-size, .champion-select .pick-mode { -webkit-user-select: none; } .champion-select .team-size, .champion-select .pick-mode { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .champion-select .pick-mode { text-transform: uppercase; } .champion-select .pick-mode:lang(ko-kr), .champion-select .pick-mode:lang(ja-jp), .champion-select .pick-mode:lang(tr-tr), .champion-select .pick-mode:lang(el-gr), .champion-select .pick-mode:lang(th-th), .champion-select .pick-mode:lang(zh-tw) { text-transform: none; } .champion-select .pick-mode { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .champion-select .pick-mode:lang(ar-ae) { letter-spacing: 0; } .champion-select .team-size { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .champion-select .team-size:lang(ja-jp) { font-size: 13px; } .champion-select .team-size:lang(ar-ae) { letter-spacing: 0; } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text { font-family: var(--font-display); } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text { -webkit-user-select: none; } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text { text-transform: uppercase; } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:lang(ko-kr), .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:lang(ja-jp), .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:lang(tr-tr), .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:lang(el-gr), .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:lang(th-th), .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:lang(zh-tw) { text-transform: none; } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text { color: #c8aa6e; font-size: 14px; font-weight: 700; letter-spacing: 0.0325em; } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:lang(ar-ae) { letter-spacing: 0; } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:hover { color: #f0e6d2; } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:disabled, .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:disabled:hover, .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text[disabled='true'], .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text[disabled='true']:hover { color: #5c5b57; cursor: default; } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:active { color: #785a28; } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text { color: #b2d9db; } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:hover { color: #cdfafa; } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:active { color: #005a82; } .lock-in { text-align: center; position: absolute; pointer-events: none; width: 640px; top: 583px; } .lock-in .lock-in-button-lines { background-image: url("/fe/lol-champ-select/images/config/linework-button.png"); background-size: contain; background-repeat: no-repeat; background-position: top; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 43px; } .lock-in .lock-in-video-wrapper { margin: 0 auto; height: 43px; width: 166px; -webkit-clip-path: polygon(13px 0px, 153px 0px, 166px 37px, 50% 100%, 0px 37px); position: relative; pointer-events: all; cursor: pointer; } .lock-in .lock-in-video-wrapper .lock-in-button-video { position: relative; top: 4px; } .lock-in .lock-in-video-wrapper .lock-in-button-video .magic { position: absolute; top: -229px; } .lock-in .lock-in-video-wrapper .lock-in-button-video lol-uikit-video { position: absolute; } .lock-in .lock-in-video-wrapper .lock-in-button-video lol-uikit-video.enabled-hover { top: -8px; } .lock-in .lock-in-video-wrapper .lock-in-button-video lol-uikit-video.enabled-click, .lock-in .lock-in-video-wrapper .lock-in-button-video lol-uikit-video.enabled-intro { top: -58px; left: 1px; } .lock-in .lock-in-video-wrapper .lock-in-button-video lol-uikit-video.disabled-intro { top: -54px; } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text { margin-top: 6px; position: relative; top: 11px; transition: opacity 600ms, -webkit-filter 100ms; opacity: 1; -webkit-filter: brightness(1); pointer-events: none; } .lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:active { color: #0596aa; } .lock-in .lock-in-video-wrapper.enabledClick .lock-in-text { opacity: 0; -webkit-filter: brightness(2); } .lock-in .lock-in-video-wrapper .disabled-button-bg { width: 166px; height: 43px; position: absolute; opacity: 0; transition: opacity 500ms; background: url("/fe/lol-champ-select/video/lock-in/lock-in-button-disabled-idle.png") 50% no-repeat; } .lock-in .lock-in-video-wrapper.disabled { pointer-events: none; cursor: none; } .lock-in .lock-in-video-wrapper.disabled .lock-in-text { color: #5c5b57; } .lock-in .lock-in-video-wrapper.disabled .disabled-button-bg, .lock-in .lock-in-video-wrapper.enabledIntro .disabled-button-bg { opacity: 1; } .lock-in .lock-in-video-wrapper .lock-in-overlay-video { pointer-events: none; position: absolute; top: -26px; } .lock-in .lock-in-video-wrapper video { transform: translateX(-50%); } .lock-in .bansnipe-tooltip { position: absolute; opacity: 1; top: -79px; left: 158px; } .lock-in .bansnipe-content { text-transform: none; } .loadouts-edit-component { width: 100%; height: 37px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .loadouts-edit-component:before, .loadouts-edit-component:after { border-top: thin solid #614a25; content: ''; display: block; margin: 0 10px; width: 50px; } .loadouts-edit-component .loadout-edit-controls { display: flex; flex-direction: column; position: relative; top: -10px; padding-top: 20px; } .loadouts-edit-component .loadout-edit-controls .loadout-edit-controls-row { display: flex; height: 37px; justify-content: center; align-items: center; } .loadouts-edit-component .loadout-edit-controls .loadout-edit-controls-row .framed-icon-button-component { margin-right: 10px; } .loadouts-edit-component .loadoutsSpacer { margin: 5px 7px 5px 2px; height: 27px; width: 1px; background-color: #785a28; } .loadouts-edit-component lol-parties-cosmetics-picker { width: 37px; height: 37px; --rcp-fe-lol-parties-cosmetics-picker-border-width: 1px; } .loadouts-edit-component .dropdowns { display: flex; flex-direction: column-reverse; } .loadouts-edit-component .dropdowns lol-uikit-framed-dropdown { height: 27px; width: 193px; } .perks-page-dropdown-container lol-uikit-framed-dropdown { --framed-dropdown-scrollable-max-height: 350px; } .champion-select .loadouts-edit-wrapper .dropdowns .perks-page-dropdown-container { position: relative; width: 193px; } .champion-select .loadouts-edit-wrapper .dropdowns .perks-page-dropdown-container lol-uikit-framed-dropdown { height: 37px; --framed-dropdown-opens-upward-height: 100%; } .current-perks-page-invalid { outline-color: #f00; outline-width: 1px; outline-style: solid; } lol-uikit-content-block.champ-select-runes-tutorial-tooltip { width: 250px; padding: 18px 9px; } lol-uikit-content-block.runes-not-yet-unlocked { width: 300px; text-align: center; } lol-uikit-content-block.runes-not-supported-by-mode { width: 300px; text-align: center; } .framed-highlight-overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; pointer-events: none; animation-name: framedHighlightFadeInAnimation; animation-duration: 0.4s; animation-iteration-count: 1; } .framed-highlight-overlay .framed-highlight-overlay-shadow { position: absolute; top: 0; left: 0; bottom: 0; right: 0; box-shadow: 0 0 25px #cab568, 0 0 4px rgba(202,181,104,0.5); animation-name: framedHighlightShadowAnimation; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } .framed-highlight-overlay .framed-highlight-overlay-border { position: absolute; top: -1px; left: 0; bottom: 0; right: 0; overflow: hidden; -webkit-clip-path: polygon(0% 0, 0% 100%, 1px 100%, 1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px), 1px 100%, 100% 100%, 100% 0%); } .framed-highlight-overlay .framed-highlight-overlay-border::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: -100%; animation-name: framedHighlightBorderAnimation; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; background-image: linear-gradient(110deg, #fff 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0) 32%, #fff 50%, rgba(255,255,255,0) 65%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 82%, #fff 100%); } .framed-highlight-overlay .framed-highlight-overlay-background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } .framed-highlight-overlay .framed-highlight-overlay-background::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: -100%; overflow: hidden; animation-name: framedHighlightBackgroundAnimation; animation-duration: 11s; animation-iteration-count: infinite; animation-timing-function: linear; background-image: linear-gradient(134deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 14%, rgba(255,255,255,0.08) 17%, rgba(255,255,255,0.12) 18%, rgba(255,255,255,0.14) 20%, rgba(255,255,255,0.12) 22%, rgba(255,255,255,0.08) 23%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 64%, rgba(255,255,255,0.08) 67%, rgba(255,255,255,0.12) 68%, rgba(255,255,255,0.13) 70%, rgba(255,255,255,0.12) 72%, rgba(255,255,255,0.08) 73%, rgba(255,255,255,0) 78%), linear-gradient(114deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0.14) 40%, rgba(255,255,255,0.12) 42%, rgba(255,255,255,0.08) 43%, rgba(255,255,255,0) 48%, rgba(255,255,255,0) 84%, rgba(255,255,255,0.08) 87%, rgba(255,255,255,0.12) 88%, rgba(255,255,255,0.14) 90%, rgba(255,255,255,0.12) 92%, rgba(255,255,255,0.08) 93%, rgba(255,255,255,0) 98%); opacity: 0.7; } @-moz-keyframes framedHighlightFadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes framedHighlightFadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes framedHighlightFadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes framedHighlightFadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes framedHighlightBackgroundAnimation { 0% { transform: translateX(0); opacity: 0.5; } 20% { opacity: 0.7; } 50% { opacity: 0.2; } 80% { opacity: 0.8; } 100% { transform: translateX(-50%); opacity: 0.5; } } @-webkit-keyframes framedHighlightBackgroundAnimation { 0% { transform: translateX(0); opacity: 0.5; } 20% { opacity: 0.7; } 50% { opacity: 0.2; } 80% { opacity: 0.8; } 100% { transform: translateX(-50%); opacity: 0.5; } } @-o-keyframes framedHighlightBackgroundAnimation { 0% { transform: translateX(0); opacity: 0.5; } 20% { opacity: 0.7; } 50% { opacity: 0.2; } 80% { opacity: 0.8; } 100% { transform: translateX(-50%); opacity: 0.5; } } @keyframes framedHighlightBackgroundAnimation { 0% { transform: translateX(0); opacity: 0.5; } 20% { opacity: 0.7; } 50% { opacity: 0.2; } 80% { opacity: 0.8; } 100% { transform: translateX(-50%); opacity: 0.5; } } @-moz-keyframes framedHighlightBorderAnimation { 0% { transform: translateX(0); opacity: 1; } 10% { opacity: 0.9; } 20% { opacity: 0.8; } 30% { opacity: 1; } 50% { opacity: 0.7; } 70% { opacity: 0.9; } 80% { opacity: 0.8; } 100% { transform: translateX(-50%); opacity: 1; } } @-webkit-keyframes framedHighlightBorderAnimation { 0% { transform: translateX(0); opacity: 1; } 10% { opacity: 0.9; } 20% { opacity: 0.8; } 30% { opacity: 1; } 50% { opacity: 0.7; } 70% { opacity: 0.9; } 80% { opacity: 0.8; } 100% { transform: translateX(-50%); opacity: 1; } } @-o-keyframes framedHighlightBorderAnimation { 0% { transform: translateX(0); opacity: 1; } 10% { opacity: 0.9; } 20% { opacity: 0.8; } 30% { opacity: 1; } 50% { opacity: 0.7; } 70% { opacity: 0.9; } 80% { opacity: 0.8; } 100% { transform: translateX(-50%); opacity: 1; } } @keyframes framedHighlightBorderAnimation { 0% { transform: translateX(0); opacity: 1; } 10% { opacity: 0.9; } 20% { opacity: 0.8; } 30% { opacity: 1; } 50% { opacity: 0.7; } 70% { opacity: 0.9; } 80% { opacity: 0.8; } 100% { transform: translateX(-50%); opacity: 1; } } @-moz-keyframes framedHighlightShadowAnimation { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @-webkit-keyframes framedHighlightShadowAnimation { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @-o-keyframes framedHighlightShadowAnimation { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes framedHighlightShadowAnimation { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .perks-page-dropdown-option-content, .perks-page-dropdown-details, .perks-page-dropdown-details-style-name { font-family: var(--font-display); } .perks-page-dropdown-option-content, .perks-page-dropdown-details-style-name { -webkit-user-select: none; } .perks-page-dropdown-option-content, .perks-page-dropdown-details-style-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .perks-page-dropdown-details-style-name { text-transform: uppercase; } .perks-page-dropdown-details-style-name:lang(ko-kr), .perks-page-dropdown-details-style-name:lang(ja-jp), .perks-page-dropdown-details-style-name:lang(tr-tr), .perks-page-dropdown-details-style-name:lang(el-gr), .perks-page-dropdown-details-style-name:lang(th-th), .perks-page-dropdown-details-style-name:lang(zh-tw) { text-transform: none; } .perks-page-dropdown-details-style-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .perks-page-dropdown-details-style-name:lang(ar-ae) { letter-spacing: 0; } .perks-page-dropdown-option-content { color: #c8aa6e; font-size: 14px; font-weight: 700; letter-spacing: 0.0325em; } .perks-page-dropdown-option-content:lang(ar-ae) { letter-spacing: 0; } .perks-page-dropdown-option-content:hover { color: #f0e6d2; } .perks-page-dropdown-option-content:disabled, .perks-page-dropdown-option-content:disabled:hover, .perks-page-dropdown-option-content[disabled='true'], .perks-page-dropdown-option-content[disabled='true']:hover { color: #5c5b57; cursor: default; } .perks-page-dropdown-option-content:active { color: #785a28; } .perks-page-dropdown-option-content { display: flex; align-items: center; } .perks-page-dropdown-option-content .perks-page-dropdown-option-icon { display: inline-flex; height: 20px; margin-left: -4px; margin-right: 4px; vertical-align: middle; width: 20px; -webkit-mask-position: 50% 40%; -webkit-mask-repeat: no-repeat; } .perks-page-dropdown-option-content .perks-page-dropdown-option-icon .perks-page-dropdown-option-dot { display: block; } .perks-page-dropdown-option-content .perks-page-dropdown-option-icon.recommended-page { background: #cdbe91; -webkit-mask-image: url("/fe/lol-champ-select/images/perks/rune-recommender-icon.png"); -webkit-mask-size: 100%; } .perks-page-dropdown-option-content .perks-page-dropdown-option-icon.invalid { background: #e62142; -webkit-mask-image: url("/fe/lol-champ-select/images/perks/exclamation.svg"); -webkit-mask-size: 75%; } .perks-page-dropdown-option-content .perks-page-dropdown-option-icon.invalid> .perks-page-dropdown-option-dot { display: none; } .perks-page-dropdown-option-content .perks-page-dropdown-option-icon.modified { align-items: center; justify-content: center; } .perks-page-dropdown-option-content .perks-page-dropdown-option-icon.removed { display: none; } .perks-page-dropdown-option-content .perks-page-name { display: inline-block; } .perks-page-dropdown { --framed-dropdown-current-content-padding: 0 0 0 2px; --framed-dropdown-current-content-padding-rtl: 0 2px 0 20px; } .perks-page-dropdown-details { direction: ltr; color: #cdbe91; font-size: 10px; letter-spacing: 0.5pt; line-height: 17px; padding: 18px 20px 14px 48px ; position: relative; text-transform: uppercase; width: 270px; } .perks-page-dropdown-details-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center center; background-size: cover; transform: none ; } .perks-page-dropdown-details-style-name { margin-bottom: 6px; position: relative; } .perks-page-dropdown-details-style-name.secondary { margin-top: 25px; } .perks-page-dropdown-details-style-name.style8000 { color: #c8aa6e; } .perks-page-dropdown-details-style-name.style8100 { color: #dc4747; } .perks-page-dropdown-details-style-name.style8200 { color: #6c75f5; } .perks-page-dropdown-details-style-name.style8300 { color: #48b4be; } .perks-page-dropdown-details-style-name.style8400 { color: #a4d08d; } .perks-page-dropdown-details-style-icon { display: block; height: 20px; left: -28px ; right: auto ; position: absolute; top: -1px; width: 20px; -webkit-mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; } .perks-page-dropdown-details-style-icon.style8000 { background: #c8aa6e; } .perks-page-dropdown-details-style-icon.style8100 { background: #dc4747; } .perks-page-dropdown-details-style-icon.style8200 { background: #6c75f5; } .perks-page-dropdown-details-style-icon.style8300 { background: #48b4be; } .perks-page-dropdown-details-style-icon.style8400 { background: #a4d08d; } .perks-page-dropdown-details-ul { list-style-type: none; margin: 0; padding: 0; } .perks-page-dropdown-details-li { margin: 0; padding: 0; position: relative; } .perks-page-dropdown-details-li:before { color: #7e7558; content: "\25C6"; display: block; font-size: 9px; left: -17px ; right: auto ; position: absolute; top: 7px; transform: translate(-50%, -50%); } .perks-page-dropdown-details-li.keystone:before { font-size: 12px; } .phase-transition-text, .phase-transition-text-glow { font-family: var(--font-display); } .phase-transition-text, .phase-transition-text-glow { -webkit-user-select: none; } .phase-transition-text, .phase-transition-text-glow { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .phase-transition-text, .phase-transition-text-glow { text-transform: uppercase; } .phase-transition-text:lang(ko-kr), .phase-transition-text-glow:lang(ko-kr), .phase-transition-text:lang(ja-jp), .phase-transition-text-glow:lang(ja-jp), .phase-transition-text:lang(tr-tr), .phase-transition-text-glow:lang(tr-tr), .phase-transition-text:lang(el-gr), .phase-transition-text-glow:lang(el-gr), .phase-transition-text:lang(th-th), .phase-transition-text-glow:lang(th-th), .phase-transition-text:lang(zh-tw), .phase-transition-text-glow:lang(zh-tw) { text-transform: none; } .phase-transition-text, .phase-transition-text-glow { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .phase-transition-text:lang(ar-ae), .phase-transition-text-glow:lang(ar-ae) { letter-spacing: 0; } .phase-transition { position: absolute; width: 100%; top: calc(50% - 40px); text-align: center; padding-left: 15px; padding-right: 15px; } .phase-transition-text, .phase-transition-text-glow { letter-spacing: 0.2em; word-wrap: break-word; } .phase-transition-text-glow { width: 100%; position: absolute; top: 0; left: 0; text-shadow: 0 0 8px #fff, 0 0 10px #fff; opacity: 0; } .phase-transition.visible .phase-transition-text-glow { animation-name: fadeOut1to0; animation-duration: 0.7s; animation-delay: 0.2s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77); } .phase-transition.visible .phase-transition-label { animation-name: scaleDownTextIntro, fadeIn0to1; animation-duration: 0.2s; animation-delay: 0s; animation-timing-function: cubic-bezier(1, 0, 1, 1), linear; } @-moz-keyframes scaleDownTextIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @-webkit-keyframes scaleDownTextIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @-o-keyframes scaleDownTextIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes scaleDownTextIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @-moz-keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } .pick-ban-ring { position: absolute; top: calc(50% - 33px); left: 50%; width: 0; height: 0; pointer-events: none; transform: translateZ(0); } .pick-ban-ring:after { content: url("/fe/lol-champ-select/images/champion-ring/ring-splash-dashed.png") url("/fe/lol-champ-select/images/champion-ring/ring-splash-outer-left.png") url("/fe/lol-champ-select/images/champion-ring/ring-splash-inner-left.png"); display: none; height: 0; width: 0; } .pick-ban-ring .counter-rotation-container { position: absolute; width: 100%; height: 100%; transform-origin: center; } .pick-ban-ring .ring-inner-mask, .pick-ban-ring .ring-inner-container, .pick-ban-ring .ring-gear-component-container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .pick-ban-ring .ring-inner-mask { width: 541px; height: 541px; transform-origin: center; } .pick-ban-ring .ring-inner-mask { width: 800px; } .pick-ban-ring .ring-inner-mask { -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 62px, #000 82px, #000 464px, transparent 484px, transparent 100%); -webkit-mask-repeat: no-repeat; } .pick-ban-ring .ring-inner-container { top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .pick-ban-ring .slash-video { display: block; transform: translateX(12px) translateY(-6px); } .pick-ban-ring .slash-video.red { transform: translateX(-12px) translateY(-6px) scaleX(-1); } .pick-ban-ring.is-init.expanded-ring .ban-slash-container, .pick-ban-ring.is-init.expanded-ring .ban-slash-video { display: none; } .pick-ban-ring.is-pending .ban-slash-container, .pick-ban-ring.is-pending .ban-slash-video { transition-property: none; } .pick-ban-ring.is-animating .ring-rotation, .pick-ban-ring.is-animating .ban-slash-wrapper { transition: transform 250ms linear; } .pick-phase .champion-name-wrapper .skin-name-text { text-transform: uppercase; } .pick-phase .champion-name-wrapper .skin-name-text:lang(ko-kr), .pick-phase .champion-name-wrapper .skin-name-text:lang(ja-jp), .pick-phase .champion-name-wrapper .skin-name-text:lang(tr-tr), .pick-phase .champion-name-wrapper .skin-name-text:lang(el-gr), .pick-phase .champion-name-wrapper .skin-name-text:lang(th-th), .pick-phase .champion-name-wrapper .skin-name-text:lang(zh-tw) { text-transform: none; } .pick-phase { opacity: 1; transition: opacity 200ms; display: flex; flex-direction: column; } .pick-phase.pick-phase-hidden { opacity: 0; } .pick-phase .champion-name-wrapper { position: absolute; width: 100%; top: 515px; width: 100%; transition: -webkit-filter 0.9s linear, transform 0.7s ease-out; height: 80px; } .pick-phase .champion-name-wrapper.just-locked { animation-name: fadeOut0to1; animation-duration: 0.2s; animation-delay: 1.5s; animation-timing-function: linear; } .pick-phase .champion-grid-toggle { width: 50px; height: 20px; position: absolute; left: calc(50% - (50px / 2)); bottom: 88px; } .pick-phase .champion-grid-toggle:before { content: ''; display: block; width: 171px; height: 7px; position: relative; left: -175px; bottom: -20px; background: url("/fe/lol-champ-select/images/config/toggle-button-bracket.png") center top no-repeat; transform: scaleX(-1); } .pick-phase .champion-grid-toggle:after { content: ''; display: block; width: 171px; height: 7px; position: relative; right: -54px; bottom: 7px; background: url("/fe/lol-champ-select/images/config/toggle-button-bracket.png") center top no-repeat; } .pick-phase .toggle-button-content { width: 10px; height: 7px; background: url("/fe/lol-champ-select/images/config/toggle-button-icon.png") center top no-repeat; } .pick-phase.champion-grid-visible .toggle-button-content { transform: rotate(180deg); } .pick-phase .champion-grid-footer { border-bottom: thin solid rgba(120,90,40,0.6); position: absolute; width: 640px; top: 585px; } @-moz-keyframes fadeOut0to1 { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOut0to1 { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut0to1 { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut0to1 { 0% { opacity: 1; } 100% { opacity: 0; } } .champion-select .quit-spectate-button { width: 165px; margin: 20px auto; } .champion-select .quit-button { width: 125px; margin-right: 10px; } .reroll-button { margin-top: 12px; position: relative; } .reroll-button .action-button h4 { padding-left: 34px; margin-top: 0; margin-bottom: 0; } .reroll-button .action-button .action-button-inner::before { content: ''; background-image: url("/fe/lol-champ-select/images/config/dice.png"); background-size: contain; background-repeat: no-repeat; background-position-y: center; position: absolute; top: 0; left: calc(50% - 30px); width: 30px; height: 100%; } .reroll-button .action-button .action-button-inner:after { content: url("/fe/lol-champ-select/images/config/dice-hover.png") url("/fe/lol-champ-select/images/config/dice-click.png"); display: none; height: 0; width: 0; } .reroll-button .action-button .action-button-inner:not([disabled='true']):hover::before { background-image: url("/fe/lol-champ-select/images/config/dice-hover.png"); } .reroll-button .action-button .action-button-inner:not([disabled='true']):active::before { background-image: url("/fe/lol-champ-select/images/config/dice-click.png"); } .reroll-button .action-button .action-button-inner[disabled='true'] .reroll-button .action-button .action-button-inner::before { background-image: url("/fe/lol-champ-select/images/config/dice-disable.png"); } .reroll-button.golden-spatula-club .action-button .action-button-inner::before { background-image: url("/fe/lol-champ-select/images/entitled-features/golden_spatula_club/dice.png"); } .reroll-button.golden-spatula-club .action-button .action-button-inner:not([disabled='true']):hover::before { background-image: url("/fe/lol-champ-select/images/entitled-features/golden_spatula_club/dice-hover.png"); } .reroll-button.golden-spatula-club .action-button .action-button-inner:not([disabled='true']):active::before { background-image: url("/fe/lol-champ-select/images/entitled-features/golden_spatula_club/dice-click.png"); } .reroll-button.golden-spatula-club .action-button .action-button-inner[disabled='true'] .reroll-button.golden-spatula-club .action-button .action-button-inner::before { background-image: url("/fe/lol-champ-select/images/entitled-features/golden_spatula_club/dice-disable.png"); } .ring-gear-component { position: relative; width: 0; height: 0; transform: translateY(-16px); --rotatePrimaryDeg: 0deg; } .ring-gear-component #ban-ring-component { position: absolute; transform: translateX(-50%) translateY(-50%); } .ring-gear-component .expanded-ring-container { display: flex; justify-content: center; flex-direction: row; opacity: 0; } .ring-gear-component .main-ring-container, .ring-gear-component .expanded-ring-container { position: absolute; transform: translateX(-50%) translateY(-50%); } .ring-gear-component #center-ring, .ring-gear-component #intro-ring { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transform-origin: 50%; } .ring-gear-component #center-ring { animation: fadeIn 100ms linear forwards; opacity: 0; } .ring-gear-component #intro-ring { animation: fadeOut 100ms 50ms linear forwards; } .ring-gear-component #intro-dashed-container, .ring-gear-component #intro-gear-container { transform: translateX(-50%) translateY(-50%); transform-origin: 50%; } .ring-gear-component #left-ring, .ring-gear-component #right-ring { transform: translateX(0px); } .ring-gear-component #left-ring .clip-box, .ring-gear-component #right-ring .clip-box { position: absolute; width: 300px; height: 550px; overflow: hidden; } .ring-gear-component #left-ring .clip-box { transform: translateX(-100%) translateY(-50%); } .ring-gear-component #left-ring .clip-box .ring-offset { left: 100%; } .ring-gear-component #right-ring .clip-box { transform: translateX(0) translateY(-50%); } .ring-gear-component #right-ring .clip-box .ring-offset { left: 0; } .ring-gear-component #dashed-ring-intro, .ring-gear-component #ban-gear-ring-intro, .ring-gear-component #center-ring-container { transform-origin: 50%; } .ring-gear-component #center-ring-container { transform: scale(1); } .ring-gear-component .slash-line-rotation { transform-origin: 50%; } .ring-gear-component .slash-ring-rotation { transform-origin: 50%; transform: rotate(0deg); } .ring-gear-component .main-gear-container { position: absolute; top: 0; left: 0; } .ring-gear-component .ring-position { position: absolute; } .ring-gear-component .ring-position.ring-offset { top: 50%; transform: translateX(-50%) translateY(-50%); } .ring-gear-component .gear-ring-rotation { transform-origin: 50%; } .ring-gear-component .dashed-ring-rotation { transform-origin: 50%; } .ring-gear-component .ban-line.top { transform: translateY(-277px); } .ring-gear-component .ban-line.bottom { transform: translateY(277px); } .ring-gear-component .dashed-ring-circle { opacity: 0.5; } .ring-gear-component .ban-gear-ring-symbol { opacity: 0.75; } .ring-gear-component.large-area-animations-enabled #left-ring, .ring-gear-component.large-area-animations-enabled #right-ring { transition: transform 300ms cubic-bezier(0, 0.6, 0.1, 1); } .ring-gear-component.large-area-animations-enabled .main-ring-container, .ring-gear-component.large-area-animations-enabled .expanded-ring-container { transition: opacity 150ms linear; } .ring-gear-component.large-area-animations-enabled .gear-ring-rotation { animation: rotateFullCircle 190s linear infinite; } .ring-gear-component.large-area-animations-enabled .dashed-ring-rotation { animation: rotateFullCircle 160s linear infinite; } .ring-gear-component.large-area-animations-enabled .dashed-ring-circle { transition: r 300ms cubic-bezier(0, 0.6, 0.1, 1); r: 234.5; } .ring-gear-component.large-area-animations-enabled .slash-ring-rotation { transform: rotate(var(--rotatePrimaryDeg)); } .ring-gear-component.large-area-animations-enabled .slash-ring-rotation { transition: transform 250ms linear; } .ring-gear-component.large-area-animations-enabled.is-not-rotating .slash-line-rotation { animation: none; transform: rotate(0deg); } .ring-gear-component.large-area-animations-enabled.is-player-team.is-rotating .slash-line-rotation { animation: rotatePlayer 250ms linear; animation-fill-mode: forwards; } .ring-gear-component.large-area-animations-enabled.is-enemy-team.is-rotating .slash-line-rotation { animation: rotateEnemy 250ms linear; animation-fill-mode: forwards; } .ring-gear-component.large-area-animations-enabled.is-animating.is-ban-completed #intro-ring { animation: fadeIn 100ms linear, glowIntro 400ms 200ms cubic-bezier(0, 1, 0, 1); animation-fill-mode: forwards; } .ring-gear-component.large-area-animations-enabled.is-animating.is-ban-completed #center-ring-container { animation: fadeOut 300ms linear, scaleDown 400ms linear; animation-fill-mode: forwards; } .ring-gear-component.large-area-animations-enabled.is-animating.is-ban-completed #dashed-ring-intro { animation: dashedRingIntro 450ms 200ms linear; animation-fill-mode: forwards; } .ring-gear-component.large-area-animations-enabled.is-animating.is-ban-completed #ban-gear-ring-intro { animation: scaleIntro 300ms 100ms linear; animation-fill-mode: forwards; } .ring-gear-component.default-ring .expanded-ring-container { opacity: 0; } .ring-gear-component.default-ring .expanded-ring-container .dashed-ring-circle { r: 234.5; } .ring-gear-component.default-ring #left-ring, .ring-gear-component.default-ring #right-ring { transform: translateX(0); } .ring-gear-component.expanded-ring #left-ring { transform: translateX(-60px); } .ring-gear-component.expanded-ring #right-ring { transform: translateX(60px); } .ring-gear-component.expanded-ring .main-ring-container { opacity: 0; } .ring-gear-component.expanded-ring .expanded-ring-container { opacity: 1; } .ring-gear-component.expanded-ring .expanded-ring-container .dashed-ring-circle { r: 292.5; } .ring-gear-component.is-animating .main-ring-container { animation: grayscaleFilter 200ms 240ms cubic-bezier(0, 0.6, 0.1, 1) forwards; } .ring-gear-component.is-animating .main-ring-container .gear-ring-rotation { animation-play-state: paused; } .ring-gear-component.is-animating .ban-line { transition: transform 300ms cubic-bezier(0, 0.6, 0.1, 1), opacity 250ms linear; transform: translateY(0); } @-moz-keyframes rotateFullCircle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes rotateFullCircle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes rotateFullCircle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotateFullCircle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes grayscaleFilter { from { filter: grayscale(0); -webkit-filter: grayscale(0); } to { filter: grayscale(100%); -webkit-filter: grayscale(100%); } } @-webkit-keyframes grayscaleFilter { from { filter: grayscale(0); -webkit-filter: grayscale(0); } to { filter: grayscale(100%); -webkit-filter: grayscale(100%); } } @-o-keyframes grayscaleFilter { from { filter: grayscale(0); -webkit-filter: grayscale(0); } to { filter: grayscale(100%); -webkit-filter: grayscale(100%); } } @keyframes grayscaleFilter { from { filter: grayscale(0); -webkit-filter: grayscale(0); } to { filter: grayscale(100%); -webkit-filter: grayscale(100%); } } @-moz-keyframes rotatePlayer { from { transform: rotate(0deg); } to { transform: rotate(45deg); } } @-webkit-keyframes rotatePlayer { from { transform: rotate(0deg); } to { transform: rotate(45deg); } } @-o-keyframes rotatePlayer { from { transform: rotate(0deg); } to { transform: rotate(45deg); } } @keyframes rotatePlayer { from { transform: rotate(0deg); } to { transform: rotate(45deg); } } @-moz-keyframes rotateEnemy { from { transform: rotate(0deg); } to { transform: rotate(-45deg); } } @-webkit-keyframes rotateEnemy { from { transform: rotate(0deg); } to { transform: rotate(-45deg); } } @-o-keyframes rotateEnemy { from { transform: rotate(0deg); } to { transform: rotate(-45deg); } } @keyframes rotateEnemy { from { transform: rotate(0deg); } to { transform: rotate(-45deg); } } @-moz-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @-o-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @-moz-keyframes scaleDown { from { transform: scale(1); } to { transform: scale(0.8); } } @-webkit-keyframes scaleDown { from { transform: scale(1); } to { transform: scale(0.8); } } @-o-keyframes scaleDown { from { transform: scale(1); } to { transform: scale(0.8); } } @keyframes scaleDown { from { transform: scale(1); } to { transform: scale(0.8); } } @-moz-keyframes scaleIntro { from { transform: scale(1.15); } to { transform: scale(1); } } @-webkit-keyframes scaleIntro { from { transform: scale(1.15); } to { transform: scale(1); } } @-o-keyframes scaleIntro { from { transform: scale(1.15); } to { transform: scale(1); } } @keyframes scaleIntro { from { transform: scale(1.15); } to { transform: scale(1); } } @-moz-keyframes glowIntro { 0% { opacity: 0.7; filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); -webkit-filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); } 30% { opacity: 1; filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); } 90% { opacity: 1; filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); } 100% { opacity: 0.75; filter: brightness(1) grayscale(0); -webkit-filter: brightness(1) grayscale(0); } } @-webkit-keyframes glowIntro { 0% { opacity: 0.7; filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); -webkit-filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); } 30% { opacity: 1; filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); } 90% { opacity: 1; filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); } 100% { opacity: 0.75; filter: brightness(1) grayscale(0); -webkit-filter: brightness(1) grayscale(0); } } @-o-keyframes glowIntro { 0% { opacity: 0.7; filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); -webkit-filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); } 30% { opacity: 1; filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); } 90% { opacity: 1; filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); } 100% { opacity: 0.75; filter: brightness(1) grayscale(0); -webkit-filter: brightness(1) grayscale(0); } } @keyframes glowIntro { 0% { opacity: 0.7; filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); -webkit-filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); } 30% { opacity: 1; filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); } 90% { opacity: 1; filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8)); } 100% { opacity: 0.75; filter: brightness(1) grayscale(0); -webkit-filter: brightness(1) grayscale(0); } } @-moz-keyframes dashedRingIntro { 0% { opacity: 0.5; transform: scale(1.5); } 35% { opacity: 0.8; transform: scale(0.85); } 65% { opacity: 0.8; transform: scale(0.85); } 100% { opacity: 0.5; transform: scale(1); } } @-webkit-keyframes dashedRingIntro { 0% { opacity: 0.5; transform: scale(1.5); } 35% { opacity: 0.8; transform: scale(0.85); } 65% { opacity: 0.8; transform: scale(0.85); } 100% { opacity: 0.5; transform: scale(1); } } @-o-keyframes dashedRingIntro { 0% { opacity: 0.5; transform: scale(1.5); } 35% { opacity: 0.8; transform: scale(0.85); } 65% { opacity: 0.8; transform: scale(0.85); } 100% { opacity: 0.5; transform: scale(1); } } @keyframes dashedRingIntro { 0% { opacity: 0.5; transform: scale(1.5); } 35% { opacity: 0.8; transform: scale(0.85); } 65% { opacity: 0.8; transform: scale(0.85); } 100% { opacity: 0.5; transform: scale(1); } } .chroma-skin-button { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 2px #010a13; display: flex; align-items: center; justify-content: center; } .chroma-skin-button.locked, .chroma-skin-button.locked:hover, .chroma-skin-button.locked:active { background: url("/fe/lol-champ-select/images/config/skin-carousel-locked.png") no-repeat; background-size: contain; cursor: pointer; pointer-events: all; } .chroma-skin-button.locked:hover:not([purchase-disabled]), .chroma-skin-button.locked:hover:hover:not([purchase-disabled]), .chroma-skin-button.locked:active:hover:not([purchase-disabled]) { background-image: url("/fe/lol-champ-select/images/config/skin-carousel-locked-hover.png"); } .chroma-skin-button.locked.purchase-disabled, .chroma-skin-button.locked:hover.purchase-disabled, .chroma-skin-button.locked:active.purchase-disabled { background-image: url("/fe/lol-champ-select/images/config/skin-carousel-locked-inactive.png"); pointer-events: none; } .chroma-skin-button .contents { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f0e6d2 0%, #f0e6d2 48%, #be1e37 48%, #be1e37 52%, #f0e6d2 52%, #f0e6d2 100%); border: 2px solid #010a13; } .chroma-skin-button:hover, .chroma-skin-button.selected { background: linear-gradient(to bottom, #c89b3c 0%, #916c30 33%, #c89b3c 75%, #cdbe91 100%); color: #c89b3c; } .chroma-skin-button.disabled, .chroma-skin-button:active { background: none; background-color: #463714; } .chroma-skin-button.disabled .contents, .chroma-skin-button:active .contents { background: none; background-color: #100e0d; color: #463714; } .chroma-skin-button.disabled:hover .contents, .chroma-skin-button:active:hover .contents { background: none; background-color: #100e0d; box-shadow: none; color: #463714; } .skin-selection-purchase-available-notification[type=notification] { font-family: var(--font-body); } .skin-selection-purchase-available-notification[type=notification] { font-family: var(--font-body); } .skin-selection-purchase-available-notification[type=notification] { -webkit-user-select: none; } .skin-selection-purchase-available-notification[type=notification] { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .skin-selection-purchase-available-notification[type=notification] { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .skin-selection-purchase-available-notification[type=notification]:lang(ja-jp) { font-size: 13px; } .skin-selection-purchase-available-notification[type=notification]:lang(ar-ae) { letter-spacing: 0; } .skin-selection-button-container { display: flex; flex-direction: row; justify-content: space-between; width: 520px; margin-top: 10px; margin-left: auto; margin-right: auto; margin-bottom: 6px; } .skin-selection-button-container .skin-selection-button { flex: 0 0 auto; width: 24px; height: 32px; margin-top: 12px; } .skin-selection-button-container .skin-selection-button.left { margin-right: 2px; } .skin-selection-button-container .skin-selection-button.right { margin-left: 2px; } .skin-selection-carousel-container { width: 100%; height: 66px; margin-top: -1px; } .skin-selection-carousel-container .skin-selection-carousel { padding-left: 0; list-style-type: none; align-items: center; margin: 0; justify-content: center; position: relative; margin: 0 auto; height: 74px; overflow-y: visible; transform: translateZ(0); } .skin-selection-carousel-container .skin-selection-carousel.disabled .skin-selection-item.disabled:hover, .skin-selection-carousel-container .skin-selection-carousel.disabled .skin-selection-item.disabled:active { -webkit-filter: grayscale(50%); background: none; background-color: #3c3c41; transition: none; } .skin-selection-carousel-container .skin-selection-carousel.disabled .skin-selection-item.disabled:hover .skin-selection-thumbnail, .skin-selection-carousel-container .skin-selection-carousel.disabled .skin-selection-item.disabled:active .skin-selection-thumbnail { -webkit-filter: brightness(100%); } .skin-selection-carousel-container .skin-selection-carousel.disabled .skin-selection-item.disabled:hover .skin-selection-thumbnail:after, .skin-selection-carousel-container .skin-selection-carousel.disabled .skin-selection-item.disabled:active .skin-selection-thumbnail:after { opacity: 0.75; background-color: #010a13; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item { -webkit-backface-visibility: hidden; position: absolute; display: flex; width: 73px; height: 50px; background-color: #3c3c41; outline: 1px solid rgba(1,10,19,0.6); align-items: center; transition: all 200ms; margin-top: 5px; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-thumbnail { cursor: pointer; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-thumbnail-gem-overlay { display: flex; justify-content: center; align-items: flex-end; pointer-events: none; position: absolute; bottom: 1px; left: 0; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-thumbnail-gem-overlay img { width: 100%; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item:hover { background: linear-gradient(to top, #c89b3c, #f0e6d2); cursor: pointer; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item:hover .skin-selection-thumbnail { -webkit-filter: brightness(125%); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item:active { background: linear-gradient(to top, #695625, #463714); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item:active .skin-selection-thumbnail:after { background-color: #010a13; opacity: 0.75; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled { background: #3c3c41; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled:hover .skin-selection-thumbnail { -webkit-filter: brightness(100%); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled:hover .skin-selection-thumbnail:after { opacity: 0.25; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled:active { background: linear-gradient(to top, #695625, #463714); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled:active .skin-selection-thumbnail:after { background-color: #010a13; opacity: 0.5; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled.skin-selection-item-selected { border: none; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled .skin-selection-thumbnail { -webkit-filter: grayscale(50%); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled .skin-selection-thumbnail:after { background-color: #010a13; opacity: 0.75; content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled:after { content: ''; background: url("/fe/lol-champ-select/images/config/icon-lock-small-noframe.png"); background-size: contain; width: 30px; height: 30px; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); pointer-events: none; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2 { width: 25%; height: 66px; margin-top: 0; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2 .skin-selection-thumbnail { width: 125%; cursor: default; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.skin-selection-item-selected:hover, .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.skin-selection-item-selected:active { cursor: default; background: linear-gradient(to top, #c8aa6e 0%, #c89b3c 44%, #a07b32 59%, #785a28 100%); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.skin-selection-item-selected:hover .skin-selection-thumbnail, .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.skin-selection-item-selected:active .skin-selection-thumbnail { -webkit-filter: brightness(100%); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.skin-selection-item-selected:hover .skin-selection-thumbnail:after, .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.skin-selection-item-selected:active .skin-selection-thumbnail:after { background-color: transparent; opacity: 0.75; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.disabled:hover, .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.disabled:active { cursor: default; background: #3c3c41; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.disabled:hover .skin-selection-thumbnail, .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.disabled:active .skin-selection-thumbnail { -webkit-filter: grayscale(50%); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.disabled:hover .skin-selection-thumbnail:after, .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.disabled:active .skin-selection-thumbnail:after { background-color: #010a13; opacity: 0.75; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.disabled::after { display: none; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-selection-item-hidden { display: none; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-selection-item-placeholder { display: none; background: transparent; border: 0; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-selection-item-placeholder .skin-selection-thumbnail, .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-selection-item-placeholder .skin-selection-item-information { display: none; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-selection-item-selected { background: linear-gradient(to top, #c8aa6e 0%, #c89b3c 44%, #a07b32 59%, #785a28 100%); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-selection-item-selected:hover { background: linear-gradient(to top, #f0e6d2 0%, #c89b3c 100%); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-selection-item-selected .skin-selection-thumbnail { margin: 2px; height: calc(100% - 4px); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-thumbnail { background-size: calc(100% - 2px); background-position: 50% 45%; background-repeat: no-repeat; margin: 1px; flex: 1; box-sizing: border-box; transition: all 200ms; position: relative; height: calc(100% - 2px); outline: 1px solid transparent; -webkit-filter: brightness(100%); display: flex; justify-content: center; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-thumbnail:before { border: thin solid #1e2328; content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transition: all 200ms; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%) translateY(50%); width: 25px; height: 25px; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button .content { background: url("/fe/lol-champ-select/images/config/button-chroma.png") no-repeat; background-size: contain; width: 16px; height: 16px; margin: 1px; border-radius: 50%; border: 2px solid #010a13; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button:focus { outline: 0; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button:after { content: url("/fe/lol-champ-select/images/config/button-chroma-hover.png") url("/fe/lol-champ-select/images/config/button-chroma-click.png") url("/fe/lol-champ-select/images/config/button-chroma-disable.png") url("/fe/lol-champ-select/images/config/button-chroma-toggle.png"); display: none; height: 0; width: 0; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button:hover .content { background-image: url("/fe/lol-champ-select/images/config/button-chroma-hover.png"); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button:active .content { background-image: url("/fe/lol-champ-select/images/config/button-chroma-click.png"); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button[disabled] .content { background-image: url("/fe/lol-champ-select/images/config/button-chroma-disable.png"); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button.open .content { background-image: url("/fe/lol-champ-select/images/config/button-chroma-toggle.png"); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button-2 { width: 40px; height: 24px; background-image: url("/fe/lol-champ-select/images/config/chroma-button-2-up.png"); background-size: contain; position: relative; top: 80%; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button-2:hover { background-image: url("/fe/lol-champ-select/images/config/chroma-button-2-over.png"); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-thumbnail-entitled-feature-overlay { position: absolute; top: -1px; left: 50%; transform: translateX(-50%) translateY(-50%) scale(0.5); width: 96px; height: 48px; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-thumbnail-entitled-feature-overlay:focus { outline: 0; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-thumbnail-entitled-feature-overlay.golden-spatula-club .content { background: url("/fe/lol-champ-select/images/entitled-features/golden_spatula_club/skin-badge.png") no-repeat; background-size: contain; width: 96px; height: 48px; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-item-information { width: 32px; height: 32px; position: absolute; top: -14px; right: -14px; content: ' '; background-repeat: no-repeat; pointer-events: none; background-size: contain; } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .rental-icon { background-image: url("/fe/lol-champ-select/images/config/champ-rental-flag.png"); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .loyalty-reward-icon { background-image: url("/fe/lol-champ-select/images/config/champ-free-to-play-reward-flag.png"); } .skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .loyalty-reward-icon.loyalty-reward-icon--rewards { background-image: url("/fe/lol-champ-select/images/config/champ-free-to-play-reward-flag-new.png"); } .skin-selection-carousel-container .skin-selection-carousel.will-transition .skin-selection-item { transition: none; } .skin-selection-carousel-container .skin-selection-carousel.will-transition .skin-selection-item .skin-selection-thumbnail { transition: none; } .skin-selection-indicator { display: flex; width: 376px; height: 18px; flex-direction: row; align-items: center; margin: auto; margin-top: -2px; } .skin-selection-indicator.disabled .skin-selection-indicator-selector:hover { cursor: default; } .skin-selection-indicator .skin-selection-indicator-list { display: flex; margin: 0 10px; padding: 0; } .skin-selection-indicator .skin-selection-indicator-selector { display: inline-block; width: 6px; height: 6px; margin-top: 1px; padding: 4px; background: url("/fe/lol-champ-select/images/config/skin-carousel-pip.png") center no-repeat; } .skin-selection-indicator .skin-selection-indicator-selector.skin-selection-indicator-selector-viewed { background-image: url("/fe/lol-champ-select/images/config/skin-carousel-pip-selected.png"); } .skin-selection-indicator .skin-selection-indicator-selector:hover { cursor: pointer; } .skin-selection-indicator .line { width: 50%; flex: 1 0; height: 2px; } .skin-selection-indicator .line.line-left { background: linear-gradient(to left, rgba(0,0,0,0) 0, #785a28 20%); } .skin-selection-indicator .line.line-right { background: linear-gradient(to right, rgba(0,0,0,0) 0, #785a28 20%); } .skin-indicator { width: 17px; height: 17px; flex: 0 1 auto; } .skin-indicator:not(.selected):hover { cursor: pointer; } .skin-indicator .icon { width: 5px; height: 5px; margin: 5px; border: thin solid #c8aa6e; border-radius: 50%; } .skin-indicator.selected .icon { background: #c8aa6e; } .skin-selection-purchase-available-notification[type=notification] { width: 230px; } .champion-skin-name .skin-name-text { font-family: var(--font-display); } .champion-skin-name .skin-name-text { -webkit-user-select: none; } .champion-skin-name .skin-name-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .champion-skin-name .skin-name-text { text-transform: uppercase; } .champion-skin-name .skin-name-text:lang(ko-kr), .champion-skin-name .skin-name-text:lang(ja-jp), .champion-skin-name .skin-name-text:lang(tr-tr), .champion-skin-name .skin-name-text:lang(el-gr), .champion-skin-name .skin-name-text:lang(th-th), .champion-skin-name .skin-name-text:lang(zh-tw) { text-transform: none; } .champion-skin-name .skin-name-text { text-transform: none; } .champion-skin-name .skin-name-text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .champion-skin-name .skin-name-text:lang(ar-ae) { letter-spacing: 0; } .champion-skin-name .skin-name-text { letter-spacing: 0.025em; } .champion-skin-name .skin-name-text:lang(ar-ae) { letter-spacing: 0; } .champion-skin-name .skin-name-text { font-style: italic; font-weight: 500; } .champion-skin-name { direction: ltr; display: flex; height: 34px; flex-direction: row; align-items: flex-end; justify-content: center; } .champion-skin-name .skin-name-text { position: relative; bottom: 6px; padding: 0 0.7em; white-space: nowrap; display: inline-block; } .skin-name-chest-available { width: 16px; height: 16px; margin-bottom: 8px; background: url("/fe/lol-static-assets/svg/hextech-chest-gold.svg") no-repeat center center; background-size: cover; animation: fadeIn 0.3s linear forwards; } .champion-select .skin-purchase { position: absolute; width: 100%; top: 64px; left: 0; animation-name: skinPurchaseButtonFadeInAnimation; animation-duration: 0.1s; animation-delay: 0.2s; animation-fill-mode: backwards; pointer-events: none; /** * BUGFIX: Chrome doesn't allow us to change a child div's background on * parent active state. We could use a ::before pseudo-element, but it has a * bug which introduces jitter when dealing with pointer-events: none. We * therefore introduce a ::before pseudo-element ONLY on :active and hide * the child element. */ } .champion-select .skin-purchase .unlock-skin-hit-area { display: block; margin: 0 auto; width: 56px; height: 56px; cursor: pointer; pointer-events: all; } .champion-select .skin-purchase .unlock-skin-hit-area .locked-state, .champion-select .skin-purchase .unlock-skin-hit-area::before { position: absolute; pointer-events: none; width: 56px; height: 56px; background-size: contain; background-repeat: no-repeat; } .champion-select .skin-purchase .unlock-skin-hit-area.hidden, .champion-select .skin-purchase .unlock-skin-hit-area.skin-select-not-visible { pointer-events: none; } .champion-select .skin-purchase .unlock-skin-hit-area .locked-state { background-image: url("/fe/lol-champ-select/images/config/icon-lock-large.png"); } .champion-select .skin-purchase .unlock-skin-hit-area.disabled .locked-state { background-image: url("/fe/lol-champ-select/images/config/icon-lock-large-inactive.png"); } .champion-select .skin-purchase .unlock-skin-hit-area.enabled:hover .locked-state { background-image: url("/fe/lol-champ-select/images/config/icon-lock-large-hover.png"); } .champion-select .skin-purchase .unlock-skin-hit-area.enabled:active .locked-state { background: none; } .champion-select .skin-purchase .unlock-skin-hit-area.enabled:active::before { content: ""; background-image: url("/fe/lol-champ-select/images/config/icon-lock-large-click.png"); } .champion-select .skin-carousel.will-transition .skin-purchase { opacity: 0; animation: none; } @-moz-keyframes skinPurchaseButtonFadeInAnimation { 0% { opacity: 0; pointer-events: none; } 100% { opacity: 1; pointer-events: all; } } @-webkit-keyframes skinPurchaseButtonFadeInAnimation { 0% { opacity: 0; pointer-events: none; } 100% { opacity: 1; pointer-events: all; } } @-o-keyframes skinPurchaseButtonFadeInAnimation { 0% { opacity: 0; pointer-events: none; } 100% { opacity: 1; pointer-events: all; } } @keyframes skinPurchaseButtonFadeInAnimation { 0% { opacity: 0; pointer-events: none; } 100% { opacity: 1; pointer-events: all; } } .champion-select .skin-select { position: absolute; top: 455px; width: 100%; transform: translateZ(0); } .champion-select .skin-select.has-reroll { top: 445px; } .champion-select .skin-select:after { content: url("/fe/lol-champ-select/images/config/skin-carousel-pip.png") url("/fe/lol-champ-select/images/config/skin-carousel-pip-selected.png") url("/fe/lol-champ-select/images/config/icon-lock-small-noframe.png"); display: none; height: 0; width: 0; } .champion-select .summoner-array .first-pick { font-family: var(--font-display); } .champion-select .summoner-array .first-pick { -webkit-user-select: none; } .champion-select .summoner-array .first-pick { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .champion-select .summoner-array .first-pick { text-transform: uppercase; } .champion-select .summoner-array .first-pick:lang(ko-kr), .champion-select .summoner-array .first-pick:lang(ja-jp), .champion-select .summoner-array .first-pick:lang(tr-tr), .champion-select .summoner-array .first-pick:lang(el-gr), .champion-select .summoner-array .first-pick:lang(th-th), .champion-select .summoner-array .first-pick:lang(zh-tw) { text-transform: none; } .champion-select .summoner-array .first-pick { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .champion-select .summoner-array .first-pick:lang(ja-jp) { font-size: 13px; } .champion-select .summoner-array .first-pick:lang(ar-ae) { letter-spacing: 0; } .champion-select .summoner-array { display: flex; flex-direction: column; justify-content: center; padding-top: 30px; padding-bottom: 30px; width: 25%; height: 400px; transform: translateZ(0); margin-top: 66px; } .champion-select .summoner-array .first-pick { direction: ltr; position: absolute; text-shadow: 0 0 5px rgba(1,10,19,0.8); opacity: 0.65; top: 0; } .champion-select .summoner-array .summoner-timer-wrapper { position: absolute; top: 0; display: flex; height: 100%; justify-content: center; flex-direction: column; } .champion-select .summoner-array.your-party .first-pick { margin-left: 13px; left: 0px; } .champion-select .summoner-array.your-party .summoner-timer-wrapper { left: 240px; } .champion-select .summoner-array.enemy-party .first-pick { margin-right: 13px; right: 0px; } .champion-select .summoner-array.enemy-party .summoner-timer-wrapper { left: 47px; } .champion-select .summoner-array .party { position: relative; } .champion-select .summoner-array .summoner-wrapper { position: relative; height: 80px; } .champion-select .summoner-array .summoner-wrapper .lines { position: absolute; left: 12px; margin: 0; height: 100%; } .champion-select .summoner-array .summoner-wrapper .lines:first-child:before { top: -6px; bottom: auto; } .champion-select .summoner-array .summoner-wrapper .lines::after, .champion-select .summoner-array .summoner-wrapper .lines:first-child:before { content: ''; position: absolute; bottom: -3px; height: 9px; width: 386px; background: url("/fe/lol-champ-select/images/summoner-object/linework-horiz.png") left top no-repeat; background-size: contain; } .champion-select .summoner-array .summoner-wrapper.right .lines { transform: scaleX(-1); right: 12px; } .champion-select .summoner-overlay .overlay-button { margin-right: 10px; cursor: pointer; outline: none; border: none; } .champion-select .summoner-overlay .overlay-button:disabled { pointer-events: none; cursor: default; } .champion-select .summoner-overlay { position: absolute; height: 100%; width: 180px; left: 68px; top: 0; } .champion-select .summoner-overlay:hover .summoner-overlay-background { opacity: 1; } .champion-select .summoner-overlay:hover .summoner-overlay-buttons-container { opacity: 1; } .champion-select .summoner-overlay .summoner-overlay-background { position: absolute; height: 100%; width: 240px; left: -68px; background: url("/fe/lol-champ-select/images/summoner-object/background-overlay.svg"); background-size: cover; transition: opacity 0.2s linear; opacity: 0; pointer-events: none; } .champion-select .summoner-overlay.show .summoner-overlay-background { opacity: 1; } .champion-select .summoner-overlay.show .summoner-overlay-buttons-container { opacity: 1; } .champion-select .summoner-overlay .summoner-overlay-buttons-container { position: absolute; height: 100%; width: 80%; display: flex; align-items: center; justify-content: center; transition: opacity 0.25s linear; opacity: 0; } .champion-select .summoner-overlay .overlay-button { height: 26px; width: 26px; } .champion-select .summoner-overlay .overlay-button.report { background: url("/fe/lol-champ-select/images/summoner-object/button-report.svg"); } .champion-select .summoner-overlay .overlay-button.report:hover { background: url("/fe/lol-champ-select/images/summoner-object/button-report-hover.svg"); } .champion-select .summoner-overlay .overlay-button.report.disabled { background: url("/fe/lol-champ-select/images/summoner-object/button-report-disabled.svg"); cursor: default; } .champion-select .summoner-overlay .overlay-button.mute { background: url("/fe/lol-champ-select/images/summoner-object/button-mute.svg"); transform: translateY(-3px); } .champion-select .summoner-overlay .overlay-button.mute:hover { background: url("/fe/lol-champ-select/images/summoner-object/button-mute-hover.svg"); } .champion-select .summoner-overlay .overlay-button.unmute { background: url("/fe/lol-champ-select/images/summoner-object/button-unmute.svg"); } .champion-select .summoner-overlay .overlay-button.unmute:hover { background: url("/fe/lol-champ-select/images/summoner-object/button-unmute-hover.svg"); } .summoner-object .player-details .champion-vote-projection, .summoner-object .player-details .summoner-primary-text, lol-uikit-tooltip .pick-order-swapping-tooltip-title, lol-uikit-tooltip .champ-trade-tooltip-title { font-family: var(--font-display); } .summoner-object .player-details .summoner-secondary-text, .summoner-object .player-details .summoner-name { font-family: var(--font-body); } .summoner-object .player-details .summoner-secondary-text, .summoner-object .player-details .summoner-name, .summoner-object .player-details .champion-vote-projection, .summoner-object .player-details .summoner-primary-text, lol-uikit-tooltip .pick-order-swapping-tooltip-title, lol-uikit-tooltip .champ-trade-tooltip-title { -webkit-user-select: none; } .summoner-object .player-details .summoner-secondary-text, .summoner-object .player-details .summoner-name, .summoner-object .player-details .champion-vote-projection, .summoner-object .player-details .summoner-primary-text, lol-uikit-tooltip .pick-order-swapping-tooltip-title, lol-uikit-tooltip .champ-trade-tooltip-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .summoner-object .player-details .champion-vote-projection, .summoner-object .player-details .summoner-primary-text, lol-uikit-tooltip .pick-order-swapping-tooltip-title, lol-uikit-tooltip .champ-trade-tooltip-title { text-transform: uppercase; } .summoner-object .player-details .champion-vote-projection:lang(ko-kr), .summoner-object .player-details .summoner-primary-text:lang(ko-kr), lol-uikit-tooltip .pick-order-swapping-tooltip-title:lang(ko-kr), lol-uikit-tooltip .champ-trade-tooltip-title:lang(ko-kr), .summoner-object .player-details .champion-vote-projection:lang(ja-jp), .summoner-object .player-details .summoner-primary-text:lang(ja-jp), lol-uikit-tooltip .pick-order-swapping-tooltip-title:lang(ja-jp), lol-uikit-tooltip .champ-trade-tooltip-title:lang(ja-jp), .summoner-object .player-details .champion-vote-projection:lang(tr-tr), .summoner-object .player-details .summoner-primary-text:lang(tr-tr), lol-uikit-tooltip .pick-order-swapping-tooltip-title:lang(tr-tr), lol-uikit-tooltip .champ-trade-tooltip-title:lang(tr-tr), .summoner-object .player-details .champion-vote-projection:lang(el-gr), .summoner-object .player-details .summoner-primary-text:lang(el-gr), lol-uikit-tooltip .pick-order-swapping-tooltip-title:lang(el-gr), lol-uikit-tooltip .champ-trade-tooltip-title:lang(el-gr), .summoner-object .player-details .champion-vote-projection:lang(th-th), .summoner-object .player-details .summoner-primary-text:lang(th-th), lol-uikit-tooltip .pick-order-swapping-tooltip-title:lang(th-th), lol-uikit-tooltip .champ-trade-tooltip-title:lang(th-th), .summoner-object .player-details .champion-vote-projection:lang(zh-tw), .summoner-object .player-details .summoner-primary-text:lang(zh-tw), lol-uikit-tooltip .pick-order-swapping-tooltip-title:lang(zh-tw), lol-uikit-tooltip .champ-trade-tooltip-title:lang(zh-tw) { text-transform: none; } .summoner-object .player-details .champion-vote-projection, .summoner-object .player-details .summoner-primary-text, lol-uikit-tooltip .pick-order-swapping-tooltip-title, lol-uikit-tooltip .champ-trade-tooltip-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .summoner-object .player-details .champion-vote-projection:lang(ar-ae), .summoner-object .player-details .summoner-primary-text:lang(ar-ae), lol-uikit-tooltip .pick-order-swapping-tooltip-title:lang(ar-ae), lol-uikit-tooltip .champ-trade-tooltip-title:lang(ar-ae) { letter-spacing: 0; } .summoner-object .player-details .summoner-secondary-text, .summoner-object .player-details .summoner-name { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .summoner-object .player-details .summoner-secondary-text:lang(ja-jp), .summoner-object .player-details .summoner-name:lang(ja-jp) { font-size: 13px; } .summoner-object .player-details .summoner-secondary-text:lang(ar-ae), .summoner-object .player-details .summoner-name:lang(ar-ae) { letter-spacing: 0; } .summoner-object .summoner-spells .spell, .summoner-object .summoner-spells .spell img { border: thin solid #3c3c41; outline: 1px solid rgba(1,10,19,0.75); box-shadow: none; } .champion-select.is-spectating .summoner-object.right .summoner-spells { right: 0px; } .in-finalization .summoner-object.actions-complete { opacity: 1; } .summoner-object { height: 78px; --lockinAnimationDuration: 600ms; --startBanningAnimationDuration: 180ms; --statusMessageTransitionDuration: 200ms; --summonerStateTransitionDuration: 500ms; display: flex; align-items: center; position: relative; transition: opacity var(--summonerStateTransitionDuration); box-sizing: border-box; opacity: 1; transform: translateZ(0); } .summoner-object > .dim { opacity: 0.5; } .summoner-object .active-bar { width: 8px; height: 100%; background: #0a96aa; } .summoner-object .active-bar-spacer { width: 8px; height: 100%; } .summoner-object.is-self .active-bar { background: #fabe0a; } .summoner-object.right .active-bar { background: #be1e37; } .summoner-object .swap-button-spacing { width: 40px; height: 100%; opacity: 1; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; transition: all 300ms ease-in-out; } .summoner-object .swap-button-spacing.collapsed { display: none; } .summoner-object .summoner-spells { width: 30px; height: 100%; opacity: 1; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; } .summoner-object .summoner-spells.removed { display: none; } .summoner-object .summoner-spells .spell, .summoner-object .summoner-spells .spell img { width: 24px; height: 24px; } .summoner-object .summoner-spells.dim .spell { opacity: 0.5; } .summoner-object .summoner-ban-item { width: 28px; height: 28px; border: 1px solid #1e282d; background-color: rgba(1,10,19,0.5); background-position: center; background-size: 66.7% 66.7%; background-repeat: no-repeat; transform: scaleX(-1); } .summoner-object .summoner-ban-item .champ-ban-icon { background-size: 100% 100%; width: 28px; height: 28px; transform: scaleX(-1); } .summoner-object .summoner-ban-item .ban-icon-overlay { position: absolute; bottom: -30%; left: 15% ; width: 70%; height: 70%; background-size: 100% 100%; background-image: url("/fe/lol-champ-select/images/ban-showcase/icon-ban-red.png"); } .summoner-object .summoner-container-spacer { width: 8px; height: 100%; } .summoner-object .summoner-container-wrapper { position: relative; display: flex; align-items: center; } .summoner-object .summoner-container-wrapper.collapsed { animation-name: summoner-wrapper-collapse; animation-duration: 0.27s; animation-delay: 0s; animation-timing-function: cubic-bezier(1, 0, 1, 1); } .summoner-object .summoner-container-wrapper.expanded { animation-name: summoner-wrapper-expand; animation-duration: 0.27s; animation-delay: 0s; animation-timing-function: cubic-bezier(1, 0, 1, 1); } .summoner-object .summoner-container { position: relative; height: 100%; display: flex; align-items: center; } .summoner-object .summoner-container.collapsed { animation-name: summoner-object-collapse-initial, summoner-object-collapse-final; animation-duration: 0.27s, 0.57s; animation-delay: 0s, 0.27s; animation-timing-function: cubic-bezier(1, 0, 1, 1), cubic-bezier(0, 0, 0, 1); } .summoner-object .summoner-container.expanded { animation-name: summoner-object-expand-initial, summoner-object-expand-final; animation-duration: 0.27s, 0.57s; animation-delay: 0s, 0.27s; animation-timing-function: cubic-bezier(1, 0, 1, 1), cubic-bezier(0, 0, 0, 1); } .summoner-object .summoner-container .player-details-spacer { width: 10px; height: 100%; } .summoner-object .summoner-container .champion-icon-container { height: 62px; width: 62px; position: relative; transition: 500ms background-image ease; display: flex; } .summoner-object .summoner-container .champion-icon-container .champion-ring { width: 62px; height: 62px; background-image: url("/fe/lol-champ-select/images/summoner-object/player-object-m.png"); background-size: 100%; background-repeat: no-repeat; background-position: center; position: absolute; } .summoner-object .summoner-container .champion-icon-container .champion-icons { width: calc(62px - 4px); height: calc(62px - 4px); border-radius: 50%; align-self: center; flex: 0 0 auto; position: relative; margin: 0 auto; } .summoner-object .summoner-container .champion-icon-container .champion-icons .svg-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .summoner-object .summoner-container .champion-icon-container .champion-icons .svg-icon .active { transform: translate(0, 0); } .summoner-object .summoner-container .champion-icon-container .champion-icons .portrait-icon, .summoner-object .summoner-container .champion-icon-container .champion-icons .position-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; transition: opacity 0.5s; } .summoner-object .summoner-container .champion-icon-container .champion-icons .portrait-icon.fit-icon, .summoner-object .summoner-container .champion-icon-container .champion-icons .position-icon.fit-icon { background-size: 120%; background-position: 50%; } .summoner-object .summoner-container .champion-icon-container .champion-icons .portrait-icon.fit-icon.position-icon, .summoner-object .summoner-container .champion-icon-container .champion-icons .position-icon.fit-icon.position-icon { background-size: 55%; background-repeat: no-repeat; background-position: center center; } .summoner-object .summoner-container .champion-icon-container .entitled-feature-portrait { position: absolute; top: -8px; left: -9px; width: 80px; height: 80px; animation-name: summoner-object-fade-intro-animation; animation-delay: 0.03s; animation-duration: 0.03s; animation-fill-mode: backwards; animation-timing-function: linear; opacity: 1; } .summoner-object .summoner-container .champion-icon-container .summoner-muted-icon { background-image: radial-gradient(rgba(0,0,0,0.75) 0%, rgba(254,0,0,0) 70%); position: absolute; width: 20px; height: 20px; animation: summoner-object-fade-intro-animation; animation-delay: 0.03s; animation-duration: 0.03s; animation-fill-mode: backwards; animation-timing-function: linear; opacity: 1; } .summoner-object.actions-complete { opacity: 0.7; } .summoner-object.actions-complete.is-self, .summoner-object.actions-complete.skin-showcase-active { opacity: 1; } .summoner-object .skin-showcase { background-size: 100%; background-position: 0 -35px; transition: background 0.3s ease-in-out; -webkit-mask-image: url("/fe/lol-champ-select/images/summoner-object/skin-showcase-mask.png"), url("/fe/lol-champ-select/images/summoner-object/splash-ring-mask.png"); -webkit-mask-size: 100% 100%, auto; -webkit-mask-composite: source-out; -webkit-mask-repeat: no-repeat; } .summoner-object.right { flex-direction: row-reverse; text-align: right; } .summoner-object.right .summoner-container { flex-direction: row-reverse; } .summoner-object.right .summoner-container.collapsed { animation-name: summoner-object-expand-initial, summoner-object-expand-final; animation-duration: 0.27s, 0.57s; animation-delay: 0s, 0.27s; animation-timing-function: cubic-bezier(1, 0, 1, 1), cubic-bezier(0, 0, 0, 1); } .summoner-object.right .summoner-container.expanded { animation-name: summoner-object-collapse-initial, summoner-object-collapse-final; animation-duration: 0.27s, 0.57s; animation-delay: 0s, 0.27s; animation-timing-function: cubic-bezier(1, 0, 1, 1), cubic-bezier(0, 0, 0, 1); } .summoner-object.right .summoner-secondary-text { justify-content: flex-end; } .summoner-object.right .skin-showcase { background-position-x: 100%; } .summoner-object.is-self .player-details .summoner-secondary-text, .summoner-object.is-self .player-details .champion-vote-projection, .summoner-object.is-self .player-details .summoner-primary-text, .summoner-object.is-self .player-details .summoner-name { color: #fabe0a; } .summoner-object .video-magic-background-state-machine { position: absolute; top: -1.5px; width: 315.89px; height: 80px; z-index: -1; } .summoner-object .video-magic-background-state-machine .video-magic-background { display: flex; position: absolute; height: 80px; top: 0; left: -12px; opacity: 1; } .summoner-object .video-magic-background-state-machine .video-magic-background.right { left: 18px; } .summoner-object .video-magic-background-state-machine .video-magic-background video { height: 80px; } .summoner-object .video-magic-background-state-machine[state='intro'] .bg-idle-vid, .summoner-object .video-magic-background-state-machine[state='outro'] .bg-idle-vid { opacity: 0; } .summoner-object .video-magic-background-state-machine.skin-showcase, .summoner-object .image-magic-background.skin-showcase { width: 480px; opacity: 0.7; left: -12px; } .summoner-object .image-ring-spinner { display: flex; position: absolute; } .summoner-object .image-ring-spinner.animated { top: -7px; left: -7px; width: 75px; height: 75px; animation: summoner-object-spin 1s cubic-bezier(0, 0, 0.43, 0.7), summoner-object-spin 1.55s linear infinite; animation-delay: 0s, 1s; } .summoner-object .image-ring-spinner.animated.left-side { background: url("/fe/lol-champ-select/images/summoner-object/player-object-spinner-blue.png") no-repeat; } .summoner-object .image-ring-spinner.animated.right-side { background: url("/fe/lol-champ-select/images/summoner-object/player-object-spinner-red.png") no-repeat; } .summoner-object .image-ring-spinner.animated.is-self { background: url("/fe/lol-champ-select/images/summoner-object/player-object-spinner-gold.png") no-repeat; } .summoner-object .image-ring-spinner.not-animated { top: 0px; left: 0px; height: 62px; width: 62px; background-size: 100%; background-repeat: no-repeat; } .summoner-object .image-ring-spinner.not-animated.left-side { background-image: url("/fe/lol-champ-select/images/summoner-object/player-ring-bright-blue.png"); } .summoner-object .image-ring-spinner.not-animated.right-side { background-image: url("/fe/lol-champ-select/images/summoner-object/player-ring-bright-red.png"); } .summoner-object .image-ring-spinner.not-animated.is-self { background-image: url("/fe/lol-champ-select/images/summoner-object/player-ring-bright-m.png"); } .summoner-object .image-ring-spinner.removed { display: none; } .summoner-object .image-magic-background { position: absolute; bottom: 2px; top: -2px; left: 0px; right: 0; opacity: 0; height: 79px; transition: opacity 300ms; margin-top: 1px; } .summoner-object.right .video-magic-background-state-machine { right: 0; } .summoner-object.right .video-magic-background-state-machine.skin-showcase { right: -12px; } .summoner-object.right .image-magic-background.is-acting-background { right: -10px; top: -1px; bottom: -3px; background: url("/fe/lol-champ-select/images/summoner-object/background-magic-red.png") no-repeat; background-size: cover; opacity: 1; } .summoner-object.left .image-magic-background.is-acting-background { left: -12px; background: url("/fe/lol-champ-select/images/summoner-object/background-magic-blue.png") no-repeat; background-size: cover; opacity: 1; } .summoner-object.is-self .image-magic-background.is-acting-background { left: -12px; background: url("/fe/lol-champ-select/images/summoner-object/background-magic-gold.png") no-repeat; background-size: cover; opacity: 1; } .summoner-object:not(.is-picking-now) .champion-ring-pop-animation { animation: summoner-object-lockin-ring var(--lockinAnimationDuration) cubic-bezier(0, 0.74, 1, 1); animation-delay: calc(0.125 * var(--lockinAnimationDuration)); position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translateX(-50%) translateY(-50%); background-image: radial-gradient(circle at 50% -10px, #feffdf 0%, #feffdf 18px, rgba(254,255,223,0) 35px), linear-gradient(to bottom, #fcfd87 0%, #ddbb63 70%); opacity: 0; } .summoner-object:not(.is-picking-now) .champion-ring-shine-animation { animation: summoner-object-lockin-ring-shine var(--lockinAnimationDuration) cubic-bezier(0, 0, 0.15, 0.99); animation-delay: calc(0.125 * var(--lockinAnimationDuration)); position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translateX(-50%) translateY(-50%); background: linear-gradient(-60deg, transparent 40%, rgba(255,255,255,0.8) 45%, rgba(255,255,255,0.8) 55%, transparent 60%); background-repeat: no-repeat; -webkit-filter: drop-shadow(0 0 3px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.8)); opacity: 0; } .summoner-object:not(.is-picking-now) .champion-ring-magic-animation-inner { animation: summoner-object-lockin-inner-magic calc(1.25 * var(--lockinAnimationDuration)) linear; animation-delay: calc(0.25 * var(--lockinAnimationDuration)); position: absolute; left: 50%; top: 50%; width: calc(62px - 4px); height: calc(62px - 4px); background-image: url("/fe/lol-champ-select/images/summoner-object/player-object-magic-inner.png"); background-size: cover; background-repeat: no-repeat; opacity: 0; } .summoner-object:not(.is-picking-now) .champion-ring-magic-animation-outer { animation: summoner-object-lockin-outer-magic calc(0.75 * var(--lockinAnimationDuration)) linear; animation-delay: calc(0.25 * var(--lockinAnimationDuration)); position: absolute; left: 50%; top: 50%; width: calc(62px + 24px); height: calc(62px + 24px); background-image: url("/fe/lol-champ-select/images/summoner-object/player-object-magic-outer.png"); background-size: cover; background-repeat: no-repeat; -webkit-filter: brightness(1.4); opacity: 0; } .summoner-object:not(.is-picking-now) .summoner-secondary-text { animation: summoner-object-lockin-summoner-secondary-text calc(1.75 * var(--lockinAnimationDuration)) cubic-bezier(0, 0, 0.84, 0.35); } .summoner-object.left.pick-sniped { animation-name: summoner-object-pick-snipe-shake; animation-duration: 300ms; animation-timing-function: cubic-bezier(0, 0, 0.5, 1); } .summoner-object.left.pick-sniped .portrait-icon { -webkit-filter: grayscale(1); animation-name: summoner-object-champion-intent-banned-portrait; animation-duration: 800ms; animation-fill-mode: backwards; opacity: 0; } .summoner-object.left.pick-sniped .champion-icon-pick-snipe-glow-animation { position: absolute; top: -10px; left: -20px; bottom: -10px; right: -20px; background-image: radial-gradient(circle closest-side at 50% 50%, #e44f72 12px, transparent 130%); opacity: 0; animation-name: champion-icon-pick-snipe-fade; animation-duration: 800ms; animation-timing-function: cubic-bezier(0.16, 0.35, 0.59, 0.82); } .summoner-object.left.pick-sniped .champion-icon-pick-snipe-magic-animation { position: absolute; top: -10px; left: -50px; bottom: -10px; right: -300px; opacity: 0; -webkit-mask-image: linear-gradient(to right, transparent 0%, #fff 45%, #fff 55%, transparent 100%); -webkit-mask-size: 40% 100%; -webkit-mask-repeat: no-repeat; animation-name: champion-icon-pick-snipe-magic-swipe; animation-duration: 400ms; animation-timing-function: cubic-bezier(0.16, 0.35, 0.59, 0.82); } .summoner-object.left.pick-sniped .champion-icon-pick-snipe-magic-animation::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: url("/fe/lol-champ-select/images/summoner-object/background-magic-red.png"); background-repeat: no-repeat; background-position: 20px 0; } .summoner-object.left.pick-sniped .champion-icon-pick-snipe-ring-animation { position: absolute; background-size: 70px; background-repeat: no-repeat; top: -4px; left: -4px; bottom: -4px; right: -4px; background-image: url("/fe/lol-champ-select/images/summoner-object/player-object-picksnipe-spinner.png"); opacity: 0; animation-name: champion-icon-pick-snipe-ring-spinner, summoner-object-fadeout-intro-animation; animation-duration: 1.17s, 1.17s; animation-timing-function: cubic-bezier(0, 0, 0, 1), cubic-bezier(0, 0, 0.5, 1); } .summoner-object:not(.left) .champion-icon-container .champion-ring { background-image: url("/fe/lol-champ-select/images/summoner-object/player-object-m-red.png"); } .summoner-object .player-details { color: #f7f0de; width: 156px; max-height: 66px; display: flex; flex-direction: column; justify-content: flex-start ; overflow: hidden; } .summoner-object .player-details .summoner-secondary-text, .summoner-object .player-details .summoner-name { direction: ltr; color: #cdbe91; text-shadow: 0 0 5px rgba(1,10,19,0.8); margin: 0; transition: opacity 0.3s, max-height 0.3s; } .left .summoner-object .player-details .summoner-secondary-text, .left .summoner-object .player-details .summoner-name { text-align: left; align-self: auto ; } .summoner-object .player-details .champion-vote-projection { color: #f0e6d2; text-shadow: 0 0 5px rgba(1,10,19,0.8); opacity: 1; margin: 0; font-size: 14px; font-weight: 700; max-height: 20px; display: inline-flex; } .summoner-object .player-details .champion-vote-projection.no-vote-percent { max-height: 0; opacity: 0; } .summoner-object .player-details .summoner-secondary-text { opacity: 1; overflow: hidden; line-height: 14px; } .summoner-object .player-details .summoner-secondary-text .summoner-secondary-text-inner { display: inline-block; align-self: flex-end; } .summoner-object .player-details .summoner-primary-text { direction: ltr; max-width: 180px; text-overflow: ellipsis; overflow: hidden; transition: opacity 0.5s; height: 20px; position: relative; pointer-events: none; flex: none; } .summoner-object .player-details .summoner-primary-text.hidden { display: none; } .summoner-object .player-details .summoner-primary-text .summoner-primary-text-glow { opacity: 0; } .left .summoner-object .player-details .summoner-primary-text { text-align: left; } .summoner-object .player-details .summoner-name { color: #a09b8c; text-overflow: ellipsis; white-space: nowrap; max-height: 16px; width: 100%; overflow: hidden; } .summoner-object .player-details .summoner-name.showing-summoner-booster-icon { display: flex; max-height: none; line-height: 32px; } .summoner-object .player-details .summoner-name.showing-summoner-booster-icon .name-text { max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .summoner-object .player-details .summoner-name-booster-icon { width: 32px; height: 32px; background: url("/fe/lol-static-assets/svg/battle-boost-icon-gold.svg") no-repeat center center; background-size: contain; animation: fadeIn 500ms ease forwards; } .champion-icon-pick-chest-available-glow { height: 60px; width: 60px; position: absolute; top: 0; left: 0; border: thin solid #cdbe91; border-radius: 50%; filter: drop-shadow(0px 0px 4px rgba(200,155,60,0.9)) drop-shadow(0px 0px 2px rgba(200,155,60,0.9)) drop-shadow(0px 0px 1px #cdbe91) drop-shadow(0px 0px 1px #cdbe91); opacity: 0; transition: opacity 3s ease 1s; } .champion-ring-chest-available-glow { height: 56px; width: 56px; position: absolute; top: 1px; left: 1px; border: 2px solid #cdbe91; border-radius: 50%; opacity: 0; transition: opacity 3s ease 1s; } .show-chest-availability-hinted-portraits .champion-icon-pick-chest-available-glow, .show-chest-availability-hinted-portraits .champion-ring-chest-available-glow { opacity: 1; transition-delay: 0s; transition-duration: 0.4s; } .summoner-wrapper .champion-container { transform-origin: 50% 50%; } .summoner-wrapper .champion-icons-bg { background-color: #1e282d; position: absolute; width: 100%; height: 100%; box-shadow: inset 0 0 8px rgba(0,0,0,0.7); border-radius: 50%; } .summoner-wrapper .intro-animation .champion-icon-container { animation-name: summoner-object-scale-intro-animation; animation-duration: 0.17s; animation-timing-function: cubic-bezier(0.87, 0.07, 0.98, 0.38); } .summoner-wrapper .intro-animation .player-details { animation-name: summoner-object-slide-intro-animation; animation-duration: 0.8s; animation-delay: 0.15s; animation-fill-mode: backwards; animation-timing-function: cubic-bezier(0, 0, 0, 1); } .summoner-wrapper .intro-animation .champion-ring { animation-name: summoner-object-fade-intro-animation; animation-delay: 0.03s; animation-duration: 0.03s; animation-fill-mode: backwards; animation-timing-function: linear; opacity: 1; } .summoner-wrapper .intro-animation .champion-ring::after { content: ''; position: absolute; top: 1px; left: 1px; bottom: 1px; right: 1px; border-radius: 50%; animation-name: summoner-object-fadeout-intro-animation; animation-duration: 0.9s; animation-delay: 0.03s; animation-timing-function: linear; opacity: 0; } .summoner-wrapper .intro-animation .champion-icons-bg { animation-name: summoner-object-fade-intro-animation; animation-duration: 0.5s; animation-delay: 0.12s; animation-fill-mode: backwards; animation-timing-function: linear; } .summoner-wrapper .intro-animation .champion-icons .svg-icon { animation-name: summoner-object-fade-intro-animation; animation-duration: 0.1s; animation-delay: 0s; animation-fill-mode: backwards; animation-timing-function: linear; } .summoner-wrapper .intro-animation .summoner-primary-text-glow { animation-name: summoner-object-fadeout-intro-animation; animation-duration: 0.8s; animation-delay: 0.17s; animation-timing-function: linear; position: absolute; top: 0; left: 0; } .summoner-wrapper .intro-animation:not(.is-self) .summoner-primary-text-glow { text-shadow: 0 0 5px #f7f0de; } .summoner-wrapper .intro-animation:not(.is-self) .champion-ring::after { border: 2px solid #f7f0de; -webkit-filter: drop-shadow(0 0 5px #f7f0de) drop-shadow(0 0 5px #f7f0de) drop-shadow(0 0 5px #f7f0de); } .summoner-wrapper .intro-animation.is-self .summoner-primary-text-glow { text-shadow: 0 0 5px #fabe0a; } .summoner-wrapper .intro-animation.is-self .champion-ring::after { border: 2px solid #c8aa6e; -webkit-filter: drop-shadow(0 0 5px #c8aa6e) drop-shadow(0 0 5px #c8aa6e) drop-shadow(0 0 5px #c8aa6e); } .summoner-wrapper .intro-animation.slot-id-0, .summoner-wrapper .intro-animation.slot-id-0 .summoner-primary-text-glow, .summoner-wrapper .intro-animation.slot-id-0 .champion-icon-container { animation-delay: 0.89s; } .summoner-wrapper .intro-animation.slot-id-0 .player-details { animation-delay: 0.87s; } .summoner-wrapper .intro-animation.slot-id-0 .champion-ring, .summoner-wrapper .intro-animation.slot-id-0 .champion-ring::after { animation-delay: 0.75s; } .summoner-wrapper .intro-animation.slot-id-0 .champion-icons-bg { animation-delay: 0.84s; } .summoner-wrapper .intro-animation.slot-id-0 .champion-icons .svg-icon, .summoner-wrapper .intro-animation.slot-id-0 .entitled-feature-portrait, .summoner-wrapper .intro-animation.slot-id-0 .summoner-muted-icon { animation-delay: 0.72s; } .summoner-wrapper .intro-animation.slot-id-1, .summoner-wrapper .intro-animation.slot-id-1 .summoner-primary-text-glow, .summoner-wrapper .intro-animation.slot-id-1 .champion-icon-container { animation-delay: 1.59s; } .summoner-wrapper .intro-animation.slot-id-1 .player-details { animation-delay: 1.57s; } .summoner-wrapper .intro-animation.slot-id-1 .champion-ring, .summoner-wrapper .intro-animation.slot-id-1 .champion-ring::after { animation-delay: 1.45s; } .summoner-wrapper .intro-animation.slot-id-1 .champion-icons-bg { animation-delay: 1.54s; } .summoner-wrapper .intro-animation.slot-id-1 .champion-icons .svg-icon, .summoner-wrapper .intro-animation.slot-id-1 .entitled-feature-portrait, .summoner-wrapper .intro-animation.slot-id-1 .summoner-muted-icon { animation-delay: 1.42s; } .summoner-wrapper .intro-animation.slot-id-2, .summoner-wrapper .intro-animation.slot-id-2 .summoner-primary-text-glow, .summoner-wrapper .intro-animation.slot-id-2 .champion-icon-container { animation-delay: 2.29s; } .summoner-wrapper .intro-animation.slot-id-2 .player-details { animation-delay: 2.27s; } .summoner-wrapper .intro-animation.slot-id-2 .champion-ring, .summoner-wrapper .intro-animation.slot-id-2 .champion-ring::after { animation-delay: 2.149999999999999s; } .summoner-wrapper .intro-animation.slot-id-2 .champion-icons-bg { animation-delay: 2.24s; } .summoner-wrapper .intro-animation.slot-id-2 .champion-icons .svg-icon, .summoner-wrapper .intro-animation.slot-id-2 .entitled-feature-portrait, .summoner-wrapper .intro-animation.slot-id-2 .summoner-muted-icon { animation-delay: 2.12s; } .summoner-wrapper .intro-animation.slot-id-3, .summoner-wrapper .intro-animation.slot-id-3 .summoner-primary-text-glow, .summoner-wrapper .intro-animation.slot-id-3 .champion-icon-container { animation-delay: 2.99s; } .summoner-wrapper .intro-animation.slot-id-3 .player-details { animation-delay: 2.97s; } .summoner-wrapper .intro-animation.slot-id-3 .champion-ring, .summoner-wrapper .intro-animation.slot-id-3 .champion-ring::after { animation-delay: 2.85s; } .summoner-wrapper .intro-animation.slot-id-3 .champion-icons-bg { animation-delay: 2.94s; } .summoner-wrapper .intro-animation.slot-id-3 .champion-icons .svg-icon, .summoner-wrapper .intro-animation.slot-id-3 .entitled-feature-portrait, .summoner-wrapper .intro-animation.slot-id-3 .summoner-muted-icon { animation-delay: 2.82s; } .summoner-wrapper .intro-animation.slot-id-4, .summoner-wrapper .intro-animation.slot-id-4 .summoner-primary-text-glow, .summoner-wrapper .intro-animation.slot-id-4 .champion-icon-container { animation-delay: 3.69s; } .summoner-wrapper .intro-animation.slot-id-4 .player-details { animation-delay: 3.67s; } .summoner-wrapper .intro-animation.slot-id-4 .champion-ring, .summoner-wrapper .intro-animation.slot-id-4 .champion-ring::after { animation-delay: 3.55s; } .summoner-wrapper .intro-animation.slot-id-4 .champion-icons-bg { animation-delay: 3.64s; } .summoner-wrapper .intro-animation.slot-id-4 .champion-icons .svg-icon, .summoner-wrapper .intro-animation.slot-id-4 .entitled-feature-portrait, .summoner-wrapper .intro-animation.slot-id-4 .summoner-muted-icon { animation-delay: 3.52s; } .summoner-wrapper .intro-animation.slot-id-5, .summoner-wrapper .intro-animation.slot-id-5 .summoner-primary-text-glow, .summoner-wrapper .intro-animation.slot-id-5 .champion-icon-container { animation-delay: 4.39s; } .summoner-wrapper .intro-animation.slot-id-5 .player-details { animation-delay: 4.369999999999999s; } .summoner-wrapper .intro-animation.slot-id-5 .champion-ring, .summoner-wrapper .intro-animation.slot-id-5 .champion-ring::after { animation-delay: 4.249999999999999s; } .summoner-wrapper .intro-animation.slot-id-5 .champion-icons-bg { animation-delay: 4.339999999999999s; } .summoner-wrapper .intro-animation.slot-id-5 .champion-icons .svg-icon, .summoner-wrapper .intro-animation.slot-id-5 .entitled-feature-portrait, .summoner-wrapper .intro-animation.slot-id-5 .summoner-muted-icon { animation-delay: 4.219999999999999s; } .right .summoner-ban-item .ban-icon-overlay { left: 25%; } .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-0, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-0 .portrait-icon, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-0 .champion-icon-pick-snipe-glow-animation, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-0 .champion-icon-pick-snipe-magic-animation, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-0 .champion-icon-pick-snipe-ring-animation { animation-delay: 0.83s; } .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-1, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-1 .portrait-icon, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-1 .champion-icon-pick-snipe-glow-animation, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-1 .champion-icon-pick-snipe-magic-animation, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-1 .champion-icon-pick-snipe-ring-animation { animation-delay: 1.48s; } .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-2, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-2 .portrait-icon, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-2 .champion-icon-pick-snipe-glow-animation, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-2 .champion-icon-pick-snipe-magic-animation, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-2 .champion-icon-pick-snipe-ring-animation { animation-delay: 2.13s; } .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-3, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-3 .portrait-icon, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-3 .champion-icon-pick-snipe-glow-animation, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-3 .champion-icon-pick-snipe-magic-animation, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-3 .champion-icon-pick-snipe-ring-animation { animation-delay: 2.78s; } .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-4, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-4 .portrait-icon, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-4 .champion-icon-pick-snipe-glow-animation, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-4 .champion-icon-pick-snipe-magic-animation, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-4 .champion-icon-pick-snipe-ring-animation { animation-delay: 3.43s; } .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-5, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-5 .portrait-icon, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-5 .champion-icon-pick-snipe-glow-animation, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-5 .champion-icon-pick-snipe-magic-animation, .ban-showcase-screen .summoner-object.left.pick-sniped.pick-snipe-banned-by-enemy-index-5 .champion-icon-pick-snipe-ring-animation { animation-delay: 4.08s; } lol-uikit-tooltip .pick-order-swapping-tooltip-title { color: #32281e; padding-bottom: 5px; } lol-uikit-tooltip .pick-order-swapping-tooltip-title.hidden { display: none; } lol-uikit-tooltip .champ-trade-tooltip-title { color: #32281e; padding-bottom: 5px; } lol-uikit-tooltip .champ-trade-tooltip-title.hidden { display: none; } @-moz-keyframes summoner-object-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes summoner-object-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-o-keyframes summoner-object-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes summoner-object-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-moz-keyframes summoner-object-lockin-ring { 0% { width: calc(62px + 13px); height: calc(62px + 13px); opacity: 1; } 38% { width: 62px; height: 62px; opacity: 1; } 100% { width: 62px; height: 62px; opacity: 0; } } @-webkit-keyframes summoner-object-lockin-ring { 0% { width: calc(62px + 13px); height: calc(62px + 13px); opacity: 1; } 38% { width: 62px; height: 62px; opacity: 1; } 100% { width: 62px; height: 62px; opacity: 0; } } @-o-keyframes summoner-object-lockin-ring { 0% { width: calc(62px + 13px); height: calc(62px + 13px); opacity: 1; } 38% { width: 62px; height: 62px; opacity: 1; } 100% { width: 62px; height: 62px; opacity: 0; } } @keyframes summoner-object-lockin-ring { 0% { width: calc(62px + 13px); height: calc(62px + 13px); opacity: 1; } 38% { width: 62px; height: 62px; opacity: 1; } 100% { width: 62px; height: 62px; opacity: 0; } } @-moz-keyframes summoner-object-lockin-ring-shine { 0% { width: calc(62px + 13px); height: calc(62px + 13px); background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%); } 25% { background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%); opacity: 1; } 38% { width: 62px; height: 62px; opacity: 1; } 66% { opacity: 0.6; } 100% { width: 62px; height: 62px; opacity: 0.2; background-position: calc(62px / 2 - 10%) calc(62px / 2 - 10%); } } @-webkit-keyframes summoner-object-lockin-ring-shine { 0% { width: calc(62px + 13px); height: calc(62px + 13px); background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%); } 25% { background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%); opacity: 1; } 38% { width: 62px; height: 62px; opacity: 1; } 66% { opacity: 0.6; } 100% { width: 62px; height: 62px; opacity: 0.2; background-position: calc(62px / 2 - 10%) calc(62px / 2 - 10%); } } @-o-keyframes summoner-object-lockin-ring-shine { 0% { width: calc(62px + 13px); height: calc(62px + 13px); background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%); } 25% { background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%); opacity: 1; } 38% { width: 62px; height: 62px; opacity: 1; } 66% { opacity: 0.6; } 100% { width: 62px; height: 62px; opacity: 0.2; background-position: calc(62px / 2 - 10%) calc(62px / 2 - 10%); } } @keyframes summoner-object-lockin-ring-shine { 0% { width: calc(62px + 13px); height: calc(62px + 13px); background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%); } 25% { background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%); opacity: 1; } 38% { width: 62px; height: 62px; opacity: 1; } 66% { opacity: 0.6; } 100% { width: 62px; height: 62px; opacity: 0.2; background-position: calc(62px / 2 - 10%) calc(62px / 2 - 10%); } } @-moz-keyframes summoner-object-lockin-icon { 0% { box-shadow: 0 1px 3px #9b803c; } 38% { box-shadow: 0 1px 3px transparent; } } @-webkit-keyframes summoner-object-lockin-icon { 0% { box-shadow: 0 1px 3px #9b803c; } 38% { box-shadow: 0 1px 3px transparent; } } @-o-keyframes summoner-object-lockin-icon { 0% { box-shadow: 0 1px 3px #9b803c; } 38% { box-shadow: 0 1px 3px transparent; } } @keyframes summoner-object-lockin-icon { 0% { box-shadow: 0 1px 3px #9b803c; } 38% { box-shadow: 0 1px 3px transparent; } } @-moz-keyframes summoner-object-lockin-inner-magic { 0% { opacity: 0.7; transform: translateX(-50%) translateY(-50%) rotateZ(-76deg) scaleY(1.2); } 20% { opacity: 1; transform: translateX(-50%) translateY(-50%) rotateZ(0deg) scaleY(1); } 40% { opacity: 0.8; transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1); } } @-webkit-keyframes summoner-object-lockin-inner-magic { 0% { opacity: 0.7; transform: translateX(-50%) translateY(-50%) rotateZ(-76deg) scaleY(1.2); } 20% { opacity: 1; transform: translateX(-50%) translateY(-50%) rotateZ(0deg) scaleY(1); } 40% { opacity: 0.8; transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1); } } @-o-keyframes summoner-object-lockin-inner-magic { 0% { opacity: 0.7; transform: translateX(-50%) translateY(-50%) rotateZ(-76deg) scaleY(1.2); } 20% { opacity: 1; transform: translateX(-50%) translateY(-50%) rotateZ(0deg) scaleY(1); } 40% { opacity: 0.8; transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1); } } @keyframes summoner-object-lockin-inner-magic { 0% { opacity: 0.7; transform: translateX(-50%) translateY(-50%) rotateZ(-76deg) scaleY(1.2); } 20% { opacity: 1; transform: translateX(-50%) translateY(-50%) rotateZ(0deg) scaleY(1); } 40% { opacity: 0.8; transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1); } } @-moz-keyframes summoner-object-lockin-outer-magic { 0% { opacity: 0.9; transform: translateX(-42%) translateY(-36%) rotateZ(-65deg); } 50% { opacity: 1; transform: translateX(-54%) translateY(-37%) rotateZ(-21deg); } 100% { opacity: 0; transform: translateX(-60%) translateY(-39%) rotateZ(12deg); } } @-webkit-keyframes summoner-object-lockin-outer-magic { 0% { opacity: 0.9; transform: translateX(-42%) translateY(-36%) rotateZ(-65deg); } 50% { opacity: 1; transform: translateX(-54%) translateY(-37%) rotateZ(-21deg); } 100% { opacity: 0; transform: translateX(-60%) translateY(-39%) rotateZ(12deg); } } @-o-keyframes summoner-object-lockin-outer-magic { 0% { opacity: 0.9; transform: translateX(-42%) translateY(-36%) rotateZ(-65deg); } 50% { opacity: 1; transform: translateX(-54%) translateY(-37%) rotateZ(-21deg); } 100% { opacity: 0; transform: translateX(-60%) translateY(-39%) rotateZ(12deg); } } @keyframes summoner-object-lockin-outer-magic { 0% { opacity: 0.9; transform: translateX(-42%) translateY(-36%) rotateZ(-65deg); } 50% { opacity: 1; transform: translateX(-54%) translateY(-37%) rotateZ(-21deg); } 100% { opacity: 0; transform: translateX(-60%) translateY(-39%) rotateZ(12deg); } } @-moz-keyframes summoner-object-lockin-summoner-secondary-text { 0% { -webkit-filter: brightness(1.5) contrast(1.5) blur(0.5px); text-shadow: 0 0 3px #a09b8c, 0 0 3px #a09b8c; opacity: 0.85; } 100% { -webkit-filter: brightness(1) contrast(1) blur(0); text-shadow: 0 0 3px transparent, 0 0 3px transparent; opacity: 0.65; } } @-webkit-keyframes summoner-object-lockin-summoner-secondary-text { 0% { -webkit-filter: brightness(1.5) contrast(1.5) blur(0.5px); text-shadow: 0 0 3px #a09b8c, 0 0 3px #a09b8c; opacity: 0.85; } 100% { -webkit-filter: brightness(1) contrast(1) blur(0); text-shadow: 0 0 3px transparent, 0 0 3px transparent; opacity: 0.65; } } @-o-keyframes summoner-object-lockin-summoner-secondary-text { 0% { -webkit-filter: brightness(1.5) contrast(1.5) blur(0.5px); text-shadow: 0 0 3px #a09b8c, 0 0 3px #a09b8c; opacity: 0.85; } 100% { -webkit-filter: brightness(1) contrast(1) blur(0); text-shadow: 0 0 3px transparent, 0 0 3px transparent; opacity: 0.65; } } @keyframes summoner-object-lockin-summoner-secondary-text { 0% { -webkit-filter: brightness(1.5) contrast(1.5) blur(0.5px); text-shadow: 0 0 3px #a09b8c, 0 0 3px #a09b8c; opacity: 0.85; } 100% { -webkit-filter: brightness(1) contrast(1) blur(0); text-shadow: 0 0 3px transparent, 0 0 3px transparent; opacity: 0.65; } } @-moz-keyframes summoner-object-champion-intent-banned-overlay { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes summoner-object-champion-intent-banned-overlay { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes summoner-object-champion-intent-banned-overlay { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes summoner-object-champion-intent-banned-overlay { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes summoner-object-champion-intent-banned-portrait { 0% { -webkit-filter: grayscale(0); opacity: 1; } 10% { -webkit-filter: grayscale(1); opacity: 1; } 100% { -webkit-filter: grayscale(1); opacity: 0; } } @-webkit-keyframes summoner-object-champion-intent-banned-portrait { 0% { -webkit-filter: grayscale(0); opacity: 1; } 10% { -webkit-filter: grayscale(1); opacity: 1; } 100% { -webkit-filter: grayscale(1); opacity: 0; } } @-o-keyframes summoner-object-champion-intent-banned-portrait { 0% { -webkit-filter: grayscale(0); opacity: 1; } 10% { -webkit-filter: grayscale(1); opacity: 1; } 100% { -webkit-filter: grayscale(1); opacity: 0; } } @keyframes summoner-object-champion-intent-banned-portrait { 0% { -webkit-filter: grayscale(0); opacity: 1; } 10% { -webkit-filter: grayscale(1); opacity: 1; } 100% { -webkit-filter: grayscale(1); opacity: 0; } } @-moz-keyframes summoner-object-scale-intro-animation { 0% { transform: scale(1.4); } 100% { transform: scale(1); } } @-webkit-keyframes summoner-object-scale-intro-animation { 0% { transform: scale(1.4); } 100% { transform: scale(1); } } @-o-keyframes summoner-object-scale-intro-animation { 0% { transform: scale(1.4); } 100% { transform: scale(1); } } @keyframes summoner-object-scale-intro-animation { 0% { transform: scale(1.4); } 100% { transform: scale(1); } } @-moz-keyframes summoner-object-slide-intro-animation { 0% { visibility: hidden; transform: translateX(-10px); } 1% { visibility: visible; transform: translateX(-10px); } 100% { visibility: visible; transform: translateX(0px); } } @-webkit-keyframes summoner-object-slide-intro-animation { 0% { visibility: hidden; transform: translateX(-10px); } 1% { visibility: visible; transform: translateX(-10px); } 100% { visibility: visible; transform: translateX(0px); } } @-o-keyframes summoner-object-slide-intro-animation { 0% { visibility: hidden; transform: translateX(-10px); } 1% { visibility: visible; transform: translateX(-10px); } 100% { visibility: visible; transform: translateX(0px); } } @keyframes summoner-object-slide-intro-animation { 0% { visibility: hidden; transform: translateX(-10px); } 1% { visibility: visible; transform: translateX(-10px); } 100% { visibility: visible; transform: translateX(0px); } } @-moz-keyframes summoner-object-fade-intro-animation { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes summoner-object-fade-intro-animation { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes summoner-object-fade-intro-animation { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes summoner-object-fade-intro-animation { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes summoner-object-fadeout-intro-animation { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes summoner-object-fadeout-intro-animation { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes summoner-object-fadeout-intro-animation { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes summoner-object-fadeout-intro-animation { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes summoner-object-expand-initial { 0% { transform: translateX(-38px); } 100% { transform: translateX(-3px); } } @-webkit-keyframes summoner-object-expand-initial { 0% { transform: translateX(-38px); } 100% { transform: translateX(-3px); } } @-o-keyframes summoner-object-expand-initial { 0% { transform: translateX(-38px); } 100% { transform: translateX(-3px); } } @keyframes summoner-object-expand-initial { 0% { transform: translateX(-38px); } 100% { transform: translateX(-3px); } } @-moz-keyframes summoner-object-expand-final { 0% { transform: translateX(-3px); } 100% { transform: translateX(0px); } } @-webkit-keyframes summoner-object-expand-final { 0% { transform: translateX(-3px); } 100% { transform: translateX(0px); } } @-o-keyframes summoner-object-expand-final { 0% { transform: translateX(-3px); } 100% { transform: translateX(0px); } } @keyframes summoner-object-expand-final { 0% { transform: translateX(-3px); } 100% { transform: translateX(0px); } } @-moz-keyframes summoner-object-collapse-initial { 0% { transform: translateX(38px); } 100% { transform: translateX(3px); } } @-webkit-keyframes summoner-object-collapse-initial { 0% { transform: translateX(38px); } 100% { transform: translateX(3px); } } @-o-keyframes summoner-object-collapse-initial { 0% { transform: translateX(38px); } 100% { transform: translateX(3px); } } @keyframes summoner-object-collapse-initial { 0% { transform: translateX(38px); } 100% { transform: translateX(3px); } } @-moz-keyframes summoner-object-collapse-final { 0% { transform: translateX(3px); } 100% { transform: translateX(0px); } } @-webkit-keyframes summoner-object-collapse-final { 0% { transform: translateX(3px); } 100% { transform: translateX(0px); } } @-o-keyframes summoner-object-collapse-final { 0% { transform: translateX(3px); } 100% { transform: translateX(0px); } } @keyframes summoner-object-collapse-final { 0% { transform: translateX(3px); } 100% { transform: translateX(0px); } } @-moz-keyframes summoner-wrapper-expand { 0% { transform: translateX(-40px); } 100% { transform: translateX(0px); } } @-webkit-keyframes summoner-wrapper-expand { 0% { transform: translateX(-40px); } 100% { transform: translateX(0px); } } @-o-keyframes summoner-wrapper-expand { 0% { transform: translateX(-40px); } 100% { transform: translateX(0px); } } @keyframes summoner-wrapper-expand { 0% { transform: translateX(-40px); } 100% { transform: translateX(0px); } } @-moz-keyframes summoner-wrapper-collapse { 0% { transform: translateX(40px); } 100% { transform: translateX(0px); } } @-webkit-keyframes summoner-wrapper-collapse { 0% { transform: translateX(40px); } 100% { transform: translateX(0px); } } @-o-keyframes summoner-wrapper-collapse { 0% { transform: translateX(40px); } 100% { transform: translateX(0px); } } @keyframes summoner-wrapper-collapse { 0% { transform: translateX(40px); } 100% { transform: translateX(0px); } } @-moz-keyframes champion-icon-pick-snipe-magic-animation-translate { 0% { opacity: 0; transform: translateX(0px); } 20% { opacity: 1; } 80% { opacity: 0.6; } 100% { opacity: 0; transform: translateX(50px) skewY(-3deg); } } @-webkit-keyframes champion-icon-pick-snipe-magic-animation-translate { 0% { opacity: 0; transform: translateX(0px); } 20% { opacity: 1; } 80% { opacity: 0.6; } 100% { opacity: 0; transform: translateX(50px) skewY(-3deg); } } @-o-keyframes champion-icon-pick-snipe-magic-animation-translate { 0% { opacity: 0; transform: translateX(0px); } 20% { opacity: 1; } 80% { opacity: 0.6; } 100% { opacity: 0; transform: translateX(50px) skewY(-3deg); } } @keyframes champion-icon-pick-snipe-magic-animation-translate { 0% { opacity: 0; transform: translateX(0px); } 20% { opacity: 1; } 80% { opacity: 0.6; } 100% { opacity: 0; transform: translateX(50px) skewY(-3deg); } } @-moz-keyframes champion-icon-pick-snipe-fade { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes champion-icon-pick-snipe-fade { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes champion-icon-pick-snipe-fade { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } } @keyframes champion-icon-pick-snipe-fade { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes champion-icon-pick-snipe-magic-swipe { 0% { -webkit-mask-position: 10% 0%; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 0.8; } 100% { -webkit-mask-position: 80% 0%; opacity: 0; } } @-webkit-keyframes champion-icon-pick-snipe-magic-swipe { 0% { -webkit-mask-position: 10% 0%; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 0.8; } 100% { -webkit-mask-position: 80% 0%; opacity: 0; } } @-o-keyframes champion-icon-pick-snipe-magic-swipe { 0% { -webkit-mask-position: 10% 0%; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 0.8; } 100% { -webkit-mask-position: 80% 0%; opacity: 0; } } @keyframes champion-icon-pick-snipe-magic-swipe { 0% { -webkit-mask-position: 10% 0%; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 0.8; } 100% { -webkit-mask-position: 80% 0%; opacity: 0; } } @-moz-keyframes champion-icon-pick-snipe-ring-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } } @-webkit-keyframes champion-icon-pick-snipe-ring-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } } @-o-keyframes champion-icon-pick-snipe-ring-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } } @keyframes champion-icon-pick-snipe-ring-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } } @-moz-keyframes summoner-object-pick-snipe-shake { 0% { transform: translate(-1px, -1px); } 12% { transform: translate(0px, 1px); } 24% { transform: translate(1px, 0px); } 36% { transform: translate(1px, -1px); } 48% { transform: translate(1px, 1px); } 60% { transform: translate(0px, 1px); } 72% { transform: translate(-0.5px, -0.5px); } 84% { transform: translate(0.5px, -0.5px); } 96% { transform: tranlate(0px, 0.5px); } } @-webkit-keyframes summoner-object-pick-snipe-shake { 0% { transform: translate(-1px, -1px); } 12% { transform: translate(0px, 1px); } 24% { transform: translate(1px, 0px); } 36% { transform: translate(1px, -1px); } 48% { transform: translate(1px, 1px); } 60% { transform: translate(0px, 1px); } 72% { transform: translate(-0.5px, -0.5px); } 84% { transform: translate(0.5px, -0.5px); } 96% { transform: tranlate(0px, 0.5px); } } @-o-keyframes summoner-object-pick-snipe-shake { 0% { transform: translate(-1px, -1px); } 12% { transform: translate(0px, 1px); } 24% { transform: translate(1px, 0px); } 36% { transform: translate(1px, -1px); } 48% { transform: translate(1px, 1px); } 60% { transform: translate(0px, 1px); } 72% { transform: translate(-0.5px, -0.5px); } 84% { transform: translate(0.5px, -0.5px); } 96% { transform: tranlate(0px, 0.5px); } } @keyframes summoner-object-pick-snipe-shake { 0% { transform: translate(-1px, -1px); } 12% { transform: translate(0px, 1px); } 24% { transform: translate(1px, 0px); } 36% { transform: translate(1px, -1px); } 48% { transform: translate(1px, 1px); } 60% { transform: translate(0px, 1px); } 72% { transform: translate(-0.5px, -0.5px); } 84% { transform: translate(0.5px, -0.5px); } 96% { transform: tranlate(0px, 0.5px); } } .spell-select-flyout .spell-information .spell-title, .spell-select-flyout .spell-information .spell-locked-description { font-family: var(--font-display); } .spell-select-flyout .spell-information .spell-description, .spell-select-flyout .spell-information .spell-cooldown { font-family: var(--font-body); } .spell-select-flyout .spell-information .spell-title, .spell-select-flyout .spell-information .spell-locked-description { font-family: var(--font-display); } .spell-select-flyout .spell-information .spell-description, .spell-select-flyout .spell-information .spell-cooldown { font-family: var(--font-body); } .spell-select-flyout .spell-information .spell-title, .spell-select-flyout .spell-information .spell-locked-description, .spell-select-flyout .spell-information .spell-description, .spell-select-flyout .spell-information .spell-cooldown { -webkit-user-select: none; } .spell-select-flyout .spell-information .spell-title, .spell-select-flyout .spell-information .spell-locked-description, .spell-select-flyout .spell-information .spell-description, .spell-select-flyout .spell-information .spell-cooldown { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .spell-select-flyout .spell-information .spell-title, .spell-select-flyout .spell-information .spell-locked-description { text-transform: uppercase; } .spell-select-flyout .spell-information .spell-title:lang(ko-kr), .spell-select-flyout .spell-information .spell-locked-description:lang(ko-kr), .spell-select-flyout .spell-information .spell-title:lang(ja-jp), .spell-select-flyout .spell-information .spell-locked-description:lang(ja-jp), .spell-select-flyout .spell-information .spell-title:lang(tr-tr), .spell-select-flyout .spell-information .spell-locked-description:lang(tr-tr), .spell-select-flyout .spell-information .spell-title:lang(el-gr), .spell-select-flyout .spell-information .spell-locked-description:lang(el-gr), .spell-select-flyout .spell-information .spell-title:lang(th-th), .spell-select-flyout .spell-information .spell-locked-description:lang(th-th), .spell-select-flyout .spell-information .spell-title:lang(zh-tw), .spell-select-flyout .spell-information .spell-locked-description:lang(zh-tw) { text-transform: none; } .spell-select-flyout .spell-information .spell-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .spell-select-flyout .spell-information .spell-title:lang(ar-ae) { letter-spacing: 0; } .spell-select-flyout .spell-information .spell-locked-description { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .spell-select-flyout .spell-information .spell-locked-description:lang(ar-ae) { letter-spacing: 0; } .spell-select-flyout .spell-information .spell-description, .spell-select-flyout .spell-information .spell-cooldown { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .spell-select-flyout .spell-information .spell-description:lang(ja-jp), .spell-select-flyout .spell-information .spell-cooldown:lang(ja-jp) { font-size: 13px; } .spell-select-flyout .spell-information .spell-description:lang(ar-ae), .spell-select-flyout .spell-information .spell-cooldown:lang(ar-ae) { letter-spacing: 0; } .summoner-spell-container { display: flex; margin-left: 5px; position: relative; } .spell-select-flyout { width: 270px; height: 430px; display: flex; flex-direction: column; } .spell-select-flyout .spell-information { display: flex; flex-direction: column; justify-content: center; height: 213px; text-align: center; padding: 18px; box-sizing: border-box; -webkit-user-select: none; cursor: default; } .spell-select-flyout .spell-information .spell-title { position: relative; top: 0; color: #f0e6d2; margin-top: -6px; margin-bottom: 1px; animation: SummonerSpellsTitleAnimation 0.763s; animation-fill-mode: both; } .spell-select-flyout .spell-information .spell-locked-description { color: #a09b8c; margin-top: 2px; } .spell-select-flyout .spell-information .spell-description, .spell-select-flyout .spell-information .spell-cooldown { position: relative; top: 0; color: #a09b8c; margin-top: 6px; animation: SummonerSpellsDescriptionAnimation 0.733s; animation-fill-mode: both; } .spell-select-flyout .spell-divider { display: flex; width: 20%; height: 0; border-bottom: thin solid #463714; margin: 0 auto; transition: 200ms all ease-out; } .spell-select-flyout .summoner-spells { position: relative; display: flex; flex: 1; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 16px 18px; box-sizing: border-box; width: 100%; animation: SummonerSpellsSpellsAnimation 0.633s; animation-fill-mode: both; -webkit-user-select: none; } .spell-select-flyout.show .spell-title, .spell-select-flyout.show .spell-description, .spell-select-flyout.show .spell-cooldown, .spell-select-flyout.show .summoner-spells { top: 0; } .spell-select-flyout.show .spell-divider { width: 100%; } .no-large-area-animations .summoner-spells { animation: none; } .no-large-area-animations .spell-divider { transition: none; } @-moz-keyframes SummonerSpellsSpellsAnimation { 0% { animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0); transform: translateY(21px); opacity: 0; } 31.579% { animation-timing-function: cubic-bezier(0, 0, 0, 1); transform: translateY(16.153241579493056px); opacity: 0.4; } 100% { animation-timing-function: cubic-bezier(0, 0, 0, 1); transform: translateY(0); opacity: 1; } } @-webkit-keyframes SummonerSpellsSpellsAnimation { 0% { animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0); transform: translateY(21px); opacity: 0; } 31.579% { animation-timing-function: cubic-bezier(0, 0, 0, 1); transform: translateY(16.153241579493056px); opacity: 0.4; } 100% { animation-timing-function: cubic-bezier(0, 0, 0, 1); transform: translateY(0); opacity: 1; } } @-o-keyframes SummonerSpellsSpellsAnimation { 0% { animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0); transform: translateY(21px); opacity: 0; } 31.579% { animation-timing-function: cubic-bezier(0, 0, 0, 1); transform: translateY(16.153241579493056px); opacity: 0.4; } 100% { animation-timing-function: cubic-bezier(0, 0, 0, 1); transform: translateY(0); opacity: 1; } } @keyframes SummonerSpellsSpellsAnimation { 0% { animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0); transform: translateY(21px); opacity: 0; } 31.579% { animation-timing-function: cubic-bezier(0, 0, 0, 1); transform: translateY(16.153241579493056px); opacity: 0.4; } 100% { animation-timing-function: cubic-bezier(0, 0, 0, 1); transform: translateY(0); opacity: 1; } } @-moz-keyframes SummonerSpellsDescriptionAnimation { 0% { transform: translateY(14px); opacity: 0; } 15.921824921135647% { transform: translateY(14px); animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0; } 78.98020662460569% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } @-webkit-keyframes SummonerSpellsDescriptionAnimation { 0% { transform: translateY(14px); opacity: 0; } 15.921824921135647% { transform: translateY(14px); animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0; } 78.98020662460569% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } @-o-keyframes SummonerSpellsDescriptionAnimation { 0% { transform: translateY(14px); opacity: 0; } 15.921824921135647% { transform: translateY(14px); animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0; } 78.98020662460569% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } @keyframes SummonerSpellsDescriptionAnimation { 0% { transform: translateY(14px); opacity: 0; } 15.921824921135647% { transform: translateY(14px); animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0; } 78.98020662460569% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } @-moz-keyframes SummonerSpellsTitleAnimation { 0% { transform: translateY(13px); opacity: 0; } 21.214802144095852% { transform: translateY(13px); animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0; } 84.24335960901782% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } @-webkit-keyframes SummonerSpellsTitleAnimation { 0% { transform: translateY(13px); opacity: 0; } 21.214802144095852% { transform: translateY(13px); animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0; } 84.24335960901782% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } @-o-keyframes SummonerSpellsTitleAnimation { 0% { transform: translateY(13px); opacity: 0; } 21.214802144095852% { transform: translateY(13px); animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0; } 84.24335960901782% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } @keyframes SummonerSpellsTitleAnimation { 0% { transform: translateY(13px); opacity: 0; } 21.214802144095852% { transform: translateY(13px); animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0; } 84.24335960901782% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } .champion-select .summoner-timer .timer { font-family: var(--font-display); } .champion-select .summoner-timer .timer { -webkit-user-select: none; } .champion-select .summoner-timer .timer { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .champion-select .summoner-timer .timer { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .champion-select .summoner-timer .timer { font-size: 24px; font-weight: 700; font-style: italic; letter-spacing: 0.05em; } .champion-select .summoner-timer .timer:lang(ar-ae) { letter-spacing: 0; } .champion-select .summoner-timer { position: absolute; top: 0px; height: 0px; width: 52px; } .champion-select .summoner-timer .timer { background: none; font-style: normal; display: flex; position: relative; line-height: 77px; font-size: 32px; color: #f0e6d2; -webkit-text-fill-color: initial; } .champion-select .summoner-timer .timer.right { flex-direction: row-reverse; } .champion-select .summoner-timer .timer .action-pointer { background-repeat: no-repeat; background-size: contain; width: 8px; position: relative; } .champion-select .summoner-timer .timer .action-pointer.left { background-image: url("/fe/lol-champ-select/images/summoner-object/action-pointer-blue.png"); margin-right: 5px; top: 31px; transform: scaleX(-1); } .champion-select .summoner-timer .timer .action-pointer.right { background-image: url("/fe/lol-champ-select/images/summoner-object/action-pointer-red.png"); margin-left: 5px; top: 31px; } .team-bans { display: flex; top: 30px; position: absolute; } .team-bans.left { right: 750px; } .team-bans.right { left: 750px; } .team-bans.right .bans-container { justify-content: flex-start; flex-direction: row; } .team-bans .bans-container { justify-content: flex-end; display: flex; flex-direction: row-reverse; } .team-bans.left.flip-my-team-bans .bans-container { flex-direction: row; } .team-bans-item { display: block; width: 30px; height: 30px; margin: 0 5px; box-sizing: border-box; position: relative; border: thin solid #1e282d; background-color: rgba(1,10,19,0.5); background-image: url("/fe/lol-champ-select/images/team-bans/icon-ban-small.png"); background-position: center; background-size: 66.7% 66.7%; background-repeat: no-repeat; } .team-bans-item .team-bans-champion-icon { width: 28px; height: 28px; position: relative; background-size: contain; animation-duration: 0.5s; animation-timing-function: ease-out; animation-fill-mode: backwards; } .team-bans-item .team-bans-champion-icon.is-completed { animation-name: ban-tile-champion-animation; } .enemy-ban-index-0 .team-bans-champion-icon { animation-delay: 0.5s; } .enemy-ban-index-1 .team-bans-champion-icon { animation-delay: 1.15s; } .enemy-ban-index-2 .team-bans-champion-icon { animation-delay: 1.8s; } .enemy-ban-index-3 .team-bans-champion-icon { animation-delay: 2.45s; } .enemy-ban-index-4 .team-bans-champion-icon { animation-delay: 3.1s; } .enemy-ban-index-5 .team-bans-champion-icon { animation-delay: 3.75s; } @-moz-keyframes ban-tile-champion-animation { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes ban-tile-champion-animation { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: scale(1); } } @-o-keyframes ban-tile-champion-animation { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: scale(1); } } @keyframes ban-tile-champion-animation { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: scale(1); } } .team-boost { direction: ltr; position: absolute; top: 400px; left: 50%; transform: translateX(-50%); } .team-boost-content-wrapper { display: flex; padding: 0 0 0 24px; } .team-boost-rp-icon { position: absolute; top: -4px; left: -4px; background: url("/fe/lol-static-assets/svg/battle-boost-icon-yuma.svg") no-repeat center center; background-size: contain; width: 24px; height: 24px; } .team-boost-notification h3 { font-family: var(--font-display); } .team-boost-notification, .team-boost-notification table { font-family: var(--font-body); } .team-boost-notification, .team-boost-notification h3, .team-boost-notification table { -webkit-user-select: none; } .team-boost-notification, .team-boost-notification h3, .team-boost-notification table { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .team-boost-notification h3 { text-transform: uppercase; } .team-boost-notification h3:lang(ko-kr), .team-boost-notification h3:lang(ja-jp), .team-boost-notification h3:lang(tr-tr), .team-boost-notification h3:lang(el-gr), .team-boost-notification h3:lang(th-th), .team-boost-notification h3:lang(zh-tw) { text-transform: none; } .team-boost-notification h3 { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .team-boost-notification h3:lang(ar-ae) { letter-spacing: 0; } .team-boost-notification { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .team-boost-notification:lang(ar-ae) { letter-spacing: 0; } .team-boost-notification table { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .team-boost-notification table:lang(ja-jp) { font-size: 13px; } .team-boost-notification table:lang(ar-ae) { letter-spacing: 0; } .team-boost-notification table .value { color: #f0e6d2; } .team-boost-notification { direction: ltr; text-align: center; margin-bottom: 30px; } .team-boost-notification .boost-description { padding-bottom: 10px; } .team-boost-notification .boost-details { padding-top: 10px; } .team-boost-notification h3 { margin-bottom: 10px; } .team-boost-notification p { margin: 3px; } .team-boost-notification hr { border-color: #785a28; } .team-boost-notification table { width: 100%; } .team-boost-notification table .label { text-align: left; } .team-boost-notification table .value { text-align: right; } .team-boost-notification table .total td { border-top: thin solid #3c3c41; padding-top: 5px; } .champion-select .timer-status .message, .champion-select .timer-status .message.local-player-acting, .champion-select .timer-status .timer-container .timer, .champion-select .timer-status .small-timer { font-family: var(--font-display); } .champion-select .timer-status .message, .champion-select .timer-status .message.local-player-acting, .champion-select .timer-status .timer-container .timer, .champion-select .timer-status .small-timer { -webkit-user-select: none; } .champion-select .timer-status .message, .champion-select .timer-status .message.local-player-acting, .champion-select .timer-status .timer-container .timer, .champion-select .timer-status .small-timer { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .champion-select .timer-status .message, .champion-select .timer-status .message.local-player-acting, .champion-select .timer-status .timer-container .timer, .champion-select .timer-status .small-timer { text-transform: uppercase; } .champion-select .timer-status .message:lang(ko-kr), .champion-select .timer-status .message.local-player-acting:lang(ko-kr), .champion-select .timer-status .timer-container .timer:lang(ko-kr), .champion-select .timer-status .small-timer:lang(ko-kr), .champion-select .timer-status .message:lang(ja-jp), .champion-select .timer-status .message.local-player-acting:lang(ja-jp), .champion-select .timer-status .timer-container .timer:lang(ja-jp), .champion-select .timer-status .small-timer:lang(ja-jp), .champion-select .timer-status .message:lang(tr-tr), .champion-select .timer-status .message.local-player-acting:lang(tr-tr), .champion-select .timer-status .timer-container .timer:lang(tr-tr), .champion-select .timer-status .small-timer:lang(tr-tr), .champion-select .timer-status .message:lang(el-gr), .champion-select .timer-status .message.local-player-acting:lang(el-gr), .champion-select .timer-status .timer-container .timer:lang(el-gr), .champion-select .timer-status .small-timer:lang(el-gr), .champion-select .timer-status .message:lang(th-th), .champion-select .timer-status .message.local-player-acting:lang(th-th), .champion-select .timer-status .timer-container .timer:lang(th-th), .champion-select .timer-status .small-timer:lang(th-th), .champion-select .timer-status .message:lang(zh-tw), .champion-select .timer-status .message.local-player-acting:lang(zh-tw), .champion-select .timer-status .timer-container .timer:lang(zh-tw), .champion-select .timer-status .small-timer:lang(zh-tw) { text-transform: none; } .champion-select .timer-status .message { text-transform: none; } .champion-select .timer-status .timer-container .timer { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .champion-select .timer-status .timer-container .timer:lang(ar-ae) { letter-spacing: 0; } .champion-select .timer-status .message.local-player-acting, .champion-select .timer-status .small-timer { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .champion-select .timer-status .message.local-player-acting:lang(ar-ae), .champion-select .timer-status .small-timer:lang(ar-ae) { letter-spacing: 0; } .champion-select .timer-status .message { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .champion-select .timer-status .message:lang(ar-ae) { letter-spacing: 0; } .champion-select .timer-status .message { letter-spacing: 0.025em; } .champion-select .timer-status .message:lang(ar-ae) { letter-spacing: 0; } .champion-select .timer-status { width: 100%; height: 68px; margin: 0 auto; position: relative; text-shadow: 0 0 5px rgba(1,10,19,0.8); display: flex; flex-direction: column; align-items: center; transform: translateZ(0); } .champion-select .timer-status .message { direction: ltr; font-style: italic; font-size: 22px; line-height: 20px; margin: 0 80px; text-align: center; color: #a09b8c; text-transform: none; margin-top: 20px; width: 100%; min-height: 20px; } .champion-select .timer-status .message.local-player-acting { font-size: 28px; line-height: 20px; font-style: normal; } .champion-select .timer-status .metal-work { position: absolute; top: 34px; left: -61px; } .champion-select .timer-status .metal-work .cls-1 { stroke: #000; stroke-opacity: 0.5; stroke-width: 1px; } .champion-select .timer-status .metal-work .cls-1 .stop1 { stop-color: #463714; } .champion-select .timer-status .metal-work .cls-1 .stop2 { stop-color: #785a28; } .champion-select .timer-status.expanded-header .metal-work { top: 54px; } .champion-select .timer-status.expanded-header .timer-container { margin-top: 11px; } .champion-select .timer-status .metal-work.right { left: 360px; transform: scaleX(-1); } .champion-select .timer-status .timer-container { display: flex; align-items: center; width: 578px; min-height: 42px; } .champion-select .timer-status .timer-container .burnout-timer { height: 5px; width: 245px; position: relative; margin-top: 5px; margin-left: 1px; } .champion-select .timer-status .timer-container .burnout-timer.left { margin-left: 3px; } .champion-select .timer-status .timer-container .burnout-timer.blue { background-color: rgba(10,150,170,0.2); } .champion-select .timer-status .timer-container .burnout-timer.red { background-color: rgba(190,30,55,0.2); } .champion-select .timer-status .timer-container .burnout-timer-bar { top: 0; left: 0; position: absolute; height: 100%; width: 100%; background-image: linear-gradient(to right, #690014 0, #be1e37 50%, #fe7350 85%); background-repeat: no-repeat; background-size: 100% 100%; transform: scaleX(0); transform-origin: left; } .champion-select .timer-status .timer-container .burnout-timer.left .burnout-timer-bar { transform-origin: right; } .champion-select .timer-status .timer-container .burnout-timer.blue .burnout-timer-bar { background-image: linear-gradient(to right, #005a82 10%, #0a96aa 70%, #cdfafa 125%); } .champion-select .timer-status .timer-container .burnout-timer.left.blue .burnout-timer-bar { background-image: linear-gradient(to left, #005a82 10%, #0a96aa 70%, #cdfafa 125%); } .champion-select .timer-status .timer-container .burnout-timer.left.red .burnout-timer-bar { background-image: linear-gradient(to left, #690014 0, #be1e37 50%, #fe7350 85%); } .champion-select .timer-status .timer-container .burnout-timer-glow { top: 0; left: 0; position: absolute; height: 100%; width: 100%; background-image: linear-gradient(to right, #690014 0, #be1e37 50%, #fe7350 85%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-filter: blur(5px); transform: scaleX(0); transform-origin: left; } .champion-select .timer-status .timer-container .burnout-timer.left .burnout-timer-glow { transform-origin: right; } .champion-select .timer-status .timer-container .burnout-timer.blue .burnout-timer-glow { background-image: linear-gradient(to right, #005a82 10%, #0a96aa 70%, #cdfafa 125%); } .champion-select .timer-status .timer-container .burnout-timer.left.blue .burnout-timer-glow { background-image: linear-gradient(to left, #005a82 10%, #0a96aa 70%, #cdfafa 125%); } .champion-select .timer-status .timer-container .burnout-timer.left.red .burnout-timer-glow { background-image: linear-gradient(to left, #690014 0, #be1e37 50%, #fe7350 85%); } .champion-select .timer-status .timer-container .timer { width: 82px; position: relative; text-align: center; font-style: normal; color: #f0e6d2; -webkit-text-fill-color: initial; } .champion-select .timer-status .small-timer { position: absolute; text-align: center; font-style: normal; color: #f0e6d2; -webkit-text-fill-color: initial; left: 645px; top: 10px; } .champion-select .timer-status.timer-pulse .timer-container .timer::before { content: ''; border-radius: 50%; height: 56px; width: 52px; position: absolute; top: calc(50% - 28px); left: calc(50% - 26px); background: radial-gradient(ellipse at center, #0a95aa 0%, rgba(10,149,170,0.98) 1%, rgba(10,149,170,0.36) 32%, rgba(10,149,170,0) 68%); animation: timerStatusTimerGlow 1s linear forwards; } .champion-select .timer-status.timer-pulse .timer-container .timer::after { color: #be1e37; content: attr(data-time); position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; animation: timerStatusTimerPulse 1s cubic-bezier(0, 0, 0, 1) forwards; } .champion-select .timer-status::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: 815px auto; background-repeat: no-repeat; background-image: url("/fe/lol-champ-select/images/config/linework-top-glow.png"); background-position: center -203px; } .champion-select.is-banning-now .timer-status, .champion-select.is-banning-now .timer-status::before { background-position: center -100px; } .champion-select.is-picking-now.pick-screen .timer-status, .champion-select.is-picking-now.pick-screen .timer-status::before { background-position: center 0px; } .champion-select.is-banning-now.timer-less-than-11-seconds .timer-status::before, .champion-select.is-picking-now.timer-less-than-11-seconds .timer-status::before { animation-name: timerStatusTimerGlowMultiPulse; animation-duration: 1s; animation-delay: 0s; animation-iteration-count: 10; animation-timing-function: cubic-bezier(0.46, 0.19, 0.7, 0.98); } @-moz-keyframes timerStatusTimerPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } @-webkit-keyframes timerStatusTimerPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } @-o-keyframes timerStatusTimerPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } @keyframes timerStatusTimerPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } @-moz-keyframes timerStatusTimerGlow { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes timerStatusTimerGlow { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes timerStatusTimerGlow { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes timerStatusTimerGlow { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes timerStatusTimerGlowMultiPulse { 0% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 1; } } @-webkit-keyframes timerStatusTimerGlowMultiPulse { 0% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 1; } } @-o-keyframes timerStatusTimerGlowMultiPulse { 0% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes timerStatusTimerGlowMultiPulse { 0% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 1; } } @-moz-keyframes burnoutTimerBackgroundSize { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @-webkit-keyframes burnoutTimerBackgroundSize { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @-o-keyframes burnoutTimerBackgroundSize { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @keyframes burnoutTimerBackgroundSize { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @-moz-keyframes burnoutTimerBackgroundSize2 { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @-webkit-keyframes burnoutTimerBackgroundSize2 { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @-o-keyframes burnoutTimerBackgroundSize2 { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @keyframes burnoutTimerBackgroundSize2 { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .champion-trade-ring-spinner { display: flex; position: absolute; } .champion-trade-ring-spinner.animated { top: -2px; left: -3px; width: 40px; height: 40px; animation: summoner-object-spin 1s cubic-bezier(0, 0, 0.43, 0.7), summoner-object-spin 1.55s linear infinite; animation-delay: 0s, 1s; background: url("/fe/lol-champ-select/images/summoner-object/player-object-spinner-gold.png") no-repeat; background-size: 40px 40px; object-fit: contain; } .champion-trade-ring-spinner.not-animated { top: -2px; left: -2px; width: 35px; height: 35px; background-size: 100%; background-repeat: no-repeat; background-image: url("/fe/lol-champ-select/images/summoner-object/player-ring-bright-gold.png"); background-size: 35px 35px; object-fit: contain; } .champion-trade-ring-background { left: 0px; top: 0px; height: 35px; width: 35px; background-size: 100%; background-repeat: no-repeat; background-image: url("/fe/lol-champ-select/images/summoner-object/player-object-ring.png"); position: absolute; pointer-events: none; } .trade-button { position: absolute; top: 35px; left: 35px; } .trade-button .frame-color { top: 35px; left: 35px; background-image: none; background-color: #222; box-sizing: border-box; overflow: hidden; border-radius: 50%; } .trade-button .interactive .frame-color:hover { top: 35px; left: 35px; background-image: none; background-color: #2a2a2a; overflow: hidden; border-radius: 50%; } .trade-button .icon { -webkit-mask-image: url("/fe/lol-champ-select/images/summoner/up-down.svg"); -webkit-mask-size: 70% 70%, auto, contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; background-size: contain; background-color: #c8aa6e; cursor: pointer; } .trade-button .champion-trade-button-active-trade { width: 35px; height: 35px; pointer-events: none; } .trade-button .champion-trade-button { width: 35px; height: 35px; pointer-events: all; transition: all 300ms ease-in-out; } .trade-button .champion-trade-button:hover { transition: all 300ms ease-in-out; } .trade-button .champion-trade-button:hover .icon { background-color: #785a28; } @-moz-keyframes summoner-object-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes summoner-object-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-o-keyframes summoner-object-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes summoner-object-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .pick-order-swap-ring-spinner { display: flex; position: absolute; } .pick-order-swap-ring-spinner.animated { top: 0px; right: 0px; width: 50px; height: 50px; object-fit: contain; animation: pick-order-swap-spin 1s cubic-bezier(0, 0, 0.43, 0.7), pick-order-swap-spin 1.55s linear infinite; animation-delay: 0s, 1s; background: url("/fe/lol-champ-select/images/summoner-object/player-object-spinner-gold.png") no-repeat; background-size: 50px 50px; } .pick-order-swap-ring-spinner.not-animated { top: 0px; left: 0px; height: 50px; width: 50px; background-size: 100%; background-repeat: no-repeat; background-image: url("/fe/lol-champ-select/images/summoner-object/player-ring-bright-gold.png"); } .pick-order-swap-ring-spinner.removed { display: none; } .swap-button { position: absolute; top: 15px; left: 5px; } .swap-button .frame-color { height: 100%; width: 100%; overflow: hidden; padding: 3px; background-image: none; background-color: rgba(73,73,73,0); box-sizing: border-box; } .swap-button .inner-mask { display: none; } .swap-button .inner-shadow { display: none; } .swap-button .outer-mask { box-shadow: none; } .swap-button .interactive .frame-color:hover { background-image: none; background-color: rgba(172,170,54,0); overflow: hidden; border-radius: 50%; filter: drop-shadow(0px 0px 7px rgba(200,170,110,0.9)); } .swap-button .icon { -webkit-mask-image: url("/fe/lol-champ-select/images/summoner/up-down.svg"); -webkit-mask-size: 70% 70%, auto, contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; background-size: contain; background-color: #c8aa6e; cursor: pointer; } .swap-button .position-swap-button-active-swap { width: 50px; height: 50px; pointer-events: all; } .swap-button .position-swap-button { width: 50px; height: 50px; pointer-events: all; transition: all 300ms ease-in-out; } .swap-button .position-swap-button:hover { transition: all 300ms ease-in-out; } @-moz-keyframes pick-order-swap-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes pick-order-swap-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-o-keyframes pick-order-swap-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pick-order-swap-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .ward-skin-select-flyout .ward-skin-details .ward-skin-name { font-family: var(--font-display); } .ward-skin-select-flyout .ward-skin-details .ward-skin-name { font-family: var(--font-display); } .ward-skin-select-flyout .ward-skin-details .ward-skin-name { -webkit-user-select: none; } .ward-skin-select-flyout .ward-skin-details .ward-skin-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .ward-skin-select-flyout .ward-skin-details .ward-skin-name { text-transform: uppercase; } .ward-skin-select-flyout .ward-skin-details .ward-skin-name:lang(ko-kr), .ward-skin-select-flyout .ward-skin-details .ward-skin-name:lang(ja-jp), .ward-skin-select-flyout .ward-skin-details .ward-skin-name:lang(tr-tr), .ward-skin-select-flyout .ward-skin-details .ward-skin-name:lang(el-gr), .ward-skin-select-flyout .ward-skin-details .ward-skin-name:lang(th-th), .ward-skin-select-flyout .ward-skin-details .ward-skin-name:lang(zh-tw) { text-transform: none; } .ward-skin-select-flyout .ward-skin-details .ward-skin-name { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .ward-skin-select-flyout .ward-skin-details .ward-skin-name:lang(ar-ae) { letter-spacing: 0; } .ward-skin-select-flyout { width: 270px; height: 360px; display: flex; flex-direction: column; } .ward-skin-select-flyout .ward-skin-details { height: 172px; background-size: cover; position: relative; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5) inset; border-bottom: thin solid #463714; animation: WardSkinDetailsAnimation 0.663s; } .ward-skin-select-flyout .ward-skin-details .ward-skin-image { height: 160px; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); } .ward-skin-select-flyout .ward-skin-details .ward-skin-shadow { height: 180px; position: absolute; bottom: -6px; left: calc(50% - 3px); transform: translateX(-50%); } .ward-skin-select-flyout .ward-skin-details .ward-skin-name { position: absolute; bottom: 7px; width: 100%; text-align: center; animation: WardSkinNameAnimation 0.763s; } .ward-skin-select-flyout .ward-skins { position: relative; display: flex; flex: 1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; box-sizing: border-box; width: calc(100% - 16px); animation: WardSkinAnimation 0.633s; -webkit-user-select: none; margin: 16px 8px; padding-left: 12px; } .ward-skin-select-flyout .ward-skins .flyout-selector-button-container { padding: 2px; } .ward-skin-select-flyout .ward-skins .flyout-selector-button-container .flyout-selector-button { box-shadow: 0 0 2px 0 #000 inset; background: #1e2328; } .ward-skin-select-flyout .ward-skins .flyout-selector-button-container .flyout-selector-button .flyout-selector-button-image { box-sizing: border-box; padding: 3px; } .no-large-area-animations .ward-skins { animation: none; } .no-large-area-animations .ward-skin-details { animation: none; } @-moz-keyframes WardSkinAnimation { 0% { animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0); top: 21px; opacity: 0; } 31.579% { animation-timing-function: cubic-bezier(0, 0, 0, 1); top: 16.153241579493056px; opacity: 0.4; } 100% { animation-timing-function: cubic-bezier(0, 0, 0, 1); top: 0px; opacity: 1; } } @-webkit-keyframes WardSkinAnimation { 0% { animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0); top: 21px; opacity: 0; } 31.579% { animation-timing-function: cubic-bezier(0, 0, 0, 1); top: 16.153241579493056px; opacity: 0.4; } 100% { animation-timing-function: cubic-bezier(0, 0, 0, 1); top: 0px; opacity: 1; } } @-o-keyframes WardSkinAnimation { 0% { animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0); top: 21px; opacity: 0; } 31.579% { animation-timing-function: cubic-bezier(0, 0, 0, 1); top: 16.153241579493056px; opacity: 0.4; } 100% { animation-timing-function: cubic-bezier(0, 0, 0, 1); top: 0px; opacity: 1; } } @keyframes WardSkinAnimation { 0% { animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0); top: 21px; opacity: 0; } 31.579% { animation-timing-function: cubic-bezier(0, 0, 0, 1); top: 16.153241579493056px; opacity: 0.4; } 100% { animation-timing-function: cubic-bezier(0, 0, 0, 1); top: 0px; opacity: 1; } } @-moz-keyframes WardSkinDetailsAnimation { 0% { animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0); opacity: 0; } 31.579% { animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0.4; } 100% { animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 1; } } @-webkit-keyframes WardSkinDetailsAnimation { 0% { animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0); opacity: 0; } 31.579% { animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0.4; } 100% { animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 1; } } @-o-keyframes WardSkinDetailsAnimation { 0% { animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0); opacity: 0; } 31.579% { animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0.4; } 100% { animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 1; } } @keyframes WardSkinDetailsAnimation { 0% { animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0); opacity: 0; } 31.579% { animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0.4; } 100% { animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 1; } } @-moz-keyframes WardSkinNameAnimation { 0% { bottom: 0px; opacity: 0; } 21.214802144095852% { bottom: 0px; animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0; } 84.24335960901782% { bottom: 7px; opacity: 1; } 100% { bottom: 7px; opacity: 1; } } @-webkit-keyframes WardSkinNameAnimation { 0% { bottom: 0px; opacity: 0; } 21.214802144095852% { bottom: 0px; animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0; } 84.24335960901782% { bottom: 7px; opacity: 1; } 100% { bottom: 7px; opacity: 1; } } @-o-keyframes WardSkinNameAnimation { 0% { bottom: 0px; opacity: 0; } 21.214802144095852% { bottom: 0px; animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0; } 84.24335960901782% { bottom: 7px; opacity: 1; } 100% { bottom: 7px; opacity: 1; } } @keyframes WardSkinNameAnimation { 0% { bottom: 0px; opacity: 0; } 21.214802144095852% { bottom: 0px; animation-timing-function: cubic-bezier(0, 0, 0, 1); opacity: 0; } 84.24335960901782% { bottom: 7px; opacity: 1; } 100% { bottom: 7px; opacity: 1; } } .ward-skin-container { display: inline-block; margin: 0 5px; width: 37px; height: 37px; } .ward-skin-container .flyout-selector-trigger-button { width: 37px; height: 37px; margin: 0; } .ward-skin-container .flyout-selector-trigger-button.disabled { -webkit-filter: brightness(75%); } .ward-skin-container .flyout-selector-trigger-button .selection-button-image { width: 37px; height: 37px; background-size: contain; object-fit: contain; } .new-selection-icon.ward-skin, .old-selection-icon.ward-skin { width: 39px; height: 39px; border: thin solid #3c3c41; } .new-selection-icon.ward-skin .icon-wrapper .selection-icon-img, .old-selection-icon.ward-skin .icon-wrapper .selection-icon-img { background-size: contain; display: block; object-fit: contain; } .vote-reveal-text, .vote-reveal-text-glow, .vote-reveal-champion-name { font-family: var(--font-display); } .vote-reveal-text, .vote-reveal-text-glow, .vote-reveal-champion-name { -webkit-user-select: none; } .vote-reveal-text, .vote-reveal-text-glow, .vote-reveal-champion-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .vote-reveal-text, .vote-reveal-text-glow, .vote-reveal-champion-name { text-transform: uppercase; } .vote-reveal-text:lang(ko-kr), .vote-reveal-text-glow:lang(ko-kr), .vote-reveal-champion-name:lang(ko-kr), .vote-reveal-text:lang(ja-jp), .vote-reveal-text-glow:lang(ja-jp), .vote-reveal-champion-name:lang(ja-jp), .vote-reveal-text:lang(tr-tr), .vote-reveal-text-glow:lang(tr-tr), .vote-reveal-champion-name:lang(tr-tr), .vote-reveal-text:lang(el-gr), .vote-reveal-text-glow:lang(el-gr), .vote-reveal-champion-name:lang(el-gr), .vote-reveal-text:lang(th-th), .vote-reveal-text-glow:lang(th-th), .vote-reveal-champion-name:lang(th-th), .vote-reveal-text:lang(zh-tw), .vote-reveal-text-glow:lang(zh-tw), .vote-reveal-champion-name:lang(zh-tw) { text-transform: none; } .vote-reveal-champion-name { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .vote-reveal-champion-name:lang(ar-ae) { letter-spacing: 0; } .vote-reveal-text, .vote-reveal-text-glow { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .vote-reveal-text:lang(ar-ae), .vote-reveal-text-glow:lang(ar-ae) { letter-spacing: 0; } .vote-reveal { position: absolute; width: 400px; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 440px; text-align: center; } .vote-reveal-text, .vote-reveal-text-glow { color: #0596aa; letter-spacing: 0.2em; white-space: nowrap; } .vote-reveal-champion-name { letter-spacing: 0.2em; white-space: nowrap; } .text-glow { width: 100%; position: absolute; top: 0; left: 0; text-shadow: 0 0 8px #fff, 0 0 10px #fff; opacity: 0; } .vote-reveal-champion-name-wrapper { display: flex; flex-direction: row; justify-content: center; align-items: center; } .vote-reveal-champion-name-wrapper .vote-reveal-champion-name-text { position: relative; } .vote-reveal-champion-name-wrapper .line { width: 50%; height: 2px; flex: 1 0; } .vote-reveal-champion-name-wrapper .line.line-left { background: linear-gradient(to left, rgba(0,0,0,0) 0, #785a28 50%); } .vote-reveal-champion-name-wrapper .line.line-right { background: linear-gradient(to right, rgba(0,0,0,0) 0, #785a28 50%); } .vote-reveal.visible .text-glow { animation-name: fadeOut1to0; animation-duration: 0.7s; animation-delay: 0.2s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77); } .vote-reveal.visible .vote-reveal-label { animation-name: scaleDownTextIntro, fadeIn0to1; animation-duration: 0.4s; animation-delay: 0s; animation-timing-function: cubic-bezier(1, 0, 1, 1), linear; } @-moz-keyframes scaleDownTextIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @-webkit-keyframes scaleDownTextIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @-o-keyframes scaleDownTextIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes scaleDownTextIntro { 0% { transform: scale(1.5); } 100% { transform: scale(1); } } @-moz-keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut1to0 { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn0to1 { 0% { opacity: 0; } 100% { opacity: 1; } }