.max-size { height: 100%; width: 100%; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text { font-family: var(--font-display); } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container { font-family: var(--font-body); } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text, .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container { -webkit-user-select: none; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text, .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text { text-transform: uppercase; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text:lang(ko-kr), .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text:lang(ja-jp), .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text:lang(tr-tr), .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text:lang(el-gr), .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text:lang(th-th), .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text:lang(zh-tw) { text-transform: none; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text:lang(ar-ae) { letter-spacing: 0; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container:lang(ja-jp) { font-size: 13px; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container:lang(ar-ae) { letter-spacing: 0; } .lol-loading-screen-container { position: fixed; display: flex; align-items: center; justify-content: center; flex-direction: column; pointer-events: all; top: 0; left: 0; z-index: 1; width: 1280px; height: 720px; direction: rtl; } .lol-loading-screen-container .hidden { display: none; } .lol-loading-screen-container .lol-loading-screen-spinner { position: absolute; content: ""; left: 50%; top: 50%; } .lol-loading-screen-container .lol-loading-screen-lol-icon { width: 140px; height: 149px; background-image: url(/fe/lol-loading-screen/lol_icon.png); background-repeat: no-repeat; background-size: contain; margin-top: 50px; margin-bottom: 10px; } .lol-loading-screen-container.lol-loading-screen-default-state { background: url(/fe/lol-loading-screen/loading-bg.png) #010a13 no-repeat; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-spinner { background-image: url(/fe/lol-loading-screen/inner-dashes.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 504px; height: 504px; animation: loading-spinner 60s linear infinite; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-container { height: 150px; display: flex; flex-direction: column; align-items: center; position: relative; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-status-text { color: #c8aa6e; margin-top: 6px; margin-bottom: 6px; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-progress-bar-container { position: relative; width: 200px; height: 16px; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-progress-bar-frame { position: absolute; width: 100%; height: 11px; border: thin solid #c8aa6e; border-radius: 6px; box-sizing: border-box; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-progress-bar-progress { position: absolute; width: 100%; height: 9px; top: 1px; background-image: linear-gradient(to right, #005a82 10%, #0a96aa 70%, #cdfafa 125%); transform-origin: left; transform: scaleX(0); border-radius: 6px; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-container.hidden { display: none; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-item-container { width: inherit; display: flex; justify-content: space-between; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-login-queue-status-item-value { color: #c8aa6e; } .lol-loading-screen-container.lol-loading-screen-default-state .lol-loading-screen-cancel-queue-button { margin-top: 32px; min-width: 100px; } .lol-loading-screen-container.lol-loading-screen-gameflow-state { background-repeat: no-repeat; } .lol-loading-screen-container.lol-loading-screen-gameflow-state .lol-loading-screen-spinner { display: none; } @-moz-keyframes loading-spinner { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes loading-spinner { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @-o-keyframes loading-spinner { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes loading-spinner { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }