.update-icon-component-container .update-icon-title, .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-title, .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-subtitle { font-family: var(--font-display); } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-unranked-label, .update-icon-component-container .update-icon-saving-error-container .update-icon-saving-error { font-family: var(--font-body); } .update-icon-component-container .update-icon-title, .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-title, .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-subtitle, .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-unranked-label, .update-icon-component-container .update-icon-saving-error-container .update-icon-saving-error { -webkit-user-select: none; } .update-icon-component-container .update-icon-title, .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-title, .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-subtitle, .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-unranked-label, .update-icon-component-container .update-icon-saving-error-container .update-icon-saving-error { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .update-icon-component-container .update-icon-title, .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-title, .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-subtitle { text-transform: uppercase; } .update-icon-component-container .update-icon-title:lang(ko-kr), .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-title:lang(ko-kr), .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-subtitle:lang(ko-kr), .update-icon-component-container .update-icon-title:lang(ja-jp), .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-title:lang(ja-jp), .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-subtitle:lang(ja-jp), .update-icon-component-container .update-icon-title:lang(tr-tr), .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-title:lang(tr-tr), .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-subtitle:lang(tr-tr), .update-icon-component-container .update-icon-title:lang(el-gr), .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-title:lang(el-gr), .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-subtitle:lang(el-gr), .update-icon-component-container .update-icon-title:lang(th-th), .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-title:lang(th-th), .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-subtitle:lang(th-th), .update-icon-component-container .update-icon-title:lang(zh-tw), .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-title:lang(zh-tw), .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-subtitle:lang(zh-tw) { text-transform: none; } .update-icon-component-container .update-icon-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-subtitle { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-subtitle:lang(ja-jp) { font-size: 13px; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-unranked-label, .update-icon-component-container .update-icon-saving-error-container .update-icon-saving-error { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-unranked-label:lang(ja-jp), .update-icon-component-container .update-icon-saving-error-container .update-icon-saving-error:lang(ja-jp) { font-size: 13px; } .update-icon-component { -webkit-user-select: none; width: 100%; height: 100%; } .update-icon-component lol-uikit-full-page-backdrop { display: flex; align-items: center; justify-content: center; } .update-icon-component-container { background-color: #010a13; position: relative; width: 820px; height: 500px; } .update-icon-component-container .update-icon-close-btn { position: absolute; top: 9px; right: 11px; background-image: url(/fe/lol-summoner-icon-picker/x.png); width: 20px; height: 20px; cursor: pointer; } .update-icon-component-container .update-icon-close-btn:after { content: url(/fe/lol-summoner-icon-picker/x_hover.png) url(/fe/lol-summoner-icon-picker/x_active.png); display: none; height: 0; width: 0; } .update-icon-component-container .update-icon-close-btn:hover { background-image: url(/fe/lol-summoner-icon-picker/x_hover.png); } .update-icon-component-container .update-icon-close-btn:active { background-image: url(/fe/lol-summoner-icon-picker/x_active.png); } .update-icon-component-container .update-icon-title { cursor: default; box-sizing: border-box; height: 67px; line-height: 67px; padding-left: 16px; padding-right: 16px; border-bottom: 1px solid #1e2328; } .update-icon-component-container .border-and-icon-container { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; } .update-icon-component-container .border-and-icon-container .border-list-container { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 290px; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 290px; height: 200px; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option.crest-ranked { height: 232px; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option:hover { cursor: pointer; background: rgba(240,230,210,0.1); } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-title { color: #cdbe91; margin-top: 9px; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-title.border-unavailable { color: #3c3c41; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option:hover .border-option-title { color: #f0e6d2; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option:hover .border-option-title.border-unavailable { color: #a09b8c; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-subtitle { color: #c89b3c; margin-top: 1px; margin-bottom: 5px; height: 16px; flex-shrink: 0; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-subtitle.border-unavailable { margin-bottom: -4px; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option:hover .border-option-subtitle { color: #fabe0a; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-crest { position: relative; height: 100px; width: 100px; margin: 18px 20px 20px 20px; opacity: 0.5; transition: opacity 0.2s; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-crest.crest-ranked { margin: 34px 20px 20px 20px; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-crest.border-full-opacity { opacity: 1; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-unranked-label { color: #c89b3c; margin-top: 1px; height: 16px; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-ranked-crest-placeholder { height: 140px; width: 140px; flex-shrink: 0; background-image: url(/fe/lol-summoner-icon-picker/ranked_crest_placeholder.png); background-repeat: no-repeat; background-position: center; background-size: contain; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option .border-option-lock { position: relative; min-height: 78px; min-width: 78px; top: -113px; flex-shrink: 0; background-image: url(/fe/lol-summoner-icon-picker/lock.png); background-repeat: no-repeat; background-position: center; background-size: contain; } .update-icon-component-container .border-and-icon-container .border-list-container .border-option:hover .border-option-lock { background-image: url(/fe/lol-summoner-icon-picker/lock-hover.png); } .update-icon-component-container .border-and-icon-container .update-icon-list { padding: 18px 3px 0 18px; height: 360px; box-sizing: border-box; width: 530px; border-width: 0 0 0 1px; border-left-style: solid; border-image: linear-gradient(to bottom, #1e2328, #1e2328, #1e2328, rgba(0,0,0,0)) 1 100%; } .update-icon-component-container .border-and-icon-container .update-icon-list lol-uikit-scrollable { padding: 1px; box-sizing: border-box; font-size: 0; } .update-icon-component-container .border-and-icon-container .update-icon-list .update-icon-list-item { display: inline-block; border: 1px solid #3e3501; width: 58px; height: 58px; margin-right: 12px; margin-bottom: 12px; } .update-icon-component-container .border-and-icon-container .update-icon-list .update-icon-list-item:nth-child(7n) { margin-right: 0; } .update-icon-component-container .border-and-icon-container .update-icon-list .update-icon-list-item:nth-child(7n).selected { margin-right: 0; } .update-icon-component-container .border-and-icon-container .update-icon-list .update-icon-list-item:nth-last-child(-n+7) { margin-bottom: 0; } .update-icon-component-container .border-and-icon-container .update-icon-list .update-icon-list-item:nth-last-child(-n+7).selected { margin-bottom: 0; } .update-icon-component-container .border-and-icon-container .update-icon-list .update-icon-list-item img { width: 58px; height: 58px; -webkit-user-drag: none; transition: -webkit-filter 100ms linear; } .update-icon-component-container .border-and-icon-container .update-icon-list .update-icon-list-item img:hover { cursor: pointer; -webkit-filter: brightness(1.2); } .update-icon-component-container .border-and-icon-container .update-icon-list .update-icon-list-item:hover { border: 1px solid transparent; border-image: linear-gradient(to top, #c89b3c 4%, #f0e6d2 100%); border-image-slice: 1; } .update-icon-component-container .border-and-icon-container .update-icon-list .update-icon-list-item.selected { border: 2px solid transparent; border-image: linear-gradient(to top, #c8aa6e 0%, #c89b3c 44%, #a07b32 59%, #785a28 100%); border-image-slice: 1; margin-top: -1px; margin-left: -1px; margin-right: 11px; margin-bottom: 11px; } .update-icon-component-container .bottom-row-container { position: absolute; bottom: -2px; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; height: 32px; width: 820px; } .update-icon-component-container .bottom-row-container .empty-bottom-row-spacer { width: 100%; } .update-icon-component-container .bottom-row-container .update-icon-save-btn { margin-left: 25px; margin-right: 25px; } .update-icon-component-container .bottom-row-container .update-icon-save-btn .inner-save-btn { min-width: 100px; } .update-icon-component-container .bottom-row-container .past-ranked-banner-checkbox { width: 100%; margin-top: -3px; } .update-icon-component-container .update-icon-saving-spinner { position: absolute; bottom: 28px; display: flex; justify-content: center; width: 100%; } .update-icon-component-container .update-icon-saving-error-container { position: absolute; bottom: 32px; display: flex; justify-content: center; align-items: center; height: 40px; width: 100%; } .update-icon-component-container .update-icon-saving-error-container .update-icon-saving-error { color: #ff2345; width: 270px; text-align: center; }