.prompted-voting-component { width: 100%; height: 100%; box-sizing: border-box; } .prompted-voting-component, .prompted-voting-component .prompted-voting-header { font-family: var(--font-display); } .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-minutes, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-colon, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-seconds { font-family: var(--font-body); } .prompted-voting-component, .prompted-voting-component .prompted-voting-header { font-family: var(--font-display); } .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-minutes, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-colon, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-seconds { font-family: var(--font-body); } .prompted-voting-component .prompted-voting-header, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-minutes, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-colon, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-seconds { -webkit-user-select: none; } .prompted-voting-component .prompted-voting-header, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-minutes, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-colon, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-seconds { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .prompted-voting-component .prompted-voting-header { text-transform: uppercase; } .prompted-voting-component .prompted-voting-header:lang(ko-kr), .prompted-voting-component .prompted-voting-header:lang(ja-jp), .prompted-voting-component .prompted-voting-header:lang(tr-tr), .prompted-voting-component .prompted-voting-header:lang(el-gr), .prompted-voting-component .prompted-voting-header:lang(th-th), .prompted-voting-component .prompted-voting-header:lang(zh-tw) { text-transform: none; } .prompted-voting-component .prompted-voting-header { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .prompted-voting-component .prompted-voting-header:lang(ar-ae) { letter-spacing: 0; } .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-minutes, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-colon, .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-seconds { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-minutes:lang(ar-ae), .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-colon:lang(ar-ae), .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-seconds:lang(ar-ae) { letter-spacing: 0; } .prompted-voting-component { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: top; background-repeat: no-repeat; color: #c8aa6e; opacity: 1; } .prompted-voting-component.hidden { opacity: 0; transition: opacity 0.1s linear 1.4s; } .prompted-voting-component .prompted-voting-header { direction: ltr; position: absolute; top: 40px; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; pointer-events: none; } .prompted-voting-component .prompted-voting-player-container { direction: ltr; position: absolute; top: 100px; height: 520px; width: 100%; display: table; opacity: 1; transition: opacity 0.3s linear; text-align: center; } .prompted-voting-component .prompted-voting-skip-button { position: absolute; bottom: 55px; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 28px; transition: opacity 1s; } .prompted-voting-component .prompted-voting-skip-button.hidden { opacity: 0; pointer-events: none; } .prompted-voting-component .prompted-voting-timer { font-size: 0; position: absolute; bottom: 25px; left: 0; right: 0; text-align: center; transition: opacity 1s; pointer-events: none; } .prompted-voting-component .prompted-voting-timer.hidden { opacity: 0; } .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-minutes { text-align: right; width: 200px; display: inline-block; } .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-colon { display: inline-block; } .prompted-voting-component .prompted-voting-timer .prompted-voting-timer-seconds { text-align: left; width: 200px; display: inline-block; } .prompted-voting-component .prompted-voting-vignette { position: absolute; left: 0; width: 100%; height: 98px; background: rgba(0,0,0,0.55); overflow: hidden; } .prompted-voting-component .prompted-voting-vignette.top { top: 0; border-bottom: 2px solid #785a28; box-shadow: 0 4px 4px -4px #000; } .prompted-voting-component .prompted-voting-vignette.bottom { bottom: 0; border-top: 2px solid #785a28; box-shadow: 0 -4px 4px -4px #000; } .prompted-voting-component .prompted-voting-vignette .prompted-voting-vignette-glow { position: absolute; top: 50px; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 350px; height: 100px; background-image: radial-gradient(ellipse, #fff, rgba(255,255,255,0.5) 12.5%, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0.125) 37.5%, transparent 50%); opacity: 0.25; } .prompted-voting-player-component .prompted-voting-candidate-champ, .prompted-voting-player-component .prompted-voting-candidate-name, .prompted-voting-player-component .honor-category-prompt-header { font-family: var(--font-display); } .prompted-voting-player-component .honor-category-prompt-body { font-family: var(--font-body); } .prompted-voting-player-component .prompted-voting-candidate-champ, .prompted-voting-player-component .prompted-voting-candidate-name, .prompted-voting-player-component .honor-category-prompt-header, .prompted-voting-player-component .honor-category-prompt-body { -webkit-user-select: none; } .prompted-voting-player-component .prompted-voting-candidate-champ, .prompted-voting-player-component .prompted-voting-candidate-name, .prompted-voting-player-component .honor-category-prompt-header, .prompted-voting-player-component .honor-category-prompt-body { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .prompted-voting-player-component .prompted-voting-candidate-champ, .prompted-voting-player-component .prompted-voting-candidate-name, .prompted-voting-player-component .honor-category-prompt-header { text-transform: uppercase; } .prompted-voting-player-component .prompted-voting-candidate-champ:lang(ko-kr), .prompted-voting-player-component .prompted-voting-candidate-name:lang(ko-kr), .prompted-voting-player-component .honor-category-prompt-header:lang(ko-kr), .prompted-voting-player-component .prompted-voting-candidate-champ:lang(ja-jp), .prompted-voting-player-component .prompted-voting-candidate-name:lang(ja-jp), .prompted-voting-player-component .honor-category-prompt-header:lang(ja-jp), .prompted-voting-player-component .prompted-voting-candidate-champ:lang(tr-tr), .prompted-voting-player-component .prompted-voting-candidate-name:lang(tr-tr), .prompted-voting-player-component .honor-category-prompt-header:lang(tr-tr), .prompted-voting-player-component .prompted-voting-candidate-champ:lang(el-gr), .prompted-voting-player-component .prompted-voting-candidate-name:lang(el-gr), .prompted-voting-player-component .honor-category-prompt-header:lang(el-gr), .prompted-voting-player-component .prompted-voting-candidate-champ:lang(th-th), .prompted-voting-player-component .prompted-voting-candidate-name:lang(th-th), .prompted-voting-player-component .honor-category-prompt-header:lang(th-th), .prompted-voting-player-component .prompted-voting-candidate-champ:lang(zh-tw), .prompted-voting-player-component .prompted-voting-candidate-name:lang(zh-tw), .prompted-voting-player-component .honor-category-prompt-header:lang(zh-tw) { text-transform: none; } .prompted-voting-player-component .prompted-voting-candidate-champ, .prompted-voting-player-component .prompted-voting-candidate-name { text-transform: none; } .prompted-voting-player-component .prompted-voting-candidate-name, .prompted-voting-player-component .honor-category-prompt-header { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .prompted-voting-player-component .prompted-voting-candidate-name:lang(ar-ae), .prompted-voting-player-component .honor-category-prompt-header:lang(ar-ae) { letter-spacing: 0; } .prompted-voting-player-component .prompted-voting-candidate-name { letter-spacing: 0.025em; } .prompted-voting-player-component .prompted-voting-candidate-name:lang(ar-ae) { letter-spacing: 0; } .prompted-voting-player-component .prompted-voting-candidate-champ { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .prompted-voting-player-component .prompted-voting-candidate-champ:lang(ar-ae) { letter-spacing: 0; } .prompted-voting-player-component .prompted-voting-candidate-champ { letter-spacing: 0.0375em; } .prompted-voting-player-component .prompted-voting-candidate-champ:lang(ar-ae) { letter-spacing: 0; } .prompted-voting-player-component .honor-category-prompt-body { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .prompted-voting-player-component .honor-category-prompt-body:lang(ar-ae) { letter-spacing: 0; } .prompted-voting-player-component { position: relative; background-color: transparent; background-size: auto 100%; background-position: center; background-repeat: no-repeat; display: table-cell; opacity: 0.999; transition: opacity 0.2s ease-in; overflow: hidden; } .prompted-voting-player-component.dimmed { transition: opacity 0.5s linear; opacity: 0.8; } .prompted-voting-player-component.rejected { transition: opacity 0.5s linear; opacity: 0.8; } .prompted-voting-player-component.active { transition: opacity 0s ease; opacity: 1; } .prompted-voting-player-component.total1 { background-size: 100% auto; } .prompted-voting-player-component .prompted-voting-candidate-champ { position: absolute; bottom: 87px; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; pointer-events: none; } .prompted-voting-player-component .prompted-voting-candidate-name { position: absolute; bottom: 65px; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; pointer-events: none; } .prompted-voting-player-component .prompted-voting-candidate-overlay { background-color: #000; opacity: 0.0001; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.2s ease-in; } .prompted-voting-player-component .prompted-voting-candidate-overlay.dimmed { transition: opacity 0.2s; opacity: 0.45; } .prompted-voting-player-component .prompted-voting-candidate-overlay.active { transition: opacity 0s; opacity: 0; } .prompted-voting-player-component .prompted-voting-candidate-overlay.rejected { transition: opacity 1.5s ease-out; opacity: 0.8; } .prompted-voting-player-component .prompted-voting-category-select-container { width: 100%; height: 100%; position: absolute; font-size: 0; } .prompted-voting-player-component .honor-category-prompt-header { position: absolute; width: 100%; top: 322px; left: 0; text-align: center; pointer-events: none; font-size: 20px; } .prompted-voting-player-component .honor-category-prompt-body { color: #c8aa6e; position: absolute; width: 100%; top: 348px; left: 0; text-align: center; pointer-events: none; } .prompted-voting-category-select-component { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; display: inline-block; pointer-events: none; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector { position: absolute; top: 0; height: 100%; width: 33.3333%; opacity: 0; mix-blend-mode: overlay; background-size: cover; background-image: url("/fe/lol-honor/assets/Honor_Vote_Mid_Gradient.png"); pointer-events: auto; cursor: pointer; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.active { opacity: 1; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.selected { opacity: 1; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.rejected { opacity: 0; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position1 { left: 0; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position1.total1 { width: 568px; background-image: url("/fe/lol-honor/assets/Honor_Vote_Side_Gradient.png"); } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position1.total2 { width: 249px; background-image: url("/fe/lol-honor/assets/Honor_Vote_Side_Gradient.png"); } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position2 { left: 0; right: 0; margin-left: auto; margin-right: auto; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position2.total1 { width: 142px; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position2.total2 { width: 141px; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position3 { right: 0; } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position3.total1 { width: 568px; background-image: url("/fe/lol-honor/assets/Honor_Vote_Side_Gradient.png"); transform: scaleX(-1); } .prompted-voting-category-select-component .prompted-voting-honor-category-selector.position3.total2 { width: 249px; background-image: url("/fe/lol-honor/assets/Honor_Vote_Side_Gradient.png"); transform: scaleX(-1); } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container { position: absolute; top: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 33.3333%; height: 100%; pointer-events: none; transition: transform 2s cubic-bezier(0.1, 0.85, 0, 1); opacity: 0; } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.active { opacity: 1; } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.selected { opacity: 1; } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.total1 { width: 142px; } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.total2 { width: 142px; } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.position1 { transform: translateX(-100%); } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.position1.selected { transform: translateX(0); } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.position3 { transform: translateX(100%); } .prompted-voting-category-select-component .prompted-voting-honor-category-image-container.position3.selected { transform: translateX(0); } .prompted-voting-category-select-component .prompted-voting-honor-category-image { cursor: pointer; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: 72px; height: 72px; } .prompted-voting-category-select-component .prompted-voting-selection-animation-container { position: absolute; top: 0; bottom: 0; right: 0; left: 0; height: 0; width: 0; margin: auto; pointer-events: none; } .prompted-voting-category-select-component .prompted-voting-selection-glow { position: absolute; top: -36px; left: -36px; width: 72px; height: 72px; opacity: 0; animation: promptedVotingSelectionGlowAnimation 0.9s linear; } .prompted-voting-category-select-component .prompted-voting-selection-outro { position: absolute; top: -47px; left: -48px; width: 100px; height: 100px; opacity: 0; animation: promptedVotingSelectionOutroAnimation 1.8s linear; } @-moz-keyframes promptedVotingSelectionGlowAnimation { 0% { transform: scale(3); opacity: 0; } 75% { transform: scale(6); opacity: 1; } 90% { transform: scale(6); opacity: 1; } 100% { transform: scale(0); opacity: 1; } } @-webkit-keyframes promptedVotingSelectionGlowAnimation { 0% { transform: scale(3); opacity: 0; } 75% { transform: scale(6); opacity: 1; } 90% { transform: scale(6); opacity: 1; } 100% { transform: scale(0); opacity: 1; } } @-o-keyframes promptedVotingSelectionGlowAnimation { 0% { transform: scale(3); opacity: 0; } 75% { transform: scale(6); opacity: 1; } 90% { transform: scale(6); opacity: 1; } 100% { transform: scale(0); opacity: 1; } } @keyframes promptedVotingSelectionGlowAnimation { 0% { transform: scale(3); opacity: 0; } 75% { transform: scale(6); opacity: 1; } 90% { transform: scale(6); opacity: 1; } 100% { transform: scale(0); opacity: 1; } } @-moz-keyframes promptedVotingSelectionOutroAnimation { 0% { transform: scale(0); opacity: 0; } 45% { transform: scale(2); opacity: 0; } 50% { transform: scale(3); opacity: 1; } 100% { transform: scale(6); opacity: 0; } } @-webkit-keyframes promptedVotingSelectionOutroAnimation { 0% { transform: scale(0); opacity: 0; } 45% { transform: scale(2); opacity: 0; } 50% { transform: scale(3); opacity: 1; } 100% { transform: scale(6); opacity: 0; } } @-o-keyframes promptedVotingSelectionOutroAnimation { 0% { transform: scale(0); opacity: 0; } 45% { transform: scale(2); opacity: 0; } 50% { transform: scale(3); opacity: 1; } 100% { transform: scale(6); opacity: 0; } } @keyframes promptedVotingSelectionOutroAnimation { 0% { transform: scale(0); opacity: 0; } 45% { transform: scale(2); opacity: 0; } 50% { transform: scale(3); opacity: 1; } 100% { transform: scale(6); opacity: 0; } }