.ready-check-root-element { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; color: #f0e6d2; width: 530px; height: 530px; -webkit-user-select: none; } .ready-check-root-element .ready-check-visible-state-hack { display: flex; flex-direction: column; justify-content: center; align-items: center; direction: ltr; } .ready-check-map-background { -webkit-mask-image: url(/fe/lol-ready-check/default-background.png); -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; width: 410px; height: 410px; position: absolute; left: calc(50% - 205px); top: calc(50% - 205px); } .ready-check-map-background-declined { -webkit-filter: grayscale(100%); } .ready-check-frame-element { background-image: url(/fe/lol-ready-check/ready-check-main-frame.png); position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .ready-check-timer { position: absolute; top: 2px; left: 0; bottom: 0; right: 0; display: flex; justify-content: center; align-items: center; } .ready-check-timer-countdown, .ready-check-timer-accepted-intro, .ready-check-timer-accepted-idle, .ready-check-timer-declined { display: flex; } .ready-check-map-icon { position: relative; width: 92px; height: 92px; } .ready-check-map-icon .ready-check-map-icon-image { width: 100%; } .ready-check-status-text .ready-check-status-title, .ready-check-status-text .ready-check-status-title:lang(ja-jp) { font-family: var(--font-display); } .ready-check-status-text .ready-check-status-details { font-family: var(--font-body); } .ready-check-status-text .ready-check-status-title, .ready-check-status-text .ready-check-status-title:lang(ja-jp), .ready-check-status-text .ready-check-status-details { -webkit-user-select: none; } .ready-check-status-text .ready-check-status-title, .ready-check-status-text .ready-check-status-title:lang(ja-jp), .ready-check-status-text .ready-check-status-details { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .ready-check-status-text .ready-check-status-title, .ready-check-status-text .ready-check-status-title:lang(ja-jp) { text-transform: uppercase; } .ready-check-status-text .ready-check-status-title:lang(ko-kr), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(ko-kr), .ready-check-status-text .ready-check-status-title:lang(ja-jp), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(ja-jp), .ready-check-status-text .ready-check-status-title:lang(tr-tr), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(tr-tr), .ready-check-status-text .ready-check-status-title:lang(el-gr), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(el-gr), .ready-check-status-text .ready-check-status-title:lang(th-th), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(th-th), .ready-check-status-text .ready-check-status-title:lang(zh-tw), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(zh-tw) { text-transform: none; } .ready-check-status-text .ready-check-status-title { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .ready-check-status-text .ready-check-status-title:lang(ja-jp) { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .ready-check-status-text .ready-check-status-details { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .ready-check-status-text .ready-check-status-details:lang(ja-jp) { font-size: 13px; } .ready-check-status-text { position: relative; width: 300px; height: 80px; direction: ltr; } .ready-check-status-text .ready-check-status-title { margin: 10px auto 0 auto; text-align: center; } .ready-check-status-text .ready-check-status-details { color: #a09b8c; text-align: center; margin-top: 5px; } .ready-check-status-text .ready-check-bullet { display: inline-block; margin: 0 0.3em; } .ready-check-buttons-element { position: absolute; display: flex; width: 300px; flex-direction: column; align-items: center; left: calc(50% - 150px); bottom: -11px ; } .ready-check-buttons-element .ready-check-decline-button { width: 120px; margin-top: 8px; transition: 100ms opacity; } .ready-check-button-accept { font-family: var(--font-display); } .ready-check-button-accept { -webkit-user-select: none; } .ready-check-button-accept { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .ready-check-button-accept { text-transform: uppercase; } .ready-check-button-accept:lang(ko-kr), .ready-check-button-accept:lang(ja-jp), .ready-check-button-accept:lang(tr-tr), .ready-check-button-accept:lang(el-gr), .ready-check-button-accept:lang(th-th), .ready-check-button-accept:lang(zh-tw) { text-transform: none; } .ready-check-button-accept { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .ready-check-button-accept { background-image: url(/fe/lol-ready-check/button-accept-default.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 212px; height: 70px; box-sizing: border-box; padding-top: 20px; text-align: center; color: #a3c7c7; cursor: pointer; } .ready-check-button-accept:hover:not(.ready-check-button-accept-disabled) { background-image: url(/fe/lol-ready-check/button-accept-hover.png); color: #cdfafa; } .ready-check-button-accept-disabled { cursor: default; background-image: url(/fe/lol-ready-check/button-accept-disabled.png); color: #5c5b57; } .ready-check-button-decline { width: 120px; margin-top: 8px; transition: 100ms opacity; }