.mission-tracker-component .mission-tray-header .mission-tray-title { font-family: var(--font-display); } .mission-tracker-component .mission-tray-header .mission-tray-title { -webkit-user-select: none; } .mission-tracker-component .mission-tray-header .mission-tray-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-tracker-component .mission-tray-header .mission-tray-title { text-transform: uppercase; } .mission-tracker-component .mission-tray-header .mission-tray-title:lang(ko-kr), .mission-tracker-component .mission-tray-header .mission-tray-title:lang(ja-jp), .mission-tracker-component .mission-tray-header .mission-tray-title:lang(tr-tr), .mission-tracker-component .mission-tray-header .mission-tray-title:lang(el-gr), .mission-tracker-component .mission-tray-header .mission-tray-title:lang(th-th), .mission-tracker-component .mission-tray-header .mission-tray-title:lang(zh-tw) { text-transform: none; } .mission-tracker-component .mission-tray-header .mission-tray-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .mission-tracker-component { direction: ltr; -webkit-user-select: none; width: 408px; height: 532px; cursor: default; display: flex; flex-direction: column; background: #010a13; border: 1px solid #1e282d; } .mission-tracker-component .mission-tray-header { display: flex; align-items: center; justify-content: center; width: 408px; height: 42px; flex: 1 1 auto; border-bottom: 1px solid #463714; background: #010a13; overflow: hidden; } .mission-tracker-component .mission-tray-header .mission-tray-title { padding: 0 0 0 12px ; width: 100%; align: left; text-align: left ; } .mission-tracker-component .missions-content { display: flex; flex-direction: row; height: 489px; } .mission-tracker-component .missions-content .mission-sidebar { height: 100%; width: 46px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; float: left; border-right: 1px solid #463714; } .mission-tracker-component .missions-content .mission-tray { height: 100%; width: 100%; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; background: none; float: right; } .mission-sidebar-component { position: relative; -webkit-user-select: none; width: 46px; height: 489px; } .mission-sidebar-component > lol-uikit-navigation-bar { position: relative; } .mission-sidebar-component > lol-uikit-navigation-bar > .spacer { height: 100%; width: 100%; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button { position: relative; min-height: 40px; height: 40px; width: 100%; padding-left: 0; padding-bottom: 2px; display: flex; align-items: center; justify-content: center; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button::before { left: 0px; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button > .mission-sidebar-unread { position: absolute; top: -3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background-color: #c89b3c; visibility: hidden; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button > .mission-sidebar-unread.visible { visibility: visible; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button > .mission-sidebar-unread.visible::after { content: ''; position: absolute; top: 1px; right: 1px; width: 6px; height: 6px; border-radius: 50%; background-color: #c89b3c; box-shadow: 0 0 12px 2px #c89b3c; animation: 1s ease-in-out infinite alternate forwards pulseSeriesUnreadButton; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button:hover { background-color: #1e2328; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button:hover > .mission-sidebar-button-icon { -webkit-filter: contrast(800%); } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button.completed { cursor: pointer; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button.completed > .mission-sidebar-button-icon { -webkit-filter: none; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button.selected > .mission-sidebar-button-icon { -webkit-filter: none; } .mission-sidebar-component > lol-uikit-navigation-bar > .mission-sidebar-button .mission-sidebar-button-icon { margin: auto; width: 60%; height: 60%; object-fit: contain; display: block; -webkit-filter: opacity(50%); } .mission-sidebar-component .mission-completed-button { position: relative; outline: none; border: none; background: none; cursor: pointer; padding: 0; background-image: url(/fe/lol-missions/mission_tracker_completed.png); background-size: cover; background-position-y: 0px; min-height: 35px; height: 35px; } .mission-sidebar-component .mission-completed-button:hover { background-position-y: -35px; } .mission-sidebar-component .mission-completed-button:active { background-position-y: -70px; } .mission-sidebar-component .mission-completed-button:disabled, .mission-sidebar-component .mission-completed-button[disabled], .mission-sidebar-component .mission-completed-button.disabled { cursor: default; background-position-y: -35px; } @-moz-keyframes pulseSeriesUnreadButton { 0% { opacity: 0; -webkit-filter: brightness(1); } 15% { opacity: 0; -webkit-filter: brightness(1); } 100% { opacity: 1; -webkit-filter: brightness(2); } } @-webkit-keyframes pulseSeriesUnreadButton { 0% { opacity: 0; -webkit-filter: brightness(1); } 15% { opacity: 0; -webkit-filter: brightness(1); } 100% { opacity: 1; -webkit-filter: brightness(2); } } @-o-keyframes pulseSeriesUnreadButton { 0% { opacity: 0; -webkit-filter: brightness(1); } 15% { opacity: 0; -webkit-filter: brightness(1); } 100% { opacity: 1; -webkit-filter: brightness(2); } } @keyframes pulseSeriesUnreadButton { 0% { opacity: 0; -webkit-filter: brightness(1); } 15% { opacity: 0; -webkit-filter: brightness(1); } 100% { opacity: 1; -webkit-filter: brightness(2); } } .mission-tray-component { position: relative; -webkit-user-select: none; width: 362px; height: 100%; cursor: default; display: flex; align-items: center; justify-content: center; } .mission-tray-component > .mission-poro-background { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url(/fe/lol-missions/MissionTracker_Poro.png); background-size: 128px 128px; background-position: center; background-repeat: no-repeat; opacity: 0; transition-property: opacity; transform-style: linear; transition-duration: 0.1s; transition-delay: 0.2s; } .mission-tray-component > .mission-poro-background.visible { opacity: 1; } .mission-tray-component .mission-list { flex: 0 0 auto; background-color: transparent; overflow: hidden; position: relative; } .mission-tray-component .mission-list .no-overflow { overflow: hidden; } .mission-tray-component .mission-list::shadow .wrapper { height: 489px; } .mission-tray-component .mission-list::shadow .wrapper .inner-wrapper { overflow: hidden; } .mission-tray-component .mission-list::shadow .wrapper .ps-scrollbar-y, .mission-tray-component .mission-list::shadow .wrapper .ps-scrollbar-y:hover, .mission-tray-component .mission-list::shadow .wrapper .ps-scrollbar-y-rail, .mission-tray-component .mission-list::shadow .wrapper .ps-scrollbar-y-rail:hover, .mission-tray-component .mission-list::shadow .wrapper .ps-scrollbar-y-rail .ps__scrollbar-y, .mission-tray-component .mission-list::shadow .wrapper .ps-scrollbar-y-rail:hover .ps__scrollbar-y, .mission-tray-component .mission-list::shadow .wrapper.ps--in-scrolling.ps--y .ps-scrollbar-y, .mission-tray-component .mission-list::shadow .wrapper.ps--in-scrolling.ps--y .ps-scrollbar-y:hover, .mission-tray-component .mission-list::shadow .wrapper.ps--in-scrolling.ps--y .ps-scrollbar-y-rail:hover .ps-scrollbar-y, .mission-tray-component .mission-list::shadow .wrapper.ps--in-scrolling.ps--y .ps-scrollbar-y-rail:hover .ps-scrollbar-y:hover, .mission-tray-component .mission-list::shadow .wrapper:hover .ps-scrollbar-y, .mission-tray-component .mission-list::shadow .wrapper:hover .ps-scrollbar-y:hover, .mission-tray-component .mission-list::shadow .wrapper:hover .ps-scrollbar-y-rail:hover .ps-scrollbar-y, .mission-tray-component .mission-list::shadow .wrapper:hover .ps-scrollbar-y-rail:hover .ps-scrollbar-y:hover, .mission-tray-component .mission-list::shadow .wrapper:hover.ps--in-scrolling.ps--y .ps-scrollbar-y, .mission-tray-component .mission-list::shadow .wrapper:hover.ps--in-scrolling.ps--y .ps-scrollbar-y:hover, .mission-tray-component .mission-list::shadow .wrapper:hover.ps--in-scrolling.ps--y .ps-scrollbar-y-rail:hover .ps-scrollbar-y, .mission-tray-component .mission-list::shadow .wrapper:hover.ps--in-scrolling.ps--y .ps-scrollbar-y-rail:hover .ps-scrollbar-y:hover { width: 4px; opacity: 1; right: 2px ; left: auto ; } .mission-tray-component .mission-list::shadow .wrapper .ps__scrollbar-x { opacity: 0; border: 0; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header, .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-helper-text, .mission-item-component .mission-item .mission-bottom .mission-duration { font-family: var(--font-body); } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header, .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-helper-text, .mission-item-component .mission-item .mission-bottom .mission-duration { -webkit-user-select: none; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header, .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-helper-text, .mission-item-component .mission-item .mission-bottom .mission-duration { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header, .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-helper-text, .mission-item-component .mission-item .mission-bottom .mission-duration { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header:lang(ja-jp), .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-helper-text:lang(ja-jp), .mission-item-component .mission-item .mission-bottom .mission-duration:lang(ja-jp) { font-size: 13px; } .mission-item-component { flex-direction: row; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; width: 362px; position: relative; top: 0; left: 0; border: 1px solid transparent; border-bottom: 1px solid #1e282d; transition-property: max-height, height, flex, visibility, opacity, top, background; transform-style: cubic-bezier(0, 0, 0, 1), cubic-bezier(0, 0, 0, 1), cubic-bezier(0, 0, 0, 1), linear, linear, cubic-bezier(0, 0, 0, 1); transition-duration: 0.2s, 0.2s, 0.2s, 0s, 0.2s, 0.01s, 0.15s; transition-delay: 0s, 0s, 0.2s, 0s, 0.2s, 0.2s, 0s; display: flex; visibility: visible; opacity: 1; flex: 1 1 auto; max-height: 325px; } .mission-item-component:hover { background: rgba(255,255,255,0.1); } .mission-item-component:hover .mission-item .mission-top .mission-right .mission-text .mission-header .mission-title { color: #f0e6d2; } .mission-item-component.hidden { display: flex; visibility: hidden; opacity: 0; flex: 0.0001 1 auto; max-height: 0; top: -300px; left: 350px; border: 0; transition-property: max-height, height, flex, visibility, opacity, top, left, border; transition-duration: 0.2s, 0.2s, 0.2s, 0s, 0s, 0.2s, 0.2s, 0; transition-delay: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0s, 0.4s; } .mission-item-component .mission-animation { position: relative; display: flex; width: 100%; } .mission-item-component .mission-animation .new-vid-top { position: absolute; top: 0; left: 0; width: 100%; } .mission-item-component .mission-animation .new-vid-bottom { position: absolute; bottom: -4px; left: 0; width: 100%; } .mission-item-component .mission-animation video { object-fit: fill; width: 100%; } .mission-item-component .mission-item { direction: ltr; position: relative; visibility: visible; display: flex; align-items: initial; justify-content: initial; flex-direction: column; width: 100%; flex: 1 1 auto; margin: 12px 22px 9px 11px ; background-color: transparent; } .mission-item-component .mission-item.overlay:after { content: ''; display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,4,7,0.3); } .mission-item-component .mission-item .mission-top { display: flex; flex-direction: row; width: 100%; flex: 1 1 auto; min-height: 66px; } .mission-item-component .mission-item .mission-top .mission-icon { position: relative; background-repeat: no-repeat; flex: 0 0 auto; width: 64px; height: 64px; border-style: solid; border-width: 1px; border-color: #3c3c41; background-position: center; box-shadow: inset 0 0 0 1px #000; background-size: 64px 64px; box-sizing: border-box; } .mission-item-component .mission-item .mission-top .mission-icon.mission-icon-fade:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; background: rgba(0,4,7,0.7); } .mission-item-component .mission-item .mission-top .mission-icon.mission-icon-loyalty { border-width: 2px; border-image: linear-gradient(to top, #785a28, #a98130) 1 round; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.5); } .mission-item-component .mission-item .mission-top .mission-icon .mission-expired-icon { background-repeat: no-repeat; flex: 0 0 auto; width: 64px; height: 64px; background: url(/fe/lol-missions/Xmark.png); background-size: 64px 64px; background-position: center; } .mission-item-component .mission-item .mission-top .mission-icon .mission-completed-icon { background-repeat: no-repeat; width: 64px; height: 64px; position: relative; background: url(/fe/lol-missions/Checkmark.png); background-size: 64px 64px; background-position: center; } .mission-item-component .mission-item .mission-top .mission-icon .mission-completed-icon.mission-completed-icon-mask { animation: checkmark 0.4s cubic-bezier(0, 0, 0, 1) 0s normal 1 forwards; } @-moz-keyframes checkmark { 0% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 19px 31px, 14px 36px); } 50% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 30px 42px, 25px 47px); } 100% { -webkit-clip-path: polygon(14px 36px, 40px 12px, 50px 22px, 25px 47px); } } @-webkit-keyframes checkmark { 0% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 19px 31px, 14px 36px); } 50% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 30px 42px, 25px 47px); } 100% { -webkit-clip-path: polygon(14px 36px, 40px 12px, 50px 22px, 25px 47px); } } @-o-keyframes checkmark { 0% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 19px 31px, 14px 36px); } 50% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 30px 42px, 25px 47px); } 100% { -webkit-clip-path: polygon(14px 36px, 40px 12px, 50px 22px, 25px 47px); } } @keyframes checkmark { 0% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 19px 31px, 14px 36px); } 50% { -webkit-clip-path: polygon(14px 36px, 19px 31px, 30px 42px, 25px 47px); } 100% { -webkit-clip-path: polygon(14px 36px, 40px 12px, 50px 22px, 25px 47px); } } @-moz-keyframes circle { 0% { stroke-dashoffset: 0; } 30%, 50% { stroke-dashoffset: 314; } 80%, 100% { stroke-dashoffset: 0; } } @-webkit-keyframes circle { 0% { stroke-dashoffset: 0; } 30%, 50% { stroke-dashoffset: 314; } 80%, 100% { stroke-dashoffset: 0; } } @-o-keyframes circle { 0% { stroke-dashoffset: 0; } 30%, 50% { stroke-dashoffset: 314; } 80%, 100% { stroke-dashoffset: 0; } } @keyframes circle { 0% { stroke-dashoffset: 0; } 30%, 50% { stroke-dashoffset: 314; } 80%, 100% { stroke-dashoffset: 0; } } .mission-item-component .mission-item .mission-top .mission-icon .mission-completed-icon-border { position: absolute; width: 66px; height: 66px; top: -1px; left: -1px; background-size: 64px 64px; background-position: 1px 1px; } .mission-item-component .mission-item .mission-top .mission-icon .mission-completed-icon-border > svg { position: absolute; top: 0; left: 0; } .mission-item-component .mission-item .mission-top .mission-icon .mission-completed-icon-border > svg > line { stroke-width: 2; stroke: #f0e6d2; fill: none; stroke-dasharray: 66; stroke-dashoffset: 66; animation: dash 2s cubic-bezier(0, 0, 0, 1) forwards; } @-moz-keyframes dash { from { stroke-dashoffset: 264; opacity: 1; } to { stroke-dashoffset: 66; opacity: 0; } } @-webkit-keyframes dash { from { stroke-dashoffset: 264; opacity: 1; } to { stroke-dashoffset: 66; opacity: 0; } } @-o-keyframes dash { from { stroke-dashoffset: 264; opacity: 1; } to { stroke-dashoffset: 66; opacity: 0; } } @keyframes dash { from { stroke-dashoffset: 264; opacity: 1; } to { stroke-dashoffset: 66; opacity: 0; } } .mission-item-component .mission-item .mission-top .mission-right { display: flex; flex-direction: column; justify-content: space-between; width: 100%; flex: 1 1 auto; min-height: 67px; margin: 0 0 0 12px ; } .mission-item-component .mission-item .mission-top .mission-right .mission-text { display: flex; flex: 1 1 auto; flex-flow: column wrap; width: 100%; overflow: hidden; } .mission-item-component .mission-item .mission-top .mission-right .mission-text.mission-text-badge { width: unset; padding-right: 34px; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header { width: 100%; flex: 0 1 auto; line-height: 16px; color: #a09b8c; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header .mission-title { font-weight: bold; color: #cdbe91; transition: color 0.15s; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header .mission-title.unread { color: #c89b3c; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header .mission-title.unread::before { content: '\25CF '; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-header .mission-description { color: #a09b8c; } .mission-item-component .mission-item .mission-top .mission-right .mission-text .mission-helper-text { width: 100%; flex: 1 1 auto; line-height: 16px; color: #5b5a56; } .mission-item-component .mission-item .mission-top .mission-right .mission-right-badge { position: absolute; right: -5px ; left: auto ; top: -13px; background-repeat: no-repeat; background-position: center; background-size: 32px 44px; width: 32px; height: 44px; } .mission-item-component .mission-item .mission-top .mission-right .mission-right-badge.purchased { background-image: url(/fe/lol-missions/Badge_purchased4k.png); } .mission-item-component .mission-item .mission-top .mission-right .mission-right-badge.loyalty { background-image: url(/fe/lol-missions/Badge_loyalty4k.png); } .mission-item-component .mission-item .mission-top .mission-right .mission-objectives { display: flex; max-height: 200px; margin-top: 2px; width: 100%; overflow: hidden; } .mission-item-component .mission-item .mission-bottom { display: flex; position: relative; flex-direction: row; width: 100%; justify-content: space-between; align-items: flex-start; margin-top: 9px; } .mission-item-component .mission-item .mission-bottom .mission-rewards { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; } .mission-item-component .mission-item .mission-bottom .mission-expiring { background-repeat: no-repeat; flex: 0 0 auto; width: 24px; height: 16px; background-image: url(/fe/lol-missions/Timeleft_AlertIcon.png); background-position: center; background-size: 16px 16px; } .mission-item-component .mission-item .mission-bottom .mission-repeating { background-repeat: no-repeat; flex: 0 0 auto; width: 24px; height: 16px; background-image: url(/fe/lol-missions/RepeatableIcon.png); background-position: center; background-size: 16px 16px; } .mission-item-component .mission-item .mission-bottom .mission-pending { background-repeat: no-repeat; flex: 0 0 auto; width: 24px; height: 14px; background-image: url(/fe/lol-missions/MissionObject_RewardIcons_Alert.png); background-position: center; background-size: 16px 16px; } .mission-item-component .mission-item .mission-bottom .mission-duration { flex: 0 0 auto; text-align: right; line-height: 19px; color: #5b5a56; } .mission-item-component .mission-item .mission-bottom .mission-duration.completed, .mission-item-component .mission-item .mission-bottom .mission-duration.cooldown { color: #c89b3c; } .mission-item-component .mission-item .mission-bottom .mission-duration.expiring { color: #f0e6d2; } .mission-item-component .mission-item .mission-bottom .mission-duration.pending { color: #5b5a56; } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title { font-family: var(--font-display); } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { font-family: var(--font-body); } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title, .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { -webkit-user-select: none; } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title, .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title { text-transform: uppercase; } .mission-tooltip:lang(ko-kr), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(ko-kr), .mission-tooltip:lang(ja-jp), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(ja-jp), .mission-tooltip:lang(tr-tr), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(tr-tr), .mission-tooltip:lang(el-gr), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(el-gr), .mission-tooltip:lang(th-th), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(th-th), .mission-tooltip:lang(zh-tw), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(zh-tw) { text-transform: none; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { text-transform: none; } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type:lang(ja-jp) { font-size: 13px; } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title { font-family: var(--font-display); } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { font-family: var(--font-body); } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title, .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { -webkit-user-select: none; } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title, .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title { text-transform: uppercase; } .mission-tooltip:lang(ko-kr), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(ko-kr), .mission-tooltip:lang(ja-jp), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(ja-jp), .mission-tooltip:lang(tr-tr), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(tr-tr), .mission-tooltip:lang(el-gr), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(el-gr), .mission-tooltip:lang(th-th), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(th-th), .mission-tooltip:lang(zh-tw), .mission-tooltip .mission-tooltip-top .mission-rewards-title:lang(zh-tw) { text-transform: none; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { text-transform: none; } .mission-tooltip, .mission-tooltip .mission-tooltip-top .mission-rewards-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type:lang(ja-jp) { font-size: 13px; } .mission-tooltip { direction: ltr; min-width: 256px; max-width: 356px; min-height: 198px; max-height: 215px; background: #010a13; display: flex; flex-direction: column; justify-content: center; } .mission-tooltip.mission-reward-double { width: 356px; min-width: 356px; max-width: 356px; } .mission-tooltip.mission-reward-double .mission-tooltip-top { background: url("/fe/lol-missions/MissionFlyoutBackground_Large.png"); background-repeat: no-repeat; background-size: cover; } .mission-tooltip.mission-reward-single { width: 256px; min-width: 256px; max-width: 256px; } .mission-tooltip.mission-reward-single .mission-tooltip-top { background: url("/fe/lol-missions/MissionFlyoutBackground_Small.png"); background-repeat: no-repeat; background-size: cover; } .mission-tooltip .mission-tooltip-top { width: 100%; height: 146px; position: relative; } .mission-tooltip .mission-tooltip-top .mission-reward-icons { top: 0; left: 0; width: 100%; height: 146px; display: flex; flex: 1 1 auto; flex-direction: row; justify-content: center; align-items: flex-start; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-icon-bounding { width: 256px; height: 126px; display: flex; flex: 0 0 auto; justify-content: center; align-items: center; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-icon-bounding.multi { width: 178px; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-icon-bounding.splash { height: 146px; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-icon-bounding .mission-reward-icon { width: 256px; height: 126px; flex: 0 0 auto; object-fit: contain; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-icon-bounding .mission-reward-icon.multi { width: 178px; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-icon-bounding .mission-reward-icon.mission-tooltip-type-splash { object-fit: cover; height: 146px; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-icon-bounding .mission-reward-icon.mission-tooltip-type-summoner { width: 92px; height: 92px; border-style: solid; border-width: 1px; border-color: #785a28; border-image: linear-gradient(to bottom, #c8aa6e, #463714) 1; box-shadow: inset 0 0 0 1px #000; } .mission-tooltip .mission-tooltip-top .mission-reward-icons .mission-reward-divider { position: absolute; left: 163.5px; top: 0; width: 29px; height: 100%; background: transparent url("/fe/lol-missions/MissionReward_TooltipDivider.png"); background-size: 29px 100%; background-repeat: no-repeat; z-index: 20; } .mission-tooltip .mission-tooltip-top .mission-rewards-title { position: absolute; width: 100%; text-align: center; bottom: 0; left: 0; padding-bottom: 7px; padding-top: 10px; background: linear-gradient(to top, #010a13 0%, rgba(0,0,0,0) 100%); z-index: 30; color: #cdbe91; } .mission-tooltip .mission-tooltip-divider-block { height: 1px; flex: 0 0 auto; margin: 0 10px; border: none; } .mission-tooltip .mission-tooltip-divider-block .mission-tooltip-divider { width: 100%; height: 1px; border-bottom: 1px solid #1e282d; } .mission-tooltip .mission-tooltip-bottom { width: 100%; height: 100%; display: flex; flex: 1 1 auto; flex-direction: row; justify-content: space-around; align-items: center; } .mission-tooltip .mission-tooltip-bottom .mission-reward-wrapper { display: flex; width: 100%; align-items: flex-start; } .mission-tooltip .mission-tooltip-bottom .mission-reward { display: flex; flex: 1 1 auto; flex-direction: row; justify-content: center; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-icon { height: 18px; width: 18px; align-self: flex-start; background-size: 18px 18px; background-position: 0 0; background-repeat: no-repeat; background-image: url("/fe/lol-missions/RewardIcons_Champ.png"); } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block { max-width: 220px; height: 100%; flex: 0 0 auto; display: flex; text-align: left ; margin: 0 0 0 5px ; flex-direction: column; font-size: 12px; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block.mission-reward-text-block-multi { max-width: 130px; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-text { flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mission-tooltip .mission-tooltip-bottom .mission-reward .mission-reward-text-block .mission-reward-type { color: #a09b8c; flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mission-objective-component, .mission-objective-component .mission-objective-progress-block, .mission-objective-component .mission-objective-progress-block .mission-objective-progress-label, .mission-objective-component .mission-objective-description-block .mission-objective-description { font-family: var(--font-body); } .mission-objective-component, .mission-objective-component .mission-objective-progress-block, .mission-objective-component .mission-objective-progress-block .mission-objective-progress-label, .mission-objective-component .mission-objective-description-block .mission-objective-description { -webkit-user-select: none; } .mission-objective-component, .mission-objective-component .mission-objective-progress-block, .mission-objective-component .mission-objective-progress-block .mission-objective-progress-label, .mission-objective-component .mission-objective-description-block .mission-objective-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-objective-component, .mission-objective-component .mission-objective-progress-block, .mission-objective-component .mission-objective-progress-block .mission-objective-progress-label, .mission-objective-component .mission-objective-description-block .mission-objective-description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .mission-objective-component:lang(ja-jp), .mission-objective-component .mission-objective-progress-block:lang(ja-jp), .mission-objective-component .mission-objective-progress-block .mission-objective-progress-label:lang(ja-jp), .mission-objective-component .mission-objective-description-block .mission-objective-description:lang(ja-jp) { font-size: 13px; } .mission-objective-component { display: table-row-group; width: 100%; margin-top: 1px; color: #5b5a56;  } .mission-objective-component:before { height: 5px; content: ''; display: block; } .mission-objective-component:first-of-type:before { display: none; } .mission-objective-component .mission-objective-progress-block { width: 100%; margin-top: 1px; align-items: center; color: #5b5a56; } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper { width: 100%; vertical-align: middle; } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper .mission-objective-progress-bar { display: flex; border: 1px solid #463714; box-shadow: inset 0 0 0 1px #0a1428; box-sizing: border-box; width: 100%; max-width: 208px; background: #0a323c; padding: 1px; overflow: hidden; } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper .mission-objective-progress-bar .mission-objective-completed-progress { position: relative; height: 6px; width: 100%; overflow: hidden; transform: scaleX(0); transform-origin: left; transition: 0.6s cubic-bezier(0, 0, 0, 1) transform; will-change: transform; } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper .mission-objective-progress-bar .mission-objective-completed-progress[data-is-newly-completed-objective="true"]:after { content: ''; position: absolute; width: 100%; height: 100%; transform: translateX(100%); will-change: transform; background: linear-gradient(to right, #fff 20%, transparent 100%); animation: ProgressBackfill 1s cubic-bezier(0, 0, 0, 1) 0s normal 1 forwards; opacity: 0.5; } @-moz-keyframes ProgressBackfill { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @-webkit-keyframes ProgressBackfill { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @-o-keyframes ProgressBackfill { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes ProgressBackfill { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper .mission-objective-progress-bar .mission-objective-completed-progress.in-progress { background: linear-gradient(to right, RGB(16, 102, 145) 10%, #0ac8b9); } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper .mission-objective-progress-bar .mission-objective-completed-progress.completed { background: linear-gradient(to right, #785a28 5%, #c89b3c 90%, #c8aa6e 100%); } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper .mission-objective-progress-bar .mission-objective-completed-progress.expired { background: #3c3c41; } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-bar-wrapper .mission-objective-progress-bar.expired-outline { border: 1px solid #3c3c41; background: none; } .mission-objective-component .mission-objective-progress-block .mission-objective-progress-label { text-align: right; color: #f0e6d2; padding: 0 0 0 16px ; white-space: nowrap; width: 1%; } .mission-objective-component .mission-objective-description-block .mission-objective-description { width: 100%; color: #a09b8c; padding-bottom: 1px; } .mission-objective-component .mission-objective-description-block .mission-objective-description.has-objective-based-reward { color: #c89b3c; } .mission-objective-component .mission-objective-description-block .mission-objective-description.has-objective-based-reward:before { content: '+'; display: inline-flex; vertical-align: middle; margin: 0 1px 0 0 ; font-size: 16px; } .mission-objectives-component .divider-text { font-family: var(--font-display); } .mission-objectives-component .divider-text { -webkit-user-select: none; } .mission-objectives-component .divider-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-objectives-component .divider-text { text-transform: uppercase; } .mission-objectives-component .divider-text:lang(ko-kr), .mission-objectives-component .divider-text:lang(ja-jp), .mission-objectives-component .divider-text:lang(tr-tr), .mission-objectives-component .divider-text:lang(el-gr), .mission-objectives-component .divider-text:lang(th-th), .mission-objectives-component .divider-text:lang(zh-tw) { text-transform: none; } .mission-objectives-component .divider-text { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .mission-objectives-component .divider-text:lang(ja-jp) { font-size: 13px; } .mission-objectives-component { width: 100%; display: flex; flex: 1 1 auto; } .mission-objectives-component td { padding: 0; } .mission-objectives-component .mission-objectives-table { width: 100%; border-collapse: collapse; } .mission-objectives-component .objective-divider { width: 100%; height: 24px; display: flex; flex-wrap: nowrap; align-items: center; margin-top: 4px; } .mission-objectives-component .divider-text { color: #a09b8c; padding: 0 10px 0 10px; overflow: hidden; } .mission-objectives-component .divider-line { height: 1px; flex-grow: 1; background: #3c3c41; } .mission-objectives-component .divider-diamond { display: inline-block; height: 7px; flex-basis: 7px; position: relative; background-position: center; background-image: url(/fe/lol-missions/diamond_4k.png); background-repeat: no-repeat; background-size: 100% 100%; } .mission-reward .reward-description { font-family: var(--font-body); } .mission-reward .reward-description { -webkit-user-select: none; } .mission-reward .reward-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-reward .reward-description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .mission-reward .reward-description:lang(ja-jp) { font-size: 13px; } .mission-reward { width: 100%; flex: 1 1 auto; align-items: center; display: flex; } .mission-reward .reward-icon { background-repeat: no-repeat; background-size: 16px 16px; background-position: center; width: 18px; height: 18px; flex: 0 0 auto; } .mission-reward .reward-description { flex: 1 1 auto; display: inline-flex; height: 18px; width: 100%; color: $color_palette_paladin2; margin: 0 0 0 7px ; align-items: center; } .mission-reward .reward-description.is-objective-based-reward { color: #c89b3c; } .mission-reward .reward-description.is-objective-based-reward:before { content: '+'; display: inline-flex; margin: 0 1px 0 0 ; font-size: 16px; } .series-induction-component .series-induction-buttons .series-induction-buttons-or, .series-induction-component .series-induction-title { font-family: var(--font-display); } .series-induction-component .series-induction-description { font-family: var(--font-body); } .series-induction-component .series-induction-buttons .series-induction-buttons-or, .series-induction-component .series-induction-title, .series-induction-component .series-induction-description { -webkit-user-select: none; } .series-induction-component .series-induction-buttons .series-induction-buttons-or, .series-induction-component .series-induction-title, .series-induction-component .series-induction-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .series-induction-component .series-induction-buttons .series-induction-buttons-or, .series-induction-component .series-induction-title { text-transform: uppercase; } .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(ko-kr), .series-induction-component .series-induction-title:lang(ko-kr), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(ja-jp), .series-induction-component .series-induction-title:lang(ja-jp), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(tr-tr), .series-induction-component .series-induction-title:lang(tr-tr), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(el-gr), .series-induction-component .series-induction-title:lang(el-gr), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(th-th), .series-induction-component .series-induction-title:lang(th-th), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(zh-tw), .series-induction-component .series-induction-title:lang(zh-tw) { text-transform: none; } .series-induction-component .series-induction-buttons .series-induction-buttons-or { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(ja-jp) { font-size: 13px; } .series-induction-component .series-induction-description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .series-induction-component .series-induction-description:lang(ja-jp) { font-size: 13px; } .series-induction-component { flex-direction: row; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; width: 362px; position: relative; top: 0; left: 0; border-bottom: 1px solid #1e282d; transition-property: max-height, height, flex, visibility, opacity, top, background; transform-style: cubic-bezier(0, 0, 0, 1), cubic-bezier(0, 0, 0, 1), cubic-bezier(0, 0, 0, 1), linear, linear, cubic-bezier(0, 0, 0, 1); transition-duration: 0.2s, 0.2s, 0.2s, 0s, 0.2s, 0.01s, 0.15s; transition-delay: 0s, 0s, 0.2s, 0s, 0.2s, 0.2s, 0s; display: flex; visibility: visible; opacity: 1; flex: 1 1 auto; max-height: 325px; } .series-induction-component.hidden { display: flex; visibility: hidden; opacity: 0; flex: 0.0001 1 auto; max-height: 0; top: -300px; left: 350px; border: 0; transition-property: max-height, height, flex, visibility, opacity, top, left, border; transition-duration: 0.2s, 0.2s, 0.2s, 0s, 0s, 0.2s, 0.2s, 0s; transition-delay: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0s, 0.4s; } .series-induction-component:hover .series-induction-root { background: rgba(255,255,255,0.1); } .series-induction-component:hover .series-induction-root .series-induction-title { color: #f0e6d2; } .series-induction-component .series-induction-background { width: 100%; height: 100%; background-blend-mode: screen; background-position: center top; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; } .series-induction-component .series-induction-root { width: 362px; box-sizing: border-box; position: relative; display: flex; flex-direction: column; flex-wrap: wrap; min-height: 80px; justify-content: space-between; align-items: center; padding: 14px; transition: background 0.15s; } .series-induction-component .series-induction-buttons { width: 100%; display: flex; flex-direction: row; margin-left: auto; margin-right: auto; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 16px; } .series-induction-component .series-induction-buttons > lol-uikit-flat-button { min-width: 110px; } .series-induction-component .series-induction-buttons .series-induction-buttons-or { color: #a09b8c; margin-right: 8px; margin-left: 8px; line-height: initial; } .series-induction-component .series-induction-title { font-weight: bold; color: #cdbe91; margin: 0px 0px 4px 0px; padding: 0px; line-height: 18px; font-size: 15px; text-align: center; transition: color 0.15s; } .series-induction-component .series-induction-description { color: #a09b8c; margin: 0px; margin-top: 2px; padding: 0px; text-align: center; line-height: 16px; display: flex; justify-content: center; } .series-induction-component .series-induction-description.expiring { margin-right: 20px; } .series-induction-component .series-induction-description.expiring:before { content: ""; display: block; background-repeat: no-repeat; flex: 0 0 auto; width: 16px; height: 16px; margin-right: 4px; background-image: url(/fe/lol-missions/Timeleft_AlertIcon.png); background-position: center; background-size: 16px 16px; } .series-induction-component .induction-accept { display: block; } .series-induction-component .visible { visibility: visible; } .series-induction-component .series-induction-accept-border { --border-width: 2px; bottom: -7px; left: -px; position: absolute; right: -20px; top: -7px; } .series-induction-button { width: 48px; height: 48px; margin-right: 8px; margin-left: 8px; position: relative; cursor: pointer; } .series-induction-button .series-induction-button-glow { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; transition-property: opacity; transform-style: cubic-bezier(0, 0, 0, 1); transition-duration: 0.2s; -webkit-filter: brightness(75%) saturate(200%); } .series-induction-button .series-induction-button-image { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; transition-property: background; transform-style: linear; transition-duration: 0.2s; } .series-induction-button:hover .series-induction-button-glow { opacity: 0.8; } .series-induction-button:hover .series-induction-button-image { background: #f0e6d2; } .token-upsell-card-component .token-upsell-card-title .token-upsell-count, .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle { font-family: var(--font-display); } .token-upsell-card-component .token-upsell-card-title, .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle { font-family: var(--font-body); } .token-upsell-card-component .token-upsell-card-title, .token-upsell-card-component .token-upsell-card-title .token-upsell-count, .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle { -webkit-user-select: none; } .token-upsell-card-component .token-upsell-card-title, .token-upsell-card-component .token-upsell-card-title .token-upsell-count, .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .token-upsell-card-component .token-upsell-card-title .token-upsell-count { text-transform: uppercase; } .token-upsell-card-component .token-upsell-card-title .token-upsell-count:lang(ko-kr), .token-upsell-card-component .token-upsell-card-title .token-upsell-count:lang(ja-jp), .token-upsell-card-component .token-upsell-card-title .token-upsell-count:lang(tr-tr), .token-upsell-card-component .token-upsell-card-title .token-upsell-count:lang(el-gr), .token-upsell-card-component .token-upsell-card-title .token-upsell-count:lang(th-th), .token-upsell-card-component .token-upsell-card-title .token-upsell-count:lang(zh-tw) { text-transform: none; } .token-upsell-card-component .token-upsell-card-title .token-upsell-count { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle:lang(ja-jp) { font-size: 13px; } .token-upsell-card-component .token-upsell-card-title { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .token-upsell-card-component .token-upsell-card-title:lang(ja-jp) { font-size: 13px; } .token-upsell-card-component { width: 362px; margin: 0px; padding: 0px; flex-direction: column; align-items: flex-start; justify-content: flex-start; position: relative; display: flex; visibility: visible; opacity: 1; flex: 1 1 auto; box-sizing: border-box; border-bottom: 1px solid #1e282d; } .token-upsell-card-component:hover .token-upsell-card-root { background: rgba(255,255,255,0.1); background-size: 100%; } .token-upsell-card-component:hover .token-upsell-card-root .token-upsell-card-title { color: #f0e6d2; } .token-upsell-card-component .token-upsell-card-root { width: 362px; height: 64px; box-sizing: border-box; position: relative; display: flex; flex-direction: row; align-items: center; padding: 8px; background-size: 100%; transition: background 0.15s; } .token-upsell-card-component .token-upsell-icon { background-repeat: no-repeat; background-size: 64px 45px; background-position: center; width: 64px; height: 45px; margin-left: 4px; flex: 0 0 auto; } .token-upsell-card-component .token-upsell-content { width: 298px; display: flex; margin-left: 4px; margin-right: 7px; } .token-upsell-card-component .token-upsell-card-title { display: flex; flex-direction: column; justify-content: center; } .token-upsell-card-component .token-upsell-card-title .token-upsell-count { margin: 0px 0px 0px 8px; padding: 0px; text-align: left; } .token-upsell-card-component .token-upsell-card-title .token-upsell-subtitle { margin: 0px 0px 0px 8px; padding: 0px; text-align: left; } .token-upsell-card-component .store-redirect-button { display: flex; flex-direction: row; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .token-upsell-card-component .store-redirect-button > lol-uikit-flat-button { min-width: 110px; } .token-upsell-card-component .store-redirect { display: block; } .token-upsell-card-component .visible { visibility: visible; } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title { font-family: var(--font-display); } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { font-family: var(--font-body); } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title, .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { -webkit-user-select: none; } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title, .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title { text-transform: uppercase; } .token-tooltip:lang(ko-kr), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(ko-kr), .token-tooltip:lang(ja-jp), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(ja-jp), .token-tooltip:lang(tr-tr), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(tr-tr), .token-tooltip:lang(el-gr), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(el-gr), .token-tooltip:lang(th-th), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(th-th), .token-tooltip:lang(zh-tw), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(zh-tw) { text-transform: none; } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { text-transform: none; } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block:lang(ja-jp) { font-size: 13px; } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title { font-family: var(--font-display); } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { font-family: var(--font-body); } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title, .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { -webkit-user-select: none; } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title, .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title { text-transform: uppercase; } .token-tooltip:lang(ko-kr), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(ko-kr), .token-tooltip:lang(ja-jp), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(ja-jp), .token-tooltip:lang(tr-tr), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(tr-tr), .token-tooltip:lang(el-gr), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(el-gr), .token-tooltip:lang(th-th), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(th-th), .token-tooltip:lang(zh-tw), .token-tooltip .token-tooltip-top .token-tooltip-top-title:lang(zh-tw) { text-transform: none; } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { text-transform: none; } .token-tooltip, .token-tooltip .token-tooltip-top .token-tooltip-top-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block:lang(ja-jp) { font-size: 13px; } .token-tooltip { min-width: 256px; max-width: 356px; min-height: 198px; max-height: 215px; background: #010a13; display: flex; flex-direction: column; justify-content: center; } .token-tooltip .token-tooltip-top { width: 256px; height: 146px; position: relative; background-repeat: no-repeat; background-size: cover; } .token-tooltip .token-tooltip-top .token-tooltip-top-title { position: absolute; width: 100%; text-align: center; bottom: 0; left: 0; padding-bottom: 7px; padding-top: 10px; background: linear-gradient(to top, #010a13 0%, rgba(0,0,0,0) 100%); z-index: 1; color: #cdbe91; } .token-tooltip .token-tooltip-divider-block { height: 1px; flex: 0 0 auto; margin: 0 10px; border: none; } .token-tooltip .token-tooltip-divider-block .token-tooltip-divider { width: 100%; height: 1px; border-bottom: 1px solid #1e282d; } .token-tooltip .token-tooltip-bottom { width: 100%; height: 100%; display: flex; flex: 1 1 auto; flex-direction: row; justify-content: space-around; align-items: center; } .token-tooltip .token-tooltip-bottom .token-tooltip-text-block { color: #a09b8c; flex: 0 0 auto; max-width: 220px; text-align: left; margin-left: 5px; flex-direction: column; font-size: 12px; display: flex; justify-content: center; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { font-family: var(--font-display); } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { -webkit-user-select: none; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { text-transform: uppercase; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(ko-kr), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(ja-jp), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(tr-tr), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(el-gr), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(th-th), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(zh-tw) { text-transform: none; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { font-family: var(--font-display); } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { font-family: var(--font-display); } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { -webkit-user-select: none; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { text-transform: uppercase; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(ko-kr), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(ja-jp), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(tr-tr), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(el-gr), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(th-th), .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title:lang(zh-tw) { text-transform: none; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .mission-log-component { position: relative; width: 362px; height: 574px; } .mission-log-component .mission-log-container { width: 100%; height: 100%; } .mission-log-component .mission-log-container .mission-log-content { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header { direction: ltr; height: 32px; width: 100%; display: flex; align-items: center; border-bottom: 1px solid #463714; background: #010a13; } .mission-log-component .mission-log-container .mission-log-content .mission-log-header .mission-log-title { padding: 0 0 0 12px ; } .mission-log-component .mission-log-container .mission-log-content .mission-list { width: 100%; height: 510px; flex: 1 1 auto; } .mission-log-component .mission-log-container .mission-log-content .mission-list lol-uikit-scrollable { overflow-x: hidden; width: 100%; height: 510px; } .mission-log-component .mission-log-container .mission-log-content .mission-log-close-container { position: relative; bottom: -2px; flex: 0 0 auto; } .mission-log-component .mission-log-container .mission-log-content .mission-log-close-container .mission-log-close-button { position: relative; bottom: 0; width: 100px; height: 32px; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-header .mission-tracker-title, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer .mission-tracker-footer-label { font-family: var(--font-display); } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-header .mission-tracker-title, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer .mission-tracker-footer-label { -webkit-user-select: none; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-header .mission-tracker-title, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer .mission-tracker-footer-label { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-header .mission-tracker-title, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer .mission-tracker-footer-label { text-transform: uppercase; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-header .mission-tracker-title:lang(ko-kr), .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer .mission-tracker-footer-label:lang(ko-kr), .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-header .mission-tracker-title:lang(ja-jp), .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer .mission-tracker-footer-label:lang(ja-jp), .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-header .mission-tracker-title:lang(tr-tr), .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer .mission-tracker-footer-label:lang(tr-tr), .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-header .mission-tracker-title:lang(el-gr), .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer .mission-tracker-footer-label:lang(el-gr), .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-header .mission-tracker-title:lang(th-th), .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer .mission-tracker-footer-label:lang(th-th), .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-header .mission-tracker-title:lang(zh-tw), .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer .mission-tracker-footer-label:lang(zh-tw) { text-transform: none; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-header .mission-tracker-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer .mission-tracker-footer-label { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer .mission-tracker-footer-label:lang(ja-jp) { font-size: 13px; } .mission-tracker-component-deprecated { -webkit-user-select: none; width: 362px; height: 532px; cursor: default; background: #010a13; border: 1px solid #1e282d; } .mission-tracker-component-deprecated lol-uikit-content-block { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker { display: flex; flex: 1 1 auto; flex-flow: column nowrap; justify-content: center; align-items: center; background-image: url(/fe/lol-missions/MissionTracker_Poro.png); background-size: 128px 128px; background-position: center; background-repeat: no-repeat; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker.mission-background { background: #010a13; background-size: 362px 450px; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-header { display: flex; align-items: center; justify-content: center; width: 362px; height: 42px; flex: 1 1 auto; border-bottom: 1px solid #463714; background: #010a13; overflow: hidden; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-header .mission-tracker-title { padding-left: 12px; width: 100%; align: left; text-align: left; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-action-bar { position: absolute; margin-top: 3px; top: 42px; left: 2px; height: 40px; width: 362px; background: rgba(1,10,19,0.86); border-bottom: 1px solid #463714; height: 40px; overflow: hidden; transition-property: all; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); display: flex; flex-direction: column; justify-content: flex-end; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-action-bar:hover { background: rgba(30,35,40,0.86); } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-action-bar:hover lol-uikit-radio-input-option { background: rgba(30,35,40,0.86); } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-action-bar:hover lol-uikit-flat-checkbox label { color: #f0e6d2; margin: 1px 0 0 10px; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-action-bar.hidden { height: 0; border: none; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-action-bar .action-bar-buttons { padding-left: 20px; padding-bottom: 5px; top: 7px; position: inherit; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-action-bar lol-uikit-flat-checkbox { padding: 8px 10px; margin: -8px -10px; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-action-bar lol-uikit-flat-checkbox label { color: #cdbe91; margin: 1px 0 0 10px; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-action-bar lol-uikit-radio-input-option::shadow li.ui-radio-input-option { padding: 0px 10px; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list { width: 362px; height: 450px; flex: 0 0 auto; background-color: transparent; overflow: hidden; position: relative; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list .no-overflow { overflow: hidden; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper { height: 450px; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper .inner-wrapper { overflow-x: hidden; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper .ps-scrollbar-y, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper .ps-scrollbar-y:hover, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper .ps-scrollbar-y-rail, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper .ps-scrollbar-y-rail:hover, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper .ps-scrollbar-y-rail .ps__scrollbar-y, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper .ps-scrollbar-y-rail:hover .ps__scrollbar-y, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper.ps--in-scrolling.ps--y .ps-scrollbar-y, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper.ps--in-scrolling.ps--y .ps-scrollbar-y:hover, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper.ps--in-scrolling.ps--y .ps-scrollbar-y-rail:hover .ps-scrollbar-y, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper.ps--in-scrolling.ps--y .ps-scrollbar-y-rail:hover .ps-scrollbar-y:hover, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper:hover .ps-scrollbar-y, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper:hover .ps-scrollbar-y:hover, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper:hover .ps-scrollbar-y-rail:hover .ps-scrollbar-y, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper:hover .ps-scrollbar-y-rail:hover .ps-scrollbar-y:hover, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper:hover.ps--in-scrolling.ps--y .ps-scrollbar-y, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper:hover.ps--in-scrolling.ps--y .ps-scrollbar-y:hover, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper:hover.ps--in-scrolling.ps--y .ps-scrollbar-y-rail:hover .ps-scrollbar-y, .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper:hover.ps--in-scrolling.ps--y .ps-scrollbar-y-rail:hover .ps-scrollbar-y:hover { width: 4px; opacity: 1; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-list::shadow .wrapper .ps__scrollbar-x { opacity: 0; border: 0; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer { display: flex; align-items: center; justify-content: center; width: 362px; height: 42px; flex: 1 1 auto; border-top: 1px solid #1e2328; border-bottom: 1px solid #463714; background: #010a13; overflow: hidden; cursor: pointer; color: #a09b8c; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer:hover { background: rgba(30,35,40,0.86); color: #f0e6d2; } .mission-tracker-component-deprecated lol-uikit-content-block .mission-tracker .mission-tracker-footer .mission-tracker-footer-label { color: inherit; width: 100%; align: left; text-align: center; } .series-induction-component .series-induction-buttons .series-induction-buttons-or, .series-induction-component .series-induction-title { font-family: var(--font-display); } .series-induction-component .series-induction-description { font-family: var(--font-body); } .series-induction-component .series-induction-buttons .series-induction-buttons-or, .series-induction-component .series-induction-title, .series-induction-component .series-induction-description { -webkit-user-select: none; } .series-induction-component .series-induction-buttons .series-induction-buttons-or, .series-induction-component .series-induction-title, .series-induction-component .series-induction-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .series-induction-component .series-induction-buttons .series-induction-buttons-or, .series-induction-component .series-induction-title { text-transform: uppercase; } .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(ko-kr), .series-induction-component .series-induction-title:lang(ko-kr), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(ja-jp), .series-induction-component .series-induction-title:lang(ja-jp), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(tr-tr), .series-induction-component .series-induction-title:lang(tr-tr), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(el-gr), .series-induction-component .series-induction-title:lang(el-gr), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(th-th), .series-induction-component .series-induction-title:lang(th-th), .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(zh-tw), .series-induction-component .series-induction-title:lang(zh-tw) { text-transform: none; } .series-induction-component .series-induction-buttons .series-induction-buttons-or { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .series-induction-component .series-induction-buttons .series-induction-buttons-or:lang(ja-jp) { font-size: 13px; } .series-induction-component .series-induction-description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .series-induction-component .series-induction-description:lang(ja-jp) { font-size: 13px; } .series-induction-component { width: 362px; margin: 0px; padding: 0px; flex-direction: row; align-items: flex-start; justify-content: flex-start; position: relative; display: flex; visibility: visible; opacity: 1; flex: 1 1 auto; box-sizing: border-box; border-bottom: 1px solid #1e282d; } .series-induction-component:hover .series-induction-root { background: rgba(255,255,255,0.1); } .series-induction-component:hover .series-induction-root .series-induction-title { color: #f0e6d2; } .series-induction-component .series-induction-background { width: 100%; height: 100%; background-blend-mode: screen; background-position: center top; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; } .series-induction-component .series-induction-root { width: 362px; box-sizing: border-box; position: relative; display: flex; flex-direction: column; flex-wrap: wrap; min-height: 80px; justify-content: space-between; align-items: center; padding: 14px; transition: background 0.15s; } .series-induction-component .series-induction-buttons { width: 100%; display: flex; flex-direction: row; margin-left: auto; margin-right: auto; flex-wrap: wrap; justify-content: center; align-items: center; } .series-induction-component .series-induction-buttons > lol-uikit-flat-button { margin-top: 16px; min-width: 110px; } .series-induction-component .series-induction-buttons .series-induction-buttons-or { color: #a09b8c; margin-top: 16px; margin-right: 8px; margin-left: 8px; line-height: initial; } .series-induction-component .series-induction-title { font-weight: bold; color: #cdbe91; margin: 0px 0px 4px 0px; padding: 0px; line-height: 18px; font-size: 15px; text-align: center; transition: color 0.15s; } .series-induction-component .series-induction-description { color: #a09b8c; margin: 0px; margin-top: 2px; padding: 0px; text-align: center; line-height: 16px; display: flex; justify-content: center; } .series-induction-component .series-induction-description.expiring { margin-right: 20px; } .series-induction-component .series-induction-description.expiring:before { content: ""; display: block; background-repeat: no-repeat; flex: 0 0 auto; width: 16px; height: 16px; margin-right: 4px; background-image: url(/fe/lol-missions/Timeleft_AlertIcon.png); background-position: center; background-size: 16px 16px; } .series-induction-component .induction-accept { display: block; } .series-induction-component .visible { visibility: visible; } .series-induction-component .series-induction-accept-border { --border-width: 2px; bottom: -7px; left: -px; position: absolute; right: -20px; top: -7px; } .mission-card-component { flex: 0 0 auto; border-style: solid; border-width: thin; border-color: #785a28; background-color: rgba(0,0,0,0.55); overflow: hidden; } .mission-card-component .mission-item-component { flex: 0 0 auto; } .mission-celebration-view-component { -webkit-user-select: none; } .mission-celebration-view-component { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-celebration-view-component { width: 100%; height: 100%; left: 0; top: 0; outline: none; } .mission-celebration-view-component .mission-celebration-animation .hidden.high { opacity: 1; animation: 0.2s linear forwards fadeOut; } .mission-celebration-view-component .mission-celebration-animation .hidden.low { opacity: 0; visibility: hidden; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .mission-celebration-view-component .mission-celebration-animation .visible.high { opacity: 0; animation: 0.2s linear forwards fadeIn; } .mission-celebration-view-component .mission-celebration-animation .visible.low { opacity: 1; visibility: visible; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .mission-celebration-view-component .mission-celebration-animation .mission-reward-dissipate { position: absolute; top: 194px; height: 330px; width: 512px; left: 0; } .mission-celebration-view-component .mission-celebration-animation .intro-wrapper { opacity: 1; position: absolute; left: 0; width: 100%; justify-content: center; align-items: center; top: 194px; height: 330px; } .mission-celebration-view-component .mission-celebration-animation .mission-celebration-rewards-wrapper .mission-reward-divider { position: absolute; left: 0; top: -16px; width: 33px; height: 340px; width: 100%; background-position: top center; background-repeat: no-repeat; } .mission-celebration-rewards-component { -webkit-user-select: none; } .mission-celebration-rewards-component { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-mission-celebration-rewards { right: 1px; bottom: 1px; border: 1px solid #1e282d; overflow: hidden; } .mission-celebration-rewards-component { --reward_multi_width: 224px; --full_reward_height: 330px; --small_reward_height: 224px; --reward_top: 194px; width: 1280px; height: 720px; } .mission-celebration-rewards-component.large { --full_reward_height: 445px; --small_reward_height: 224px; --reward_top: 137px; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-dissipate { position: absolute; top: var(--reward_top); height: var(--full_reward_height); } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-dissipate.rewards-small-dissipate { width: 515px; left: 380px; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-dissipate.rewards-medium-dissipate { width: 900px; left: 190px; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-dissipate.rewards-large-dissipate { width: 1280px; left: 0px; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .hidden.high { opacity: 1; animation: 0.2s linear forwards fadeOut; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .hidden.low { opacity: 0; visibility: hidden; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .mission-celebration-rewards-component .mission-celebration-rewards-animation .visible.high { opacity: 0; animation: 0.2s linear forwards fadeIn; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .visible.low { opacity: 1; visibility: visible; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-wrapper { opacity: 0; display: flex; position: absolute; width: 100%; justify-content: center; align-items: flex-start; top: var(--reward_top); height: var(--full_reward_height); } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-wrapper.show-rewards.high { opacity: 0; animation: 0.2s linear forwards fadeIn; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-wrapper.show-rewards.low { opacity: 1; } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-wrapper.hide-rewards.high { opacity: 1; animation: 1s cubic-bezier(1, 0, 0.97, 0.82) forwards hideReward, 0.6s linear forwards fadeReward; } @-webkit-keyframes hideReward { from { top: var(--reward_top); } to { top: -120px; } } .mission-celebration-rewards-component .mission-celebration-rewards-animation .rewards-wrapper.hide-rewards.low { animation: 0.4s linear forwards fadeReward; } @-webkit-keyframes fadeReward { from { opacity: 1; } to { opacity: 0; } } .mission-celebration-reward-component .celebration-text-block .celebration-text, .mission-celebration-reward-component .celebration-text-block .celebration-footer { font-family: var(--font-display); } .mission-celebration-reward-component .celebration-text-block .celebration-text, .mission-celebration-reward-component .celebration-text-block .celebration-footer { -webkit-user-select: none; } .mission-celebration-reward-component .celebration-text-block .celebration-text, .mission-celebration-reward-component .celebration-text-block .celebration-footer { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-celebration-reward-component .celebration-text-block .celebration-text, .mission-celebration-reward-component .celebration-text-block .celebration-footer { text-transform: uppercase; } .mission-celebration-reward-component .celebration-text-block .celebration-text:lang(ko-kr), .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(ko-kr), .mission-celebration-reward-component .celebration-text-block .celebration-text:lang(ja-jp), .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(ja-jp), .mission-celebration-reward-component .celebration-text-block .celebration-text:lang(tr-tr), .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(tr-tr), .mission-celebration-reward-component .celebration-text-block .celebration-text:lang(el-gr), .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(el-gr), .mission-celebration-reward-component .celebration-text-block .celebration-text:lang(th-th), .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(th-th), .mission-celebration-reward-component .celebration-text-block .celebration-text:lang(zh-tw), .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(zh-tw) { text-transform: none; } .mission-celebration-reward-component .celebration-text-block .celebration-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .mission-celebration-reward-component .celebration-text-block .celebration-footer { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .mission-celebration-reward-component .celebration-text-block .celebration-footer:lang(ja-jp) { font-size: 13px; } .mission-celebration-reward-component { --reward_multi_width: 224px; --full_reward_height: 330px; --small_reward_height: 224px; --splash_width: 120px; --splash_height: 194px; --splash_frame_width: 145px; --splash_frame_height: 212px; --champion_icon_x: 89px; --champion_icon_y: 149px; --champion_icon_radius: 22px; --champion_chroma_y: -15px; --champion_chroma_size: 71px; --small_reward_size: 110px; --medium_reward_size: 110px; --medium_frame_size: 118px; --chroma_frame_height: 128px; position: relative; display: flex; justify-content: center; align-items: flex-start; width: var(--reward_multi_width); height: var(--full_reward_height); flex-direction: column; } .mission-celebration-reward-component.large { --full_reward_height: 445px; --small_reward_height: 320px; --splash_width: 178px; --splash_height: 300px; --reward_multi_width: 224px; --splash_frame_width: 217px; --splash_frame_height: 330px; --champion_icon_x: 77px; --champion_icon_y: 218px; --champion_icon_radius: 34px; --champion_chroma_y: -20px; --champion_chroma_size: 100px; --medium_reward_size: 153px; --medium_frame_size: 168px; --chroma_frame_height: 183px; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .mission-celebration-reward-component.intro-reward { -webkit-animation: 0.2s linear fadeIn; animation-fill-mode: forwards; } .mission-celebration-reward-component .celebration-reward-icon-wrapper { flex: 0 0 auto; position: relative; width: var(--reward_multi_width); height: var(--small_reward_height); display: flex; justify-content: center; align-items: center; opacity: 1; margin-top: 25px; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-champion-icon-circle { position: absolute; justify-content: center; align-items: center; display: flex; margin: auto; left: 0; right: 0; top: 147px; width: calc(var(--champion_icon_radius) * 2 + 6px); height: calc(var(--champion_icon_radius) * 2 + 6px); border-radius: 50%; background: #010a13; box-shadow: 0px 0px 3px 0.5px #1e282d; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-champion-icon-circle .celebration-reward-champion-icon-wrapper { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: calc(var(--champion_icon_radius) * 2 + 2px); height: calc(var(--champion_icon_radius) * 2 + 2px); border-radius: 50%; overflow: hidden; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-champion-icon-circle .celebration-reward-champion-icon-wrapper .celebration-reward-champion-icon { position: absolute; left: -3px; top: -3px; width: calc(var(--champion_icon_radius) * 2 + 7px); height: calc(var(--champion_icon_radius) * 2 + 7px); background-size: contain; box-shadow: inset 0px 0px 4px 3.5px #010a13; border-radius: 50%; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-border { left: 0; top: 0; position: absolute; width: var(--reward_multi_width); height: var(--small_reward_height); background: url(/fe/lol-missions/IconFrame.png); background-size: var(--medium_frame_size) var(--medium_frame_size); background-repeat: no-repeat; background-position: center; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-border.splash { background: url(/fe/lol-missions/ChampionFrame.png); background-size: var(--splash_frame_width) var(--splash_frame_height); background-repeat: no-repeat; background-position: center; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-border.skin { background: url(/fe/lol-missions/SkinFrame.png); background-size: var(--splash_frame_width) var(--splash_frame_height); background-repeat: no-repeat; background-position: center; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-border.shard { background: url(/fe/lol-missions/ShardFrame.png); background-size: var(--splash_frame_width) var(--splash_frame_height); background-repeat: no-repeat; background-position: center; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-border.chroma { height: var(--small_reward_height); background: url(/fe/lol-missions/ChromaFrame_2k.png); background-size: var(--medium_frame_size) var(--chroma_frame_height); background-repeat: no-repeat, no-repeat; background-position: center, center; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow { margin: 0; padding: 0; display: flex; padding: 2px; position: relative; justify-content: center; align-items: center; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-chroma-bg { left: 1px; top: -5px; margin: auto; width: var(--medium_reward_size); height: var(--medium_reward_size); position: absolute; object-fit: contain; background: url(/fe/lol-missions/Chroma_BG.png); -webkit-mask-image: url(/fe/lol-missions/ChromaMask.png); -webkit-mask-size: var(--medium_reward_size) var(--medium_reward_size); } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow.chroma { padding: 0px; width: var(--medium_reward_size); height: var(--medium_reward_size); } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper { width: var(--reward_multi_width); height: var(--small_reward_height); object-fit: contain; position: relative; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper .celebration-reward-image { width: inherit; height: inherit; object-fit: inherit; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper.splash { object-fit: cover; height: var(--splash_height); width: var(--splash_width); -webkit-mask-size: var(--splash_width) var(--splash_height); -webkit-mask-image: url(/fe/lol-missions/ChampionMask.png); } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper.splash.shard { -webkit-mask-size: var(--splash_width) var(--splash_height); -webkit-mask-image: url(/fe/lol-missions/SkinShardMask.png); } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper.splash.shard:before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #1b9eb0; opacity: 0.7; mix-blend-mode: color; -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, rgba(0,0,0,0.6) 100%, #fff 100%); } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper.chroma { height: var(--champion_chroma_size); width: var(--champion_chroma_size); top: var(--champion_chroma_y); object-fit: contain; } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper.small-reward { width: var(--small_reward_size); height: var(--small_reward_size); } .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper.spell, .mission-celebration-reward-component .celebration-reward-icon-wrapper .celebration-reward-glow .celebration-reward-image-wrapper.icon { position: relative; width: var(--medium_reward_size); height: var(--medium_reward_size); -webkit-mask-size: var(--medium_reward_size) var(--medium_reward_size); -webkit-mask-image: url(/fe/lol-missions/ChromaMask.png); } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .mission-celebration-reward-component .celebration-text-block { cursor: default; display: flex; flex: 0 0 auto; justify-content: flex-end; align-items: center; flex-direction: column; left: 0; height: 54px; width: var(--reward_multi_width); opacity: 0; -webkit-animation: 0.2s fadeIn 0.2s; animation-fill-mode: forwards; } .mission-celebration-reward-component .celebration-text-block .celebration-text { color: #cdbe91; min-height: 18px; max-height: 36px; line-height: 18px; vertical-align: middle; text-align: center; } .mission-celebration-reward-component .celebration-text-block .celebration-footer { color: #c89b3c; flex: 1 1 auto; height: 18px; line-height: 18px; vertical-align: middle; text-align: center; } .mission-celebration-card-component { -webkit-user-select: none; } .mission-celebration-card-component { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-mission-celebration-card { right: 1px; bottom: 1px; border: 1px solid #1e282d; overflow: hidden; } .mission-celebration-card-component { margin: 0; width: 1280px; height: 720px; position: absolute; left: 0; right: 1; top: 0; bottom: 1; margin: 0 0; padding: 0 0; } .mission-celebration-card-component .mission-celebration-card-animation .hidden.high { opacity: 1; animation: 0.2s linear forwards fadeOut; } .mission-celebration-card-component .mission-celebration-card-animation .hidden.low { opacity: 0; visibility: hidden; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .mission-celebration-card-component .mission-celebration-card-animation .visible.high { opacity: 0; animation: 0.2s linear forwards fadeIn; } .mission-celebration-card-component .mission-celebration-card-animation .visible.low { opacity: 1; visibility: visible; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper { position: absolute; flex: 1 1 auto; display: flex; text-align: left; align-items: center; justify-content: center; height: 297px; width: 100%; } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper.show-mission-card { -webkit-animation: 0.2s cubic-bezier(0, 0, 0, 1) forwards fromBottom; } @-webkit-keyframes fromBottom { from { top: 266px; } to { top: 194px; } } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-dissipate { position: absolute; left: 0; top: 0; width: 1280px; height: 330px; } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-item-wrapper { flex: 0 0 auto; } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-item-wrapper.hide-mission-card { -webkit-animation: 0.1s linear 0.3s forwards fadeOut; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-item-wrapper .mission-item-component { flex: 0 0 auto; border-bottom: none; border-style: solid; border-width: thin; border-color: #785a28; background-color: rgba(0,0,0,0.55); box-shadow: 0px 0px 2px #000; } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-item-wrapper .mission-item-component:hover { background: rgba(30,35,40,0.86); } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-item-wrapper .mission-item-component .new-vid-top .new-mission-bottom { display: none; } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-item-wrapper .mission-item-component .mission-new-border { visibility: hidden; } .mission-celebration-card-component .mission-celebration-card-animation .mission-wrapper .mission-item-wrapper .mission-item-component .overlay { visibility: hidden; } .level-up-wrapper { flex: 0 0 auto; } .level-up-wrapper .level-up-item-wrapper .summoner-icon-image { width: 140px; height: 140px; position: absolute; top: 96px; left: 570px; border-radius: 50%; opacity: 1; transition: opacity 0.3s; } .level-up-wrapper .level-up-item-wrapper .summoner-icon-image.hide { opacity: 0; } .level-up-wrapper .level-up-item-wrapper .level-up-circle { height: 183px; width: 183px; position: absolute; top: 74px; left: 548px; } .level-up-wrapper .level-up-item-wrapper.hide-level-up { -webkit-animation: 0.1s linear 0.3s forwards fadeOut; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .level-up-wrapper .mission-dissipate { z-index: -1; position: absolute; left: 0; width: 1280px; } .level-up-wrapper .mission-dissipate.mission-small-dissipate { top: 0px; height: 330px; } .level-up-wrapper .mission-dissipate.mission-medium-dissipate { top: -57px; height: 445px; } .mission-celebration-interactive-rewards-component { -webkit-user-select: none; } .mission-celebration-interactive-rewards-component { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-celebration-interactive-rewards-component { width: 100%; height: 100%; } .mission-celebration-interactive-rewards-component .mission-celebration-interactive-rewards-animation .interactive-rewards-wrapper { display: flex; width: 100%; justify-content: center; align-items: flex-start; opacity: 0; transition: opacity 1s; } .mission-celebration-interactive-rewards-component .mission-celebration-interactive-rewards-animation .interactive-rewards-wrapper.show { opacity: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6 { font-family: var(--font-display); } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6 { -webkit-user-select: none; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6 { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer, .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6 { text-transform: uppercase; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text:lang(ko-kr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer:lang(ko-kr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(ko-kr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text:lang(ja-jp), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer:lang(ja-jp), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(ja-jp), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text:lang(tr-tr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer:lang(tr-tr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(tr-tr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text:lang(el-gr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer:lang(el-gr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(el-gr), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text:lang(th-th), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer:lang(th-th), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(th-th), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text:lang(zh-tw), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer:lang(zh-tw), .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(zh-tw) { text-transform: none; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6 { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6:lang(ja-jp) { font-size: 13px; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6 { color: #a09b8c; } .mission-celebration-interactive-reward-component { position: relative; flex-grow: 1; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper { flex: 0 0 auto; position: relative; display: flex; justify-content: center; align-items: center; opacity: 1; cursor: pointer; padding-right: 1px; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper.champion { cursor: default; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper.selected { cursor: default; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper:hover >.celebration-text-block { opacity: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper:hover >.celebration-text-block .celebration-text { color: #f0e6d2; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper:hover >.celebration-text-block .celebration-footer { color: #c89b3c; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper:hover >.celebration-champion-details-block { opacity: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper:hover >.celebration-reward-image-wrapper >.text-gradient-backer { opacity: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper:hover >.celebration-reward-image-wrapper >.radial-glow { opacity: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper:hover >.celebration-reward-image-wrapper >.idle-filter { opacity: 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper { justify-content: center; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper .idle-filter { background: linear-gradient(rgba(1,1,1,0.5), rgba(1,1,1,0.5)); opacity: 1; transition: opacity 0.15s; height: 100%; width: 100%; position: absolute; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper .idle-filter.selected { opacity: 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper .idle-filter.dimmed:not(.selected) { background: linear-gradient(rgba(1,1,1,0.8), rgba(1,1,1,0.8)); } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper .text-gradient-backer { background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(188,181,160,0)); opacity: 0; transition: opacity 0.15s; height: 120px; width: 100%; position: absolute; bottom: 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper .text-gradient-backer.selected { opacity: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper .radial-glow { height: 120px; width: 100%; bottom: -2px; background-position: bottom center; background-image: url(/fe/lol-missions/champ_hover_highlight.png); background-size: contain; background-repeat: no-repeat; transition: opacity 0.15s ease-in; position: absolute; opacity: 0; z-index: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-reward-image-wrapper .celebration-reward-image { z-index: -1; position: relative; display: flex; object-fit: cover; height: 446px; width: 100%; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block { position: absolute; top: 365px; left: 0px; width: 100%; transition: opacity 0.15s; opacity: 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block.selected { opacity: 1; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block.selected.champion-text .celebration-text { color: #f0e6d2; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block.selected.champion-text .celebration-footer { color: #c89b3c; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block.champion-text { opacity: 1; top: 336px; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-text { color: #cdbe91; transition: color 0.3s; min-height: 18px; max-height: 30px; line-height: 18px; vertical-align: middle; text-align: center; padding-bottom: 7px; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-text-block .celebration-footer { color: #785a28; transition: color 0.3s; min-height: 18px; max-height: 36px; line-height: 18px; vertical-align: middle; text-align: center; overflow: hidden; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-champion-details-block { position: absolute; top: 182px; left: 0; width: 100%; transition: opacity 0.15s; opacity: 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-champion-details-wrapper { max-width: 75%; margin: auto; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .celebration-champion-details-wrapper >div { margin: 10px 0; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty { position: absolute; top: 400px; left: 0; width: 100%; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty .difficulty-graph { display: block; width: 120px; height: 16px; margin: auto; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty .difficulty-level-0 { background: url(/fe/lol-missions/DifficultyGraph_empty.png) no-repeat center/100%; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty .difficulty-level-1 { background: url(/fe/lol-missions/DifficultyGraph_Difficulty1.png) no-repeat center/100%; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty .difficulty-level-2 { background: url(/fe/lol-missions/DifficultyGraph_Difficulty2.png) no-repeat center/100%; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty .difficulty-level-3 { background: url(/fe/lol-missions/DifficultyGraph_Difficulty3.png) no-repeat center/100%; } .mission-celebration-interactive-reward-component .celebration-reward-wrapper .tactical-info-difficulty h6 { margin: 0 0 2px 0; text-align: center; } .mission-button .count-badge { font-family: var(--font-body); } .mission-button { position: relative; outline: none; border: none; background: none; cursor: pointer; padding: 0; background-image: url(/fe/lol-missions/mission_tracker_button.png); background-size: cover; background-position-y: 0px; height: 32px; width: 38px; } .mission-button:hover { background-position-y: -32px; } .mission-button:active { background-position-y: -64px; } .mission-button:disabled, .mission-button[disabled], .mission-button.disabled { cursor: default; background-position-y: -32px; } .mission-button.toggled { outline: none; border: none; background: none; cursor: pointer; padding: 0; background-image: url(/fe/lol-missions/mission_tracker_button.png); background-size: cover; background-position-y: -96px; } .mission-button.toggled:hover { background-position-y: -128px; } .mission-button.toggled:active { background-position-y: -160px; } .mission-button.toggled:disabled, .mission-button.toggled[disabled], .mission-button.toggled.disabled { cursor: default; background-position-y: -128px; } .mission-button.unread.use-animation { animation: pulseMissionButton 750ms 2 alternate ease-in-out; } .mission-button.unread:not(.use-animation) { -webkit-filter: brightness(1.5) saturate(1.5); } .mission-button[disabled], .mission-button.disabled { outline: none; border: none; background: none; cursor: pointer; padding: 0; background-image: url(/fe/lol-missions/mission_tracker_button.png); background-size: cover; background-position-y: -128px; cursor: default; } .mission-button[disabled]:hover, .mission-button.disabled:hover { background-position-y: -160px; } .mission-button[disabled]:active, .mission-button.disabled:active { background-position-y: -192px; } .mission-button[disabled]:disabled, .mission-button.disabled:disabled, .mission-button[disabled][disabled], .mission-button.disabled[disabled], .mission-button[disabled].disabled, .mission-button.disabled.disabled { cursor: default; background-position-y: -160px; } .mission-button .count-badge { font-weight: bold; border-radius: 3px; background-color: #c89b3c; color: #010a13; padding: 0 6px; height: 16px; font-size: 12px; display: flex; align-items: center; } .mission-button .social-count-badge { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); box-shadow: 0 0 2px rgba(1,10,19,0.5); } @-moz-keyframes pulseMissionButton { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.5) saturate(1.5); } } @-webkit-keyframes pulseMissionButton { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.5) saturate(1.5); } } @-o-keyframes pulseMissionButton { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.5) saturate(1.5); } } @keyframes pulseMissionButton { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.5) saturate(1.5); } }