lol-friend-finder-button[dim] .friend-finder-button { background-color: #463714; } .friend-finder-button { cursor: pointer; width: inherit; height: inherit; -webkit-mask: url(/fe/lol-friend-finder/add_person_mask.png) no-repeat center; background-color: #c8aa6e; -webkit-mask-size: 18px; } .friend-finder-button[disabled] { opacity: 0.5; cursor: default; } .friend-finder-button:not([disabled]):hover { background-color: #f0e6d2; } .friend-finder-button:not([disabled]):active { background-color: #463714; } lol-friend-finder-by-social-network .social-networks .social-network, lol-friend-finder-by-social-network .social-header, lol-friend-finder-social-summoner .social-profile-name, lol-friend-finder-modal .title, lol-friend-finder-modal .friend-finder-panel-header-title, lol-friend-finder-modal .header { font-family: var(--font-display); } .no-recently-played-summoners, lol-friend-finder-by-social-network .social-description, lol-friend-finder-by-social-network .social-network-error, lol-friend-finder-by-social-network .social-info, lol-friend-finder-by-social-network .faq-link, lol-friend-finder-by-social-network .social-header.suggested-contacts-header .unlink-link, lol-friend-finder-by-social-network #social-summoner-list .empty, lol-friend-finder-by-social-network .unlinked-networks .unlinked-networks-header, lol-friend-finder-by-summoner-name .description, lol-friend-finder-recent-summoner .summoner-name, lol-friend-finder-social-summoner .social-summoner-name, lol-friend-finder-social-summoner .social-dismiss-link, lol-friend-finder-requested-player .player-name-wrapper, lol-friend-finder-modal .feature-not-implemented { font-family: var(--font-body); } .no-recently-played-summoners, lol-friend-finder-by-social-network .social-description, lol-friend-finder-by-social-network .social-network-error, lol-friend-finder-by-social-network .social-networks .social-network, lol-friend-finder-by-social-network .social-info, lol-friend-finder-by-social-network .faq-link, lol-friend-finder-by-social-network .social-header, lol-friend-finder-by-social-network .social-header.suggested-contacts-header .unlink-link, lol-friend-finder-by-social-network #social-summoner-list .empty, lol-friend-finder-by-social-network .unlinked-networks .unlinked-networks-header, lol-friend-finder-by-summoner-name .description, lol-friend-finder-recent-summoner .summoner-name, lol-friend-finder-social-summoner .social-profile-name, lol-friend-finder-social-summoner .social-summoner-name, lol-friend-finder-social-summoner .social-dismiss-link, lol-friend-finder-requested-player .player-name-wrapper, lol-friend-finder-modal .title, lol-friend-finder-modal .friend-finder-panel-header-title, lol-friend-finder-modal .header, lol-friend-finder-modal .feature-not-implemented { -webkit-user-select: none; } .no-recently-played-summoners, lol-friend-finder-by-social-network .social-description, lol-friend-finder-by-social-network .social-network-error, lol-friend-finder-by-social-network .social-networks .social-network, lol-friend-finder-by-social-network .social-info, lol-friend-finder-by-social-network .faq-link, lol-friend-finder-by-social-network .social-header, lol-friend-finder-by-social-network .social-header.suggested-contacts-header .unlink-link, lol-friend-finder-by-social-network #social-summoner-list .empty, lol-friend-finder-by-social-network .unlinked-networks .unlinked-networks-header, lol-friend-finder-by-summoner-name .description, lol-friend-finder-recent-summoner .summoner-name, lol-friend-finder-social-summoner .social-profile-name, lol-friend-finder-social-summoner .social-summoner-name, lol-friend-finder-social-summoner .social-dismiss-link, lol-friend-finder-requested-player .player-name-wrapper, lol-friend-finder-modal .title, lol-friend-finder-modal .friend-finder-panel-header-title, lol-friend-finder-modal .header, lol-friend-finder-modal .feature-not-implemented { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } lol-friend-finder-by-social-network .social-networks .social-network, lol-friend-finder-by-social-network .social-header, lol-friend-finder-social-summoner .social-profile-name, lol-friend-finder-modal .title, lol-friend-finder-modal .friend-finder-panel-header-title, lol-friend-finder-modal .header { text-transform: uppercase; } lol-friend-finder-by-social-network .social-networks .social-network:lang(ko-kr), lol-friend-finder-by-social-network .social-header:lang(ko-kr), lol-friend-finder-social-summoner .social-profile-name:lang(ko-kr), lol-friend-finder-modal .title:lang(ko-kr), lol-friend-finder-modal .friend-finder-panel-header-title:lang(ko-kr), lol-friend-finder-modal .header:lang(ko-kr), lol-friend-finder-by-social-network .social-networks .social-network:lang(ja-jp), lol-friend-finder-by-social-network .social-header:lang(ja-jp), lol-friend-finder-social-summoner .social-profile-name:lang(ja-jp), lol-friend-finder-modal .title:lang(ja-jp), lol-friend-finder-modal .friend-finder-panel-header-title:lang(ja-jp), lol-friend-finder-modal .header:lang(ja-jp), lol-friend-finder-by-social-network .social-networks .social-network:lang(tr-tr), lol-friend-finder-by-social-network .social-header:lang(tr-tr), lol-friend-finder-social-summoner .social-profile-name:lang(tr-tr), lol-friend-finder-modal .title:lang(tr-tr), lol-friend-finder-modal .friend-finder-panel-header-title:lang(tr-tr), lol-friend-finder-modal .header:lang(tr-tr), lol-friend-finder-by-social-network .social-networks .social-network:lang(el-gr), lol-friend-finder-by-social-network .social-header:lang(el-gr), lol-friend-finder-social-summoner .social-profile-name:lang(el-gr), lol-friend-finder-modal .title:lang(el-gr), lol-friend-finder-modal .friend-finder-panel-header-title:lang(el-gr), lol-friend-finder-modal .header:lang(el-gr), lol-friend-finder-by-social-network .social-networks .social-network:lang(th-th), lol-friend-finder-by-social-network .social-header:lang(th-th), lol-friend-finder-social-summoner .social-profile-name:lang(th-th), lol-friend-finder-modal .title:lang(th-th), lol-friend-finder-modal .friend-finder-panel-header-title:lang(th-th), lol-friend-finder-modal .header:lang(th-th), lol-friend-finder-by-social-network .social-networks .social-network:lang(zh-tw), lol-friend-finder-by-social-network .social-header:lang(zh-tw), lol-friend-finder-social-summoner .social-profile-name:lang(zh-tw), lol-friend-finder-modal .title:lang(zh-tw), lol-friend-finder-modal .friend-finder-panel-header-title:lang(zh-tw), lol-friend-finder-modal .header:lang(zh-tw) { text-transform: none; } lol-friend-finder-modal .title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } lol-friend-finder-modal .title:lang(ar-ae) { letter-spacing: 0; } lol-friend-finder-by-social-network .social-networks .social-network, lol-friend-finder-by-social-network .social-header, lol-friend-finder-social-summoner .social-profile-name, lol-friend-finder-modal .friend-finder-panel-header-title, lol-friend-finder-modal .header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } lol-friend-finder-by-social-network .social-networks .social-network:lang(ja-jp), lol-friend-finder-by-social-network .social-header:lang(ja-jp), lol-friend-finder-social-summoner .social-profile-name:lang(ja-jp), lol-friend-finder-modal .friend-finder-panel-header-title:lang(ja-jp), lol-friend-finder-modal .header:lang(ja-jp) { font-size: 13px; } lol-friend-finder-by-social-network .social-networks .social-network:lang(ar-ae), lol-friend-finder-by-social-network .social-header:lang(ar-ae), lol-friend-finder-social-summoner .social-profile-name:lang(ar-ae), lol-friend-finder-modal .friend-finder-panel-header-title:lang(ar-ae), lol-friend-finder-modal .header:lang(ar-ae) { letter-spacing: 0; } lol-friend-finder-modal .friend-finder-panel-header-title { color: #a09b8c; } lol-friend-finder-by-social-network .social-description { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } lol-friend-finder-by-social-network .social-description:lang(ar-ae) { letter-spacing: 0; } .no-recently-played-summoners, lol-friend-finder-by-social-network .social-network-error, lol-friend-finder-by-social-network .social-info, lol-friend-finder-by-social-network #social-summoner-list .empty, lol-friend-finder-by-social-network .unlinked-networks .unlinked-networks-header, lol-friend-finder-by-summoner-name .description, lol-friend-finder-recent-summoner .summoner-name, lol-friend-finder-social-summoner .social-summoner-name, lol-friend-finder-requested-player .player-name-wrapper, lol-friend-finder-modal .feature-not-implemented { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .no-recently-played-summoners:lang(ja-jp), lol-friend-finder-by-social-network .social-network-error:lang(ja-jp), lol-friend-finder-by-social-network .social-info:lang(ja-jp), lol-friend-finder-by-social-network #social-summoner-list .empty:lang(ja-jp), lol-friend-finder-by-social-network .unlinked-networks .unlinked-networks-header:lang(ja-jp), lol-friend-finder-by-summoner-name .description:lang(ja-jp), lol-friend-finder-recent-summoner .summoner-name:lang(ja-jp), lol-friend-finder-social-summoner .social-summoner-name:lang(ja-jp), lol-friend-finder-requested-player .player-name-wrapper:lang(ja-jp), lol-friend-finder-modal .feature-not-implemented:lang(ja-jp) { font-size: 13px; } .no-recently-played-summoners:lang(ar-ae), lol-friend-finder-by-social-network .social-network-error:lang(ar-ae), lol-friend-finder-by-social-network .social-info:lang(ar-ae), lol-friend-finder-by-social-network #social-summoner-list .empty:lang(ar-ae), lol-friend-finder-by-social-network .unlinked-networks .unlinked-networks-header:lang(ar-ae), lol-friend-finder-by-summoner-name .description:lang(ar-ae), lol-friend-finder-recent-summoner .summoner-name:lang(ar-ae), lol-friend-finder-social-summoner .social-summoner-name:lang(ar-ae), lol-friend-finder-requested-player .player-name-wrapper:lang(ar-ae), lol-friend-finder-modal .feature-not-implemented:lang(ar-ae) { letter-spacing: 0; } lol-friend-finder-by-social-network .faq-link, lol-friend-finder-by-social-network .social-header.suggested-contacts-header .unlink-link, lol-friend-finder-social-summoner .social-dismiss-link { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } lol-friend-finder-by-social-network .faq-link:lang(ja-jp), lol-friend-finder-by-social-network .social-header.suggested-contacts-header .unlink-link:lang(ja-jp), lol-friend-finder-social-summoner .social-dismiss-link:lang(ja-jp) { font-size: 13px; } lol-friend-finder-by-social-network .faq-link:lang(ar-ae), lol-friend-finder-by-social-network .social-header.suggested-contacts-header .unlink-link:lang(ar-ae), lol-friend-finder-social-summoner .social-dismiss-link:lang(ar-ae) { letter-spacing: 0; } lol-friend-finder-by-social-network .social-header.suggested-contacts-header .unlink-link, lol-friend-finder-social-summoner .social-dismiss-link { color: #cdbe91; } lol-friend-finder-by-social-network .social-header.suggested-contacts-header .unlink-link:hover, lol-friend-finder-social-summoner .social-dismiss-link:hover, lol-friend-finder-by-social-network .social-header.suggested-contacts-header .unlink-link.hover, lol-friend-finder-social-summoner .social-dismiss-link.hover { color: #f0e6d2; } lol-friend-finder-by-social-network .faq-link { color: #0596aa; text-decoration: none; } lol-friend-finder-by-social-network .faq-link:hover, lol-friend-finder-by-social-network .faq-link.hover { color: #cdfafa; } lol-friend-finder-by-social-network .faq-link:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-friend-finder/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } lol-friend-finder-by-social-network .faq-link:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } lol-friend-finder-by-social-network .faq-link:hover:after { background-color: #cdfafa; } lol-friend-finder-by-social-network .social-networks .social-network, lol-friend-finder-by-social-network .social-header, lol-friend-finder-social-summoner .social-profile-name, lol-friend-finder-modal .title, lol-friend-finder-modal .friend-finder-panel-header-title, lol-friend-finder-modal .header { font-family: var(--font-display); } .no-recently-played-summoners, lol-friend-finder-by-social-network .social-description, lol-friend-finder-by-social-network .social-network-error, lol-friend-finder-by-social-network .social-info, lol-friend-finder-by-social-network .faq-link, lol-friend-finder-by-social-network .social-header.suggested-contacts-header .unlink-link, lol-friend-finder-by-social-network #social-summoner-list .empty, lol-friend-finder-by-social-network .unlinked-networks .unlinked-networks-header, lol-friend-finder-by-summoner-name .description, lol-friend-finder-recent-summoner .summoner-name, lol-friend-finder-social-summoner .social-summoner-name, lol-friend-finder-social-summoner .social-dismiss-link, lol-friend-finder-requested-player .player-name-wrapper, lol-friend-finder-modal .feature-not-implemented { font-family: var(--font-body); } .recently-played-container { display: flex; flex-direction: column; margin-bottom: 10px; } #recently-played-with-list { display: flex; flex-wrap: wrap; align-content: flex-start; } .no-recently-played-summoners { color: #a09b8c; background: url(/fe/lol-friend-finder/poro_sad.png) no-repeat center; padding-top: 150px; text-align: center; } lol-friend-finder-by-social-network { display: flex; flex-direction: column; margin-bottom: 10px; } lol-friend-finder-by-social-network .social-description { text-align: center; margin: 40px 0 25px; } lol-friend-finder-by-social-network .social-network-error { color: #a09b8c; background: url(/fe/lol-friend-finder/poro_question.png) no-repeat center; padding: 150px 130px 0; text-align: center; } lol-friend-finder-by-social-network .social-networks { flex: 1; display: flex; justify-content: center; } lol-friend-finder-by-social-network .social-networks .social-network { width: 140px; height: 140px; border: thin solid #3c3c41; box-sizing: border-box; color: #cdbe91; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; background-color: #1e2328; margin: 0 20px; } lol-friend-finder-by-social-network .social-networks .social-network::before { content: ''; width: 55px; height: 55px; margin: 6px 0 14px; -webkit-mask-size: contain; background-color: #a09b8c; } lol-friend-finder-by-social-network .social-networks .social-network.facebook::before { -webkit-mask-image: url(/fe/lol-friend-finder/icon_fb.png); } lol-friend-finder-by-social-network .social-networks .social-network.qq::before { -webkit-mask-image: url(/fe/lol-friend-finder/icon_qq.png); } lol-friend-finder-by-social-network .social-networks .social-network.vk::before { -webkit-mask-image: url(/fe/lol-friend-finder/icon_vk.png); } lol-friend-finder-by-social-network .social-networks .social-network:hover { border-image: linear-gradient(to top, #c89b3c, #f0e6d2) 1; color: #f0e6d2; } lol-friend-finder-by-social-network .social-networks .social-network:hover::before { background-color: #f0e6d2; } lol-friend-finder-by-social-network .social-networks .social-network:active { border: thin solid #1e2328; color: #5b5a56; } lol-friend-finder-by-social-network .social-networks .social-network:active::before { background-color: #5b5a56; } lol-friend-finder-by-social-network .social-info { color: #5b5a56; margin-bottom: 15px; } lol-friend-finder-by-social-network .faq-link { margin: 0 0 0 auto ; cursor: pointer; } lol-friend-finder-by-social-network .social-header { color: #a09b8c; display: flex; align-items: center; margin-bottom: 5px; width: 100%; } lol-friend-finder-by-social-network .social-header.suggested-contacts-header { justify-content: space-between; } lol-friend-finder-by-social-network .social-header.suggested-contacts-header .unlink-link { text-transform: none; cursor: pointer; margin-right: 12px; } lol-friend-finder-by-social-network .social-header.dismissed-contacts-header { margin-top: 20px; cursor: pointer; } lol-friend-finder-by-social-network .social-header.dismissed-contacts-header:hover { color: #f0e6d2; } lol-friend-finder-by-social-network .social-header.dismissed-contacts-header:hover .arrow { border-top-color: #f0e6d2; } lol-friend-finder-by-social-network .social-header.dismissed-contacts-header .arrow { border: 4px solid transparent; border-top-color: #a09b8c; margin: 4px 4px 0 0; transform: rotate(-90deg); transform-origin: 50% 25%; transition: transform 100ms; } lol-friend-finder-by-social-network .social-header.dismissed-contacts-header .arrow[open] { transform: rotate(0deg); } lol-friend-finder-by-social-network #social-summoner-list { flex: 1; padding-bottom: 10px; } lol-friend-finder-by-social-network #social-summoner-list .empty { margin: 0 80px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } lol-friend-finder-by-social-network #social-summoner-list .empty::before { content: ''; width: 102px; height: 96px; margin: 20px 0 25px; flex-shrink: 0; background-image: url(/fe/lol-friend-finder/poro_sad.png); background-size: contain; } lol-friend-finder-by-social-network #social-summoner-list .empty .empty-text { margin-bottom: 20px; } lol-friend-finder-by-social-network .suggested-contacts, lol-friend-finder-by-social-network .dismissed-contacts { display: flex; flex-wrap: wrap; align-items: flex-end; } lol-friend-finder-by-social-network .social-footer { display: flex; align-items: center; justify-content: space-between; border-top: thin solid #3c3c41; padding-top: 15px; margin-top: 10px; } lol-friend-finder-by-social-network .unlinked-networks { display: flex; align-items: center; } lol-friend-finder-by-social-network .unlinked-networks .unlinked-networks-header { margin-right: 10px; } lol-friend-finder-by-social-network .network { width: 24px; height: 24px; -webkit-mask-size: contain; margin-right: 8px; cursor: pointer; background-color: #a09b8c; } lol-friend-finder-by-social-network .network:hover { background-color: #f0e6d2; } lol-friend-finder-by-social-network .network:active { background-color: #5b5a56; } lol-friend-finder-by-social-network .network.facebook { -webkit-mask-image: url(/fe/lol-friend-finder/icon_fb.png); } lol-friend-finder-by-social-network .network.qq { -webkit-mask-image: url(/fe/lol-friend-finder/icon_qq.png); } lol-friend-finder-by-social-network .network.vk { -webkit-mask-image: url(/fe/lol-friend-finder/icon_vk.png); } lol-friend-finder-by-social-network .more-contacts-button { margin: 20px auto 0 auto; width: 100px; } lol-friend-finder-by-social-network .contact-spinner { display: flex; align-items: center; justify-content: center; width: 50%; margin: 15px 0 15px 0; } lol-friend-finder-by-social-network .contact-spinner::after { content: ''; width: 30px; height: 30px; background-image: url(/fe/lol-friend-finder/spinner.png); background-size: contain; animation: friend-finder-spin 3s linear infinite; } @-moz-keyframes friend-finder-spin { to { transform: rotate(360deg); } } @-webkit-keyframes friend-finder-spin { to { transform: rotate(360deg); } } @-o-keyframes friend-finder-spin { to { transform: rotate(360deg); } } @keyframes friend-finder-spin { to { transform: rotate(360deg); } } #requested-players-list { display: flex; flex-wrap: wrap; align-content: flex-start; margin-bottom: 20px; } lol-friend-finder-by-summoner-name .description { margin-bottom: 10px; } lol-friend-finder-by-summoner-name .summoner-name-input-wrapper { display: flex; margin-bottom: 30px; position: relative; } lol-friend-finder-by-summoner-name .flat-input { flex: 1; margin: 0 10px 0 0 ; } lol-friend-finder-by-summoner-name #summoner-name-input { height: 32px; padding-left: 25px; } lol-friend-finder-by-summoner-name #summoner-name-input.error { border: thin solid #bc213b; } lol-friend-finder-recent-summoner { display: flex; align-items: center; width: 33%; box-sizing: border-box; padding: 8px 15px 8px 0 ; } lol-friend-finder-recent-summoner .summoner-identity { display: flex; align-items: center; flex: 1; overflow: hidden; margin: 0 10px 0 0 ; } lol-friend-finder-recent-summoner .summoner-identity:hover .summoner-name { color: #f0e6d2; } lol-friend-finder-recent-summoner .summoner-name { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; flex: 1; padding: 0 0 0 10px ; } lol-friend-finder-recent-summoner .add-button { display: none; width: 18px; height: 18px; -webkit-mask: url(/fe/lol-friend-finder/add_person_mask.png) no-repeat center; background-color: #cdbe91; -webkit-mask-size: contain; cursor: pointer; } lol-friend-finder-recent-summoner .add-button:hover { background-color: #f0e6d2; } lol-friend-finder-recent-summoner .add-button:active { background-color: #463714; } lol-friend-finder-recent-summoner .added { width: 18px; height: 18px; -webkit-mask: url(/fe/lol-friend-finder/icon_check_mask.png) no-repeat center; background-color: #cdbe91; -webkit-mask-size: contain; } lol-friend-finder-recent-summoner:hover .add-button { display: block; } lol-friend-finder-recent-summoner:hover .added { background-color: #f0e6d2; } lol-friend-finder-social-summoner { display: flex; align-items: center; width: 50%; padding: 8px 20px 8px 0; overflow: hidden; box-sizing: border-box; } lol-friend-finder-social-summoner:hover .social-icon { border-image: linear-gradient(to top, #c89b3c, #f0e6d2) 1; } lol-friend-finder-social-summoner:hover .social-summoner-name, lol-friend-finder-social-summoner:hover .social-added { color: #f0e6d2; } lol-friend-finder-social-summoner:hover .social-add-button, lol-friend-finder-social-summoner:hover .social-dismiss-link { display: block; } lol-friend-finder-social-summoner .social-icon { border: thin solid #3c3c41; width: 52px; height: 52px; padding: 1px; box-sizing: border-box; } lol-friend-finder-social-summoner .social-summoner-info { flex: 1; display: flex; flex-direction: column; margin: 0 10px 0 12px; overflow: hidden; white-space: nowrap; } lol-friend-finder-social-summoner .social-profile-name { text-overflow: ellipsis; overflow: hidden; position: relative; padding-left: 19px; margin-bottom: 1px; } lol-friend-finder-social-summoner .social-profile-name::before { content: ''; width: 13px; height: 13px; position: absolute; left: 0; top: 1px; background-size: contain; } lol-friend-finder-social-summoner .social-profile-name.social-profile-name-facebook::before { background-image: url(/fe/lol-friend-finder/icon_fb.png); } lol-friend-finder-social-summoner .social-profile-name.social-profile-name-qq::before { background-image: url(/fe/lol-friend-finder/icon_qq.png); } lol-friend-finder-social-summoner .social-profile-name.social-profile-name-vk::before { background-image: url(/fe/lol-friend-finder/icon_vk.png); } lol-friend-finder-social-summoner .social-summoner-name { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } lol-friend-finder-social-summoner .social-add-button { display: none; width: 18px; height: 18px; -webkit-mask: url(/fe/lol-friend-finder/add_person_mask.png) no-repeat center; -webkit-mask-size: contain; background-color: #cdbe91; cursor: pointer; } lol-friend-finder-social-summoner .social-add-button:hover { background-color: #f0e6d2; } lol-friend-finder-social-summoner .social-add-button:active { background-color: #463714; } lol-friend-finder-social-summoner .social-dismiss-link { display: none; cursor: pointer; } lol-friend-finder-social-summoner .social-dismiss-link.dismissing { pointer-events: none; } lol-friend-finder-social-summoner .social-added { width: 18px; height: 18px; -webkit-mask-image: url(/fe/lol-friend-finder/icon_check_mask.png); -webkit-mask-size: contain; background-color: #cdbe91; } lol-friend-finder-requested-player { display: flex; align-items: center; width: 33%; box-sizing: border-box; padding: 8px 15px 8px 0 ; } lol-friend-finder-requested-player .player-identity { display: flex; align-items: center; flex: 1; overflow: hidden; margin: 0 10px 0 0 ; } lol-friend-finder-requested-player .player-identity:hover .player-name { color: #f0e6d2; } lol-friend-finder-requested-player .player-identity:hover .player-gnt { color: #a09b8c; } lol-friend-finder-requested-player .player-identity:hover .player-gnt.only-name { color: #f0e6d2; } lol-friend-finder-requested-player .player-name-wrapper { overflow: hidden; flex: 1; padding: 0 0 0 10px ; } lol-friend-finder-requested-player .player-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } lol-friend-finder-requested-player .player-gnt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #5b5a56; } lol-friend-finder-requested-player .player-gnt.only-name { color: #a09b8c; } lol-friend-finder-requested-player .remove-button { display: none; width: 18px; height: 18px; -webkit-mask: url(/fe/lol-friend-finder/x_mask.png) no-repeat center; background-color: #cdbe91; -webkit-mask-size: contain; cursor: pointer; } lol-friend-finder-requested-player .remove-button:hover { background-color: #f0e6d2; } lol-friend-finder-requested-player .remove-button:active { background-color: #463714; } lol-friend-finder-requested-player:hover .remove-button { display: block; } lol-friend-finder-modal { direction: ltr; display: flex; flex-direction: column; align-items: center; width: 560px; height: 520px; padding: 0 18px; cursor: default; } lol-friend-finder-modal .title { margin: 15px 0 10px; } lol-friend-finder-modal .friend-finder-panel-header { display: flex; position: relative; width: 100%; margin-bottom: 15px; border-bottom: thin solid #3c3c41; } lol-friend-finder-modal .friend-finder-panel-header::after { content: ''; width: 50%; height: 2px; background: #785a28; position: absolute; bottom: -1px; } lol-friend-finder-modal .friend-finder-panel-header.use-animation::after { transition-property: left ; transition-duration: 300ms; transition-timing-function: cubic-bezier(0, 0, 0, 1); } lol-friend-finder-modal .friend-finder-panel-header.left-tab-active::after { left: 0 ; right: auto ; } lol-friend-finder-modal .friend-finder-panel-header.right-tab-active::after { left: 50% ; right: auto ; } lol-friend-finder-modal .friend-finder-panel-header-title { color: #cdbe91; padding: 9px 0; flex: 1; text-align: center; } lol-friend-finder-modal .friend-finder-panel-header-title:hover:not(.selected) { cursor: pointer; color: #f0e6d2; } lol-friend-finder-modal .friend-finder-panel-header-title:active:not(.selected) { color: #c8aa6e; } lol-friend-finder-modal .friend-finder-panel-header-title.selected { cursor: default; color: #f0e6d2; } lol-friend-finder-modal .friend-finder-panel-header-title.disabled { cursor: default; color: #a09b8c; } lol-friend-finder-modal .modal-body { flex: 1; width: 100%; display: flex; margin-bottom: 30px; overflow: hidden; } lol-friend-finder-modal .recently-played-panel, lol-friend-finder-modal .social-network-panel { width: 100%; flex-shrink: 0; } lol-friend-finder-modal .recently-played-panel.use-animation, lol-friend-finder-modal .social-network-panel.use-animation { transition: transform 300ms cubic-bezier(0, 0, 0, 1); } lol-friend-finder-modal .recently-played-panel { display: flex; flex-direction: column; margin-bottom: 10px; } lol-friend-finder-modal .recently-played-panel:not(.active) { transform: translateX(-100%) ; } lol-friend-finder-modal .social-network-panel.active { transform: translateX(-100%) ; } lol-friend-finder-modal .header { color: #a09b8c; margin-bottom: 10px; } lol-friend-finder-modal .feature-not-implemented { color: #a09b8c; background: url(/fe/lol-friend-finder/poro_sleeping.png) no-repeat center; padding-top: 150px; text-align: center; } lol-friend-finder-modal .spinner { display: flex; align-items: center; justify-content: center; width: 100%; margin: 50px 0; } lol-friend-finder-modal .spinner::after { content: ''; width: 30px; height: 30px; background-image: url(/fe/lol-friend-finder/spinner.png); background-size: contain; animation: friend-finder-spin 3s linear infinite; } @-moz-keyframes friend-finder-spin { to { transform: rotate(360deg); } } @-webkit-keyframes friend-finder-spin { to { transform: rotate(360deg); } } @-o-keyframes friend-finder-spin { to { transform: rotate(360deg); } } @keyframes friend-finder-spin { to { transform: rotate(360deg); } } lol-friend-finder-unlink-networks-modal .header { font-family: var(--font-display); } lol-friend-finder-unlink-networks-modal .description { font-family: var(--font-body); } lol-friend-finder-unlink-networks-modal .header, lol-friend-finder-unlink-networks-modal .description { -webkit-user-select: none; } lol-friend-finder-unlink-networks-modal .header, lol-friend-finder-unlink-networks-modal .description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } lol-friend-finder-unlink-networks-modal .header { text-transform: uppercase; } lol-friend-finder-unlink-networks-modal .header:lang(ko-kr), lol-friend-finder-unlink-networks-modal .header:lang(ja-jp), lol-friend-finder-unlink-networks-modal .header:lang(tr-tr), lol-friend-finder-unlink-networks-modal .header:lang(el-gr), lol-friend-finder-unlink-networks-modal .header:lang(th-th), lol-friend-finder-unlink-networks-modal .header:lang(zh-tw) { text-transform: none; } lol-friend-finder-unlink-networks-modal .header { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } lol-friend-finder-unlink-networks-modal .header:lang(ar-ae) { letter-spacing: 0; } lol-friend-finder-unlink-networks-modal .description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } lol-friend-finder-unlink-networks-modal .description:lang(ja-jp) { font-size: 13px; } lol-friend-finder-unlink-networks-modal .description:lang(ar-ae) { letter-spacing: 0; } lol-friend-finder-unlink-networks-modal .header { font-family: var(--font-display); } lol-friend-finder-unlink-networks-modal .description { font-family: var(--font-body); } lol-friend-finder-unlink-networks-modal { width: 400px; display: flex; flex-direction: column; align-items: center; padding: 15px 15px 50px; } lol-friend-finder-unlink-networks-modal .header { margin-bottom: 18px; } lol-friend-finder-unlink-networks-modal .networks { display: flex; } lol-friend-finder-unlink-networks-modal .network { position: relative; padding-top: 60px; width: 49px; margin: 0 10px; justify-content: center; } lol-friend-finder-unlink-networks-modal .network:hover .network-icon { background-color: #cdbe91; } lol-friend-finder-unlink-networks-modal .network:active .network-icon { background-color: #5b5a56; } lol-friend-finder-unlink-networks-modal .network-icon { width: 50px; height: 50px; position: absolute; left: 50%; top: 0; transform: translateX(-50%); margin: 0; -webkit-mask-size: contain; background-color: #a09b8c; } lol-friend-finder-unlink-networks-modal .network-icon.facebook { -webkit-mask-image: url(/fe/lol-friend-finder/icon_fb.png); } lol-friend-finder-unlink-networks-modal .network-icon.qq { -webkit-mask-image: url(/fe/lol-friend-finder/icon_qq.png); } lol-friend-finder-unlink-networks-modal .network-icon.vk { -webkit-mask-image: url(/fe/lol-friend-finder/icon_vk.png); } lol-friend-finder-unlink-networks-modal .description { text-align: center; margin-top: 20px; }