.lol-social-actions-bar .friend-header, lol-social-avatar .summoner-level, .lol-social-chat-window .chat-header .chat-header-clash-title-prefix, 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, .hover-card-mastery-score, .hover-card-division, .hover-card-level, .hover-card-name, .hover-card-inline-game-tag, .hover-card-game-name-and-tag-wrapper, .hover-card-ranked-description, .lol-social-identity .name, .lol-social-sidebar .alpha-version-panel, .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader, .player-behavior-reform-card-v2 .reform-card-subhead, .reform-card-v2-chat-log .reform-card-chat-log-header-title, .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab, .player-behavior-reform-card .reform-card-subhead { font-family: var(--font-display); } .lol-social-chat-messages, .lol-social-chat-messages .messages, .lol-social-chat-messages .warning-message, .lol-social-chat-messages .date-divider, .lol-social-chat-messages .system-bubble, .lol-social-chat-messages .author-name, .lol-social-chat-messages .timestamp, .social-count-badge, .lol-social-chat-window .conversation, .lol-social-chat-window .conversation-title, .lol-social-chat-window .more-unread .bar, .lol-social-chat-window .chat-header, .lol-social-chat-window .chat-name-info .chat-gnt, .lol-social-chat-window .participants, .lol-social-chat-window .lol-social-chat-input .chat-input, .lol-social-chat-window .create-panel .create-panel-search-match, .lol-social-chat-window lol-social-menu-item, .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, .hover-card-root-container, .hover-card-inline-game-tag, .hover-card-game-name-and-tag-wrapper, .lol-social-sidebar, .lol-social-sidebar .disconnected .message, .identity-and-parties, .identity-and-parties .disconnected .message, .lol-social-menu-item, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container .rule-item-body, .code-of-conduct .code-of-conduct-content-container .more-info-link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited, .leaver-buster-dialog a:link, .leaver-buster-dialog a:visited, .player-behavior-reform-card-v2 .reform-card-body, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited, .reform-card-v2-chat-log .reform-card-chat-log-header a:link, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited, .player-behavior-reform-card .reform-card-body, .player-behavior-reform-card a:link, .player-behavior-reform-card a:visited, .reform-card-chat-log .chat-log-header-copy-log-link, .player-behavior-ban-notification a:link, .player-behavior-ban-notification a:visited { font-family: var(--font-body); } .lol-social-actions-bar .friend-header, .lol-social-chat-messages, .lol-social-chat-messages .messages, .lol-social-chat-messages .warning-message, .lol-social-chat-messages .date-divider, .lol-social-chat-messages .system-bubble, .lol-social-chat-messages .author-name, .lol-social-chat-messages .timestamp, lol-social-avatar .summoner-level, .lol-social-chat-window .conversation, .lol-social-chat-window .conversation-title, .lol-social-chat-window .chat-header, .lol-social-chat-window .chat-header .chat-header-clash-title-prefix, .lol-social-chat-window .chat-name-info .chat-gnt, .lol-social-chat-window .participants, .lol-social-chat-window .lol-social-chat-input .chat-input, .lol-social-chat-window .create-panel .create-panel-search-match, .lol-social-chat-window lol-social-menu-item, .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, .hover-card-root-container, .hover-card-mastery-score, .hover-card-division, .hover-card-level, .hover-card-name, .hover-card-inline-game-tag, .hover-card-game-name-and-tag-wrapper, .hover-card-ranked-description, .lol-social-identity .name, .lol-social-sidebar .disconnected .message, .lol-social-sidebar .alpha-version-panel, .identity-and-parties .disconnected .message, .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container .rule-item-body, .code-of-conduct .code-of-conduct-content-container .more-info-link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited, .leaver-buster-dialog a:link, .leaver-buster-dialog a:visited, .player-behavior-reform-card-v2 .reform-card-subhead, .player-behavior-reform-card-v2 .reform-card-body, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited, .reform-card-v2-chat-log .reform-card-chat-log-header a:link, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited, .reform-card-v2-chat-log .reform-card-chat-log-header-title, .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab, .player-behavior-reform-card .reform-card-subhead, .player-behavior-reform-card .reform-card-body, .player-behavior-reform-card a:link, .player-behavior-reform-card a:visited, .reform-card-chat-log .chat-log-header-copy-log-link, .player-behavior-ban-notification a:link, .player-behavior-ban-notification a:visited { -webkit-user-select: none; } .lol-social-actions-bar .friend-header, .lol-social-chat-messages, .lol-social-chat-messages .messages, .lol-social-chat-messages .warning-message, .lol-social-chat-messages .date-divider, .lol-social-chat-messages .system-bubble, .lol-social-chat-messages .author-name, .lol-social-chat-messages .timestamp, lol-social-avatar .summoner-level, .lol-social-chat-window .conversation, .lol-social-chat-window .conversation-title, .lol-social-chat-window .chat-header, .lol-social-chat-window .chat-header .chat-header-clash-title-prefix, .lol-social-chat-window .chat-name-info .chat-gnt, .lol-social-chat-window .participants, .lol-social-chat-window .lol-social-chat-input .chat-input, .lol-social-chat-window .create-panel .create-panel-search-match, .lol-social-chat-window lol-social-menu-item, .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, .hover-card-root-container, .hover-card-mastery-score, .hover-card-division, .hover-card-level, .hover-card-name, .hover-card-inline-game-tag, .hover-card-game-name-and-tag-wrapper, .hover-card-ranked-description, .lol-social-identity .name, .lol-social-sidebar .disconnected .message, .lol-social-sidebar .alpha-version-panel, .identity-and-parties .disconnected .message, .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container .rule-item-body, .code-of-conduct .code-of-conduct-content-container .more-info-link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited, .leaver-buster-dialog a:link, .leaver-buster-dialog a:visited, .player-behavior-reform-card-v2 .reform-card-subhead, .player-behavior-reform-card-v2 .reform-card-body, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited, .reform-card-v2-chat-log .reform-card-chat-log-header a:link, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited, .reform-card-v2-chat-log .reform-card-chat-log-header-title, .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab, .player-behavior-reform-card .reform-card-subhead, .player-behavior-reform-card .reform-card-body, .player-behavior-reform-card a:link, .player-behavior-reform-card a:visited, .reform-card-chat-log .chat-log-header-copy-log-link, .player-behavior-ban-notification a:link, .player-behavior-ban-notification a:visited { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .lol-social-actions-bar .friend-header, lol-social-avatar .summoner-level, .lol-social-chat-window .more-unread .bar, .lol-social-chat-window .chat-header .chat-header-clash-title-prefix, 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, .hover-card-mastery-score, .hover-card-division, .hover-card-level, .hover-card-name, .hover-card-inline-game-tag, .hover-card-game-name-and-tag-wrapper, .hover-card-ranked-description, .lol-social-identity .name, .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader, .player-behavior-reform-card-v2 .reform-card-subhead, .reform-card-v2-chat-log .reform-card-chat-log-header-title, .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab, .player-behavior-reform-card .reform-card-subhead { text-transform: uppercase; } .lol-social-actions-bar .friend-header:lang(ko-kr), lol-social-avatar .summoner-level:lang(ko-kr), .lol-social-chat-window .more-unread .bar:lang(ko-kr), .lol-social-chat-window .chat-header .chat-header-clash-title-prefix:lang(ko-kr), 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), .hover-card-mastery-score:lang(ko-kr), .hover-card-division:lang(ko-kr), .hover-card-level:lang(ko-kr), .hover-card-name:lang(ko-kr), .hover-card-inline-game-tag:lang(ko-kr), .hover-card-game-name-and-tag-wrapper:lang(ko-kr), .hover-card-ranked-description:lang(ko-kr), .lol-social-identity .name:lang(ko-kr), .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title:lang(ko-kr), .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader:lang(ko-kr), .player-behavior-reform-card-v2 .reform-card-subhead:lang(ko-kr), .reform-card-v2-chat-log .reform-card-chat-log-header-title:lang(ko-kr), .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:lang(ko-kr), .player-behavior-reform-card .reform-card-subhead:lang(ko-kr), .lol-social-actions-bar .friend-header:lang(ja-jp), lol-social-avatar .summoner-level:lang(ja-jp), .lol-social-chat-window .more-unread .bar:lang(ja-jp), .lol-social-chat-window .chat-header .chat-header-clash-title-prefix:lang(ja-jp), 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), .hover-card-mastery-score:lang(ja-jp), .hover-card-division:lang(ja-jp), .hover-card-level:lang(ja-jp), .hover-card-name:lang(ja-jp), .hover-card-inline-game-tag:lang(ja-jp), .hover-card-game-name-and-tag-wrapper:lang(ja-jp), .hover-card-ranked-description:lang(ja-jp), .lol-social-identity .name:lang(ja-jp), .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title:lang(ja-jp), .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader:lang(ja-jp), .player-behavior-reform-card-v2 .reform-card-subhead:lang(ja-jp), .reform-card-v2-chat-log .reform-card-chat-log-header-title:lang(ja-jp), .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:lang(ja-jp), .player-behavior-reform-card .reform-card-subhead:lang(ja-jp), .lol-social-actions-bar .friend-header:lang(tr-tr), lol-social-avatar .summoner-level:lang(tr-tr), .lol-social-chat-window .more-unread .bar:lang(tr-tr), .lol-social-chat-window .chat-header .chat-header-clash-title-prefix:lang(tr-tr), 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), .hover-card-mastery-score:lang(tr-tr), .hover-card-division:lang(tr-tr), .hover-card-level:lang(tr-tr), .hover-card-name:lang(tr-tr), .hover-card-inline-game-tag:lang(tr-tr), .hover-card-game-name-and-tag-wrapper:lang(tr-tr), .hover-card-ranked-description:lang(tr-tr), .lol-social-identity .name:lang(tr-tr), .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title:lang(tr-tr), .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader:lang(tr-tr), .player-behavior-reform-card-v2 .reform-card-subhead:lang(tr-tr), .reform-card-v2-chat-log .reform-card-chat-log-header-title:lang(tr-tr), .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:lang(tr-tr), .player-behavior-reform-card .reform-card-subhead:lang(tr-tr), .lol-social-actions-bar .friend-header:lang(el-gr), lol-social-avatar .summoner-level:lang(el-gr), .lol-social-chat-window .more-unread .bar:lang(el-gr), .lol-social-chat-window .chat-header .chat-header-clash-title-prefix:lang(el-gr), 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), .hover-card-mastery-score:lang(el-gr), .hover-card-division:lang(el-gr), .hover-card-level:lang(el-gr), .hover-card-name:lang(el-gr), .hover-card-inline-game-tag:lang(el-gr), .hover-card-game-name-and-tag-wrapper:lang(el-gr), .hover-card-ranked-description:lang(el-gr), .lol-social-identity .name:lang(el-gr), .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title:lang(el-gr), .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader:lang(el-gr), .player-behavior-reform-card-v2 .reform-card-subhead:lang(el-gr), .reform-card-v2-chat-log .reform-card-chat-log-header-title:lang(el-gr), .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:lang(el-gr), .player-behavior-reform-card .reform-card-subhead:lang(el-gr), .lol-social-actions-bar .friend-header:lang(th-th), lol-social-avatar .summoner-level:lang(th-th), .lol-social-chat-window .more-unread .bar:lang(th-th), .lol-social-chat-window .chat-header .chat-header-clash-title-prefix:lang(th-th), 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), .hover-card-mastery-score:lang(th-th), .hover-card-division:lang(th-th), .hover-card-level:lang(th-th), .hover-card-name:lang(th-th), .hover-card-inline-game-tag:lang(th-th), .hover-card-game-name-and-tag-wrapper:lang(th-th), .hover-card-ranked-description:lang(th-th), .lol-social-identity .name:lang(th-th), .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title:lang(th-th), .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader:lang(th-th), .player-behavior-reform-card-v2 .reform-card-subhead:lang(th-th), .reform-card-v2-chat-log .reform-card-chat-log-header-title:lang(th-th), .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:lang(th-th), .player-behavior-reform-card .reform-card-subhead:lang(th-th), .lol-social-actions-bar .friend-header:lang(zh-tw), lol-social-avatar .summoner-level:lang(zh-tw), .lol-social-chat-window .more-unread .bar:lang(zh-tw), .lol-social-chat-window .chat-header .chat-header-clash-title-prefix:lang(zh-tw), 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), .hover-card-mastery-score:lang(zh-tw), .hover-card-division:lang(zh-tw), .hover-card-level:lang(zh-tw), .hover-card-name:lang(zh-tw), .hover-card-inline-game-tag:lang(zh-tw), .hover-card-game-name-and-tag-wrapper:lang(zh-tw), .hover-card-ranked-description:lang(zh-tw), .lol-social-identity .name:lang(zh-tw), .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title:lang(zh-tw), .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader:lang(zh-tw), .player-behavior-reform-card-v2 .reform-card-subhead:lang(zh-tw), .reform-card-v2-chat-log .reform-card-chat-log-header-title:lang(zh-tw), .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:lang(zh-tw), .player-behavior-reform-card .reform-card-subhead:lang(zh-tw) { text-transform: none; } .hover-card-name, .hover-card-inline-game-tag, .hover-card-game-name-and-tag-wrapper, .hover-card-ranked-description, .lol-social-identity .name, .player-behavior-reform-card-v2 .reform-card-subhead, .player-behavior-reform-card .reform-card-subhead { text-transform: none; } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title:lang(ar-ae) { letter-spacing: 0; } .lol-social-chat-window .chat-header .chat-header-clash-title-prefix, .lol-friend-finder-modal .title, .hover-card-name, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader, .player-behavior-reform-card-v2 .reform-card-subhead, .reform-card-v2-chat-log .reform-card-chat-log-header-title, .player-behavior-reform-card .reform-card-subhead { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .lol-social-chat-window .chat-header .chat-header-clash-title-prefix:lang(ar-ae), .lol-friend-finder-modal .title:lang(ar-ae), .hover-card-name:lang(ar-ae), .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader:lang(ar-ae), .player-behavior-reform-card-v2 .reform-card-subhead:lang(ar-ae), .reform-card-v2-chat-log .reform-card-chat-log-header-title:lang(ar-ae), .player-behavior-reform-card .reform-card-subhead:lang(ar-ae) { letter-spacing: 0; } .hover-card-name, .player-behavior-reform-card-v2 .reform-card-subhead, .player-behavior-reform-card .reform-card-subhead { letter-spacing: 0.025em; } .hover-card-name:lang(ar-ae), .player-behavior-reform-card-v2 .reform-card-subhead:lang(ar-ae), .player-behavior-reform-card .reform-card-subhead:lang(ar-ae) { letter-spacing: 0; } lol-social-avatar .summoner-level, .hover-card-mastery-score, .hover-card-level, .hover-card-inline-game-tag, .lol-social-identity .name, .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } lol-social-avatar .summoner-level:lang(ar-ae), .hover-card-mastery-score:lang(ar-ae), .hover-card-level:lang(ar-ae), .hover-card-inline-game-tag:lang(ar-ae), .lol-social-identity .name:lang(ar-ae), .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:lang(ar-ae) { letter-spacing: 0; } .lol-social-identity .name { letter-spacing: 0.0375em; } .lol-social-identity .name:lang(ar-ae) { letter-spacing: 0; } lol-social-avatar .summoner-level, .hover-card-inline-game-tag { color: #a09b8c; } .lol-social-actions-bar .friend-header, 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, .hover-card-division, .hover-card-game-name-and-tag-wrapper, .hover-card-ranked-description { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .lol-social-actions-bar .friend-header:lang(ja-jp), 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), .hover-card-division:lang(ja-jp), .hover-card-game-name-and-tag-wrapper:lang(ja-jp), .hover-card-ranked-description:lang(ja-jp) { font-size: 13px; } .lol-social-actions-bar .friend-header:lang(ar-ae), 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), .hover-card-division:lang(ar-ae), .hover-card-game-name-and-tag-wrapper:lang(ar-ae), .hover-card-ranked-description:lang(ar-ae) { letter-spacing: 0; } .lol-friend-finder-modal .friend-finder-panel-header-title, .hover-card-game-name-and-tag-wrapper, .hover-card-ranked-description { color: #a09b8c; } .lol-social-chat-messages, .lol-social-chat-messages .messages, .lol-social-chat-window .conversation-title, .lol-social-chat-window .chat-header, .lol-social-chat-window .participants, .lol-social-chat-window .lol-social-chat-input .chat-input, lol-friend-finder-by-social-network .social-description, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container .rule-item-body, .code-of-conduct .code-of-conduct-content-container .more-info-link, .player-behavior-reform-card-v2 .reform-card-body, .player-behavior-reform-card .reform-card-body { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .lol-social-chat-messages:lang(ar-ae), .lol-social-chat-messages .messages:lang(ar-ae), .lol-social-chat-window .conversation-title:lang(ar-ae), .lol-social-chat-window .chat-header:lang(ar-ae), .lol-social-chat-window .participants:lang(ar-ae), .lol-social-chat-window .lol-social-chat-input .chat-input:lang(ar-ae), lol-friend-finder-by-social-network .social-description:lang(ar-ae), .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container .rule-item-body:lang(ar-ae), .code-of-conduct .code-of-conduct-content-container .more-info-link:lang(ar-ae), .player-behavior-reform-card-v2 .reform-card-body:lang(ar-ae), .player-behavior-reform-card .reform-card-body:lang(ar-ae) { letter-spacing: 0; } .lol-social-chat-messages .warning-message, .lol-social-chat-messages .date-divider, .lol-social-chat-messages .system-bubble, .lol-social-chat-messages .author-name, .lol-social-chat-messages .timestamp, .lol-social-chat-window .conversation, .lol-social-chat-window .chat-name-info .chat-gnt, .lol-social-chat-window .create-panel .create-panel-search-match, .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, .hover-card-root-container, .lol-social-sidebar .disconnected .message, .identity-and-parties .disconnected .message { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .lol-social-chat-messages .warning-message:lang(ja-jp), .lol-social-chat-messages .date-divider:lang(ja-jp), .lol-social-chat-messages .system-bubble:lang(ja-jp), .lol-social-chat-messages .author-name:lang(ja-jp), .lol-social-chat-messages .timestamp:lang(ja-jp), .lol-social-chat-window .conversation:lang(ja-jp), .lol-social-chat-window .chat-name-info .chat-gnt:lang(ja-jp), .lol-social-chat-window .create-panel .create-panel-search-match:lang(ja-jp), .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), .hover-card-root-container:lang(ja-jp), .lol-social-sidebar .disconnected .message:lang(ja-jp), .identity-and-parties .disconnected .message:lang(ja-jp) { font-size: 13px; } .lol-social-chat-messages .warning-message:lang(ar-ae), .lol-social-chat-messages .date-divider:lang(ar-ae), .lol-social-chat-messages .system-bubble:lang(ar-ae), .lol-social-chat-messages .author-name:lang(ar-ae), .lol-social-chat-messages .timestamp:lang(ar-ae), .lol-social-chat-window .conversation:lang(ar-ae), .lol-social-chat-window .chat-name-info .chat-gnt:lang(ar-ae), .lol-social-chat-window .create-panel .create-panel-search-match:lang(ar-ae), .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), .hover-card-root-container:lang(ar-ae), .lol-social-sidebar .disconnected .message:lang(ar-ae), .identity-and-parties .disconnected .message:lang(ar-ae) { letter-spacing: 0; } .lol-social-chat-window lol-social-menu-item { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .lol-social-chat-window lol-social-menu-item:lang(ja-jp) { font-size: 13px; } .lol-social-chat-window lol-social-menu-item: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, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited, .leaver-buster-dialog a:link, .leaver-buster-dialog a:visited, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited, .reform-card-v2-chat-log .reform-card-chat-log-header a:link, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited, .player-behavior-reform-card a:link, .player-behavior-reform-card a:visited, .reform-card-chat-log .chat-log-header-copy-log-link, .player-behavior-ban-notification a:link, .player-behavior-ban-notification a:visited { 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), .code-of-conduct .code-of-conduct-content-container .more-info-link a:link:lang(ja-jp), .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited:lang(ja-jp), .leaver-buster-dialog a:link:lang(ja-jp), .leaver-buster-dialog a:visited:lang(ja-jp), .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link:lang(ja-jp), .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited:lang(ja-jp), .reform-card-v2-chat-log .reform-card-chat-log-header a:link:lang(ja-jp), .reform-card-v2-chat-log .reform-card-chat-log-header a:visited:lang(ja-jp), .player-behavior-reform-card a:link:lang(ja-jp), .player-behavior-reform-card a:visited:lang(ja-jp), .reform-card-chat-log .chat-log-header-copy-log-link:lang(ja-jp), .player-behavior-ban-notification a:link:lang(ja-jp), .player-behavior-ban-notification a:visited: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), .code-of-conduct .code-of-conduct-content-container .more-info-link a:link:lang(ar-ae), .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited:lang(ar-ae), .leaver-buster-dialog a:link:lang(ar-ae), .leaver-buster-dialog a:visited:lang(ar-ae), .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link:lang(ar-ae), .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited:lang(ar-ae), .reform-card-v2-chat-log .reform-card-chat-log-header a:link:lang(ar-ae), .reform-card-v2-chat-log .reform-card-chat-log-header a:visited:lang(ar-ae), .player-behavior-reform-card a:link:lang(ar-ae), .player-behavior-reform-card a:visited:lang(ar-ae), .reform-card-chat-log .chat-log-header-copy-log-link:lang(ar-ae), .player-behavior-ban-notification a:link:lang(ar-ae), .player-behavior-ban-notification a:visited: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, .reform-card-v2-chat-log .reform-card-chat-log-header a:link, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited, .reform-card-chat-log .chat-log-header-copy-log-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, .reform-card-v2-chat-log .reform-card-chat-log-header a:link:hover, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited:hover, .reform-card-chat-log .chat-log-header-copy-log-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, .reform-card-v2-chat-log .reform-card-chat-log-header a:link.hover, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited.hover, .reform-card-chat-log .chat-log-header-copy-log-link.hover { color: #f0e6d2; } lol-friend-finder-by-social-network .faq-link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited, .leaver-buster-dialog a:link, .leaver-buster-dialog a:visited, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited, .player-behavior-reform-card a:link, .player-behavior-reform-card a:visited, .player-behavior-ban-notification a:link, .player-behavior-ban-notification a:visited { color: #0596aa; text-decoration: none; } lol-friend-finder-by-social-network .faq-link:hover, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link:hover, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited:hover, .leaver-buster-dialog a:link:hover, .leaver-buster-dialog a:visited:hover, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link:hover, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited:hover, .player-behavior-reform-card a:link:hover, .player-behavior-reform-card a:visited:hover, .player-behavior-ban-notification a:link:hover, .player-behavior-ban-notification a:visited:hover, lol-friend-finder-by-social-network .faq-link.hover, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link.hover, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited.hover, .leaver-buster-dialog a:link.hover, .leaver-buster-dialog a:visited.hover, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link.hover, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited.hover, .player-behavior-reform-card a:link.hover, .player-behavior-reform-card a:visited.hover, .player-behavior-ban-notification a:link.hover, .player-behavior-ban-notification a:visited.hover { color: #cdfafa; } lol-friend-finder-by-social-network .faq-link:after, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link:after, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited:after, .leaver-buster-dialog a:link:after, .leaver-buster-dialog a:visited:after, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link:after, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited:after, .player-behavior-reform-card a:link:after, .player-behavior-reform-card a:visited:after, .player-behavior-ban-notification a:link:after, .player-behavior-ban-notification a:visited:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-social/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, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link:lang(ar-ae):after, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited:lang(ar-ae):after, .leaver-buster-dialog a:link:lang(ar-ae):after, .leaver-buster-dialog a:visited:lang(ar-ae):after, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link:lang(ar-ae):after, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited:lang(ar-ae):after, .player-behavior-reform-card a:link:lang(ar-ae):after, .player-behavior-reform-card a:visited:lang(ar-ae):after, .player-behavior-ban-notification a:link:lang(ar-ae):after, .player-behavior-ban-notification a:visited:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } lol-friend-finder-by-social-network .faq-link:hover:after, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link:hover:after, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited:hover:after, .leaver-buster-dialog a:link:hover:after, .leaver-buster-dialog a:visited:hover:after, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link:hover:after, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited:hover:after, .player-behavior-reform-card a:link:hover:after, .player-behavior-reform-card a:visited:hover:after, .player-behavior-ban-notification a:link:hover:after, .player-behavior-ban-notification a:visited:hover:after { background-color: #cdfafa; } .lol-social-sidebar .alpha-version-panel { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .lol-social-sidebar .alpha-version-panel:lang(ar-ae) { letter-spacing: 0; } .lol-social-chat-window .conversation.unread .conversation-title, .lol-social-chat-window .chat-header { color: #f0e6d2; } .lol-social-actions-bar .friend-header, lol-social-avatar .summoner-level, .lol-social-chat-window .chat-header .chat-header-clash-title-prefix, 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, .hover-card-mastery-score, .hover-card-division, .hover-card-level, .hover-card-name, .hover-card-inline-game-tag, .hover-card-game-name-and-tag-wrapper, .hover-card-ranked-description, .lol-social-identity .name, .lol-social-sidebar .alpha-version-panel, .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader, .player-behavior-reform-card-v2 .reform-card-subhead, .reform-card-v2-chat-log .reform-card-chat-log-header-title, .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab, .player-behavior-reform-card .reform-card-subhead { font-family: var(--font-display); } .lol-social-chat-messages, .lol-social-chat-messages .messages, .lol-social-chat-messages .warning-message, .lol-social-chat-messages .date-divider, .lol-social-chat-messages .system-bubble, .lol-social-chat-messages .author-name, .lol-social-chat-messages .timestamp, .social-count-badge, .lol-social-chat-window .conversation, .lol-social-chat-window .conversation-title, .lol-social-chat-window .more-unread .bar, .lol-social-chat-window .chat-header, .lol-social-chat-window .chat-name-info .chat-gnt, .lol-social-chat-window .participants, .lol-social-chat-window .lol-social-chat-input .chat-input, .lol-social-chat-window .create-panel .create-panel-search-match, .lol-social-chat-window lol-social-menu-item, .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, .hover-card-root-container, .hover-card-inline-game-tag, .hover-card-game-name-and-tag-wrapper, .lol-social-sidebar, .lol-social-sidebar .disconnected .message, .identity-and-parties, .identity-and-parties .disconnected .message, .lol-social-menu-item, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container .rule-item-body, .code-of-conduct .code-of-conduct-content-container .more-info-link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited, .leaver-buster-dialog a:link, .leaver-buster-dialog a:visited, .player-behavior-reform-card-v2 .reform-card-body, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited, .reform-card-v2-chat-log .reform-card-chat-log-header a:link, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited, .player-behavior-reform-card .reform-card-body, .player-behavior-reform-card a:link, .player-behavior-reform-card a:visited, .reform-card-chat-log .chat-log-header-copy-log-link, .player-behavior-ban-notification a:link, .player-behavior-ban-notification a:visited { font-family: var(--font-body); } .lol-social-actions-bar .filter-button, .lol-social-actions-bar .folder-button, .lol-social-actions-bar .options-button, .lol-social-chat-toggle-button .chat-button, .lol-social-chat-toggle-button .chat-button.toggled, .lol-social-chat-window .conversation-close-button, .lol-social-chat-window .conversation-cannot-close-button, .lol-social-chat-window .conversation-settings-button, .lol-social-sidebar .bug-report-button { outline: none; border: none; background: none; cursor: pointer; padding: 0; } .lol-social-actions-bar .filter-button.selected, .lol-social-actions-bar .folder-button.selected, .lol-social-actions-bar .options-button.selected { background-color: #c89b3c; } .lol-social-actions-bar .filter-button.unselected, .lol-social-actions-bar .folder-button.unselected, .lol-social-actions-bar .options-button.unselected { background-color: #463714; } .lol-social-actions-bar .filter-button[disabled], .lol-social-actions-bar .folder-button[disabled], .lol-social-actions-bar .options-button[disabled] { cursor: default; } .lol-social-actions-bar .filter-button[disabled]:hover, .lol-social-actions-bar .folder-button[disabled]:hover, .lol-social-actions-bar .options-button[disabled]:hover { background-color: #c8aa6e; } .lol-social-actions-bar { position: relative; height: 33px;   } .lol-social-actions-bar .actions-bar { position: relative; display: flex; height: 100%; margin-top: 2px; } .lol-social-actions-bar .actions-bar::before { content: ''; position: absolute; width: 100%; height: 30px; background: linear-gradient(to bottom, rgba(7,16,25,0.7), rgba(32,39,44,0.7)); border: thin solid transparent; border-image: linear-gradient(to bottom, #785a28, #c8aa6e) 1 stretch; box-sizing: border-box; opacity: 0; } .lol-social-actions-bar .actions-bar::before { transition: opacity 200ms ease-out; } .lol-social-actions-bar .actions-bar.search-input-active::before, .lol-social-actions-bar .actions-bar.folder-input-active::before { opacity: 1; } .lol-social-actions-bar .buttons { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 100%; height: 100%; overflow: hidden; margin-top: -2px; transition: width 200ms cubic-bezier(0, 0, 0, 1); } .lol-social-actions-bar .actions-bar.search-input-active .buttons { width: 30px; } .lol-social-actions-bar .actions-bar.folder-input-active .buttons { width: 0px; } .lol-social-actions-bar .friend-header { color: #a09b8c; flex: 1; padding: 0 10px; } .lol-social-actions-bar .search-box { flex: 1; overflow: hidden; } .lol-social-actions-bar .action-bar-button { height: 100%; width: 30px; flex-shrink: 0; } .lol-social-actions-bar #actions-bar-search-input { position: relative; background: none; border: none; outline: none; margin-top: 2px; padding: 0; box-shadow: none; } .lol-social-actions-bar #actions-bar-search-input::-webkit-search-cancel-button { margin: 0 5px 0 0; } .lol-social-actions-bar #actions-bar-search-input:lang(ar-ae)::-webkit-search-cancel-button { margin: 0 0 0 5px; } .lol-social-actions-bar .filter-button { -webkit-mask: url(/fe/lol-social/search_mask.png) no-repeat center; -webkit-mask-size: 18px; background-color: #c8aa6e; } .lol-social-actions-bar .filter-button:hover { background-color: #f0e6d2; } .lol-social-actions-bar .filter-button:active { background-color: #463714; } .lol-social-actions-bar .folder-button { -webkit-mask: url(/fe/lol-social/add_folder_mask.png) no-repeat center; -webkit-mask-size: 18px; background-color: #c8aa6e; } .lol-social-actions-bar .folder-button:hover { background-color: #f0e6d2; } .lol-social-actions-bar .folder-button:active { background-color: #463714; } .lol-social-actions-bar .options-button { -webkit-mask: url(/fe/lol-social/sort_mask.png) no-repeat center; -webkit-mask-size: 18px; background-color: #c8aa6e; } .lol-social-actions-bar .options-button:hover { background-color: #f0e6d2; } .lol-social-actions-bar .options-button:active { background-color: #463714; } .lol-social-actions-bar .options-button:lang(ar-ae) { transform: scaleX(-1); } .lol-social-actions-bar .friend-finder-button { display: block; cursor: pointer; width: inherit; height: inherit; -webkit-mask: url(/fe/lol-social/add_person_mask.png) no-repeat center; background-color: #c8aa6e; -webkit-mask-size: 18px; } .lol-social-actions-bar .friend-finder-button.disabled { opacity: 0.5; cursor: default; } .lol-social-actions-bar .friend-finder-button:not(.disabled):hover { background-color: #f0e6d2; } .lol-social-actions-bar .friend-finder-button:not(.disabled):active { background-color: #463714; } .options-menu { border-bottom: thin solid #785a28; display: flex; flex-direction: column; justify-content: flex-end; width: 220px; } .options-menu lol-uikit-flat-checkbox { padding: 8px 10px; margin: -8px -10px; } .options-menu lol-uikit-flat-checkbox.gbg-checkbox { margin-top: -24px; } .options-menu lol-uikit-flat-checkbox label { color: #cdbe91; } .options-menu lol-uikit-flat-checkbox:hover label { color: #f0e6d2; } .options-menu lol-uikit-radio-input-option { --radio-input-option-hover-background-color: #1e2328; --radio-input-option-padding: 0px 10px; } .lol-social-menu-item.menu-item-separator { position: relative; margin-top: 5px; } .lol-social-menu-item.menu-item-separator::before { content: ''; position: absolute; left: 10px; right: 10px; top: -3px; height: 0; border-top: thin solid rgba(240,230,210,0.25); } .gbg-label { display: flex; flex-direction: column; margin-top: 16px !important; } .menuitem-sublabel { color: #5b5a56; letter-spacing: 0.05em; } .lol-social-actions-folder-input { display: block; width: 100%; } .lol-social-actions-folder-input .folder-name { display: block; position: relative; } .lol-social-actions-folder-input .layout { display: flex; align-items: center; box-sizing: border-box; } .lol-social-actions-folder-input .folder-name-contents { position: relative; } .lol-social-actions-folder-input .flat-input, .lol-social-actions-folder-input .folder-name-input { height: 33px; width: 100%; } .lol-social-actions-folder-input .folder-name-input.saving { border-color: transparent; border-image: none; } .lol-social-actions-folder-input .folder-name-input.error { border: thin solid #bc213b; } .lol-social-actions-folder-input .success-message { color: #f0e6d2; font-size: 12px; padding: 4px 10px; line-height: 14px; width: 160px; } .lol-social-actions-folder-input .animation { position: absolute; background: #785a28; top: 2px; left: 0px; right: 0px; height: 90%; transition: all 0.3s cubic-bezier(0, 0, 0, 1); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: horizontal; -webkit-box-align: center; -webkit-box-pack: justify; } .lol-social-chat-input { display: block; position: relative; max-height: 96px; min-height: 20px; font-size: 12px; overflow: hidden; } .lol-social-chat-input .chat-input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; box-sizing: border-box; background: none; border: none; padding: inherit; font: inherit; letter-spacing: inherit; color: inherit; outline: none; resize: none; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset, 0 0 0 1px rgba(0,0,0,0.25); border-style: solid; border-image: linear-gradient(to bottom, #785a28 0%, #463714 100%) 1; border-width: 1px; } .lol-social-chat-input .chat-input::-webkit-scrollbar { width: 0; } .lol-social-chat-input .chat-input::-webkit-input-placeholder { color: #a09b8c; font-style: italic; } .lol-social-chat-input .chat-input:focus { background: linear-gradient(to bottom, rgba(7,16,25,0.7), rgba(32,39,44,0.7)); border-image: linear-gradient(to bottom, #785a28, #c8aa6e) 1; } .lol-social-chat-input .chat-input[disabled] { opacity: 0.5; } .lol-social-chat-input .input-sizer {  display: block; visibility: hidden; font: inherit; letter-spacing: inherit; margin: 0; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-all; padding: 1px; } .social-scroll { overflow-y: auto; overflow-x: hidden; } .social-scroll::-webkit-scrollbar { width: 11px; background: none; } .social-scroll::-webkit-scrollbar-thumb { border: 3px solid transparent; background-color: #1e2328; border-radius: 6px; background-clip: padding-box; } .social-scroll:hover::-webkit-scrollbar-thumb { background-color: #785a28; } .social-scroll::-webkit-scrollbar-thumb:hover { background-color: #cdbe91; } .social-scroll::-webkit-scrollbar-thumb:active { background-color: #463714; } .social-blue-scroll { overflow-x: hidden; overflow-y: auto; } .social-blue-scroll::-webkit-scrollbar { width: 9px; background: transparent; } .social-blue-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } .social-blue-scroll:hover::-webkit-scrollbar-thumb { background-color: #0596aa; } .lol-social-chat-messages { display: flex; color: #f0e6d2; } .lol-social-chat-messages .social-scroll { height: 100%; } .lol-social-chat-messages .messages { flex: 1 1 100%; position: relative; color: #f0e6d2; -webkit-user-select: text; display: flex; flex-direction: column; padding: 5px 7px 0 10px; } .lol-social-chat-messages .messages:lang(ar-ae) { direction: rtl; } .lol-social-chat-messages .inner-messages { position: relative; display: flex; flex-direction: column; justify-content: flex-end; flex: 1 0 auto; padding-bottom: 6px; } .lol-social-chat-messages .warning-message { color: #5b5a56; line-height: 16px; margin-top: 4px; margin-bottom: 10px; } .lol-social-chat-messages .date-divider { display: flex; margin: 6px 0 10px; color: #3c3c41; align-items: center; } .lol-social-chat-messages .date-divider::after { background-color: #3c3c41; content: ''; flex: 1; height: 1px; margin: 0 0 0 5px; } .lol-social-chat-messages .date-divider:lang(ar-ae)::after { margin: 0 5px 0 0; } .lol-social-chat-messages .bubble-container { display: flex; align-items: flex-end; justify-content: flex-start; margin-bottom: 4px; } .lol-social-chat-messages .bubble-container.mine, .lol-social-chat-messages .bubble-container.my-action { justify-content: flex-end; } .lol-social-chat-messages .bubble-container.new-sender { margin-top: 6px; } .lol-social-chat-messages .system-bubble { padding: 2px 0; color: #a09b8c; font-style: italic; } .lol-social-chat-messages .chat-bubble { order: 1; padding: 4px 8px; border-radius: 5px; position: relative; word-wrap: break-word; max-width: 80%; } .lol-social-chat-messages .chat-bubble::after { content: ''; position: absolute; top: 0; border: 5px solid transparent; } .lol-social-chat-messages .chat-message { overflow: hidden; } .lol-social-chat-messages .chat-message a:link, .lol-social-chat-messages .chat-message a:visited { color: #0596aa; } .lol-social-chat-messages .mine .chat-message a:link, .lol-social-chat-messages .mine .chat-message a:visited { color: #f0e6d2; } .lol-social-chat-messages .action-name { font-weight: 900; } .lol-social-chat-messages .my-bubble { margin: 0 5px 0 0; background-color: #785a28; } .lol-social-chat-messages .my-bubble:lang(ar-ae) { margin: 0 0 0 5px; } .lol-social-chat-messages .my-bubble::after { right: -5px; border-top-color: #785a28; } .lol-social-chat-messages .my-bubble:lang(ar-ae)::after { right: auto; left: -5px; } .lol-social-chat-messages .their-bubble { margin: 0 0 0 5px; background-color: #1e2328; } .lol-social-chat-messages .their-bubble:lang(ar-ae) { margin: 0 5px 0 0; } .lol-social-chat-messages .their-bubble::after { left: -5px; border-top-color: #1e2328; } .lol-social-chat-messages .their-bubble:lang(ar-ae)::after { left: auto; right: -5px; } .lol-social-chat-messages .room-bubble .their-bubble { margin-left: 40px; } .lol-social-chat-messages .author-name { color: #a09b8c; margin-bottom: 4px; } .lol-social-chat-messages .avatar { float: left; margin-right: -40px; margin-bottom: -4px; } .lol-social-chat-messages .system-message { margin-left: 13px; color: #5b5a56; } .lol-social-chat-messages .system-message.celebration { color: #c89b3c; } .lol-social-chat-messages .system-message.action { color: #c8aa6e; } .lol-social-chat-messages .system-message.room { margin-left: 48px; } .lol-social-chat-messages .timestamp { color: #a09b8c; order: 2; white-space: nowrap; margin: 5px 10px; opacity: 0; transition: opacity 300ms; } .lol-social-chat-messages .bubble-container:hover .timestamp { opacity: 1; } .lol-social-chat-messages .mine .timestamp { order: 0; } .lol-social-chat-messages .detached .my-bubble { margin-left: 0px; } .lol-social-chat-messages .detached .their-bubble { margin-right: 0px; } .social-count-badge { font-weight: bold; border-radius: 3px; background-color: #c89b3c; color: #010a13; padding: 0 6px; height: 16px; font-size: 12px; display: flex; align-items: center; } .social-count-badge.will-animate-in { opacity: 0; } .social-count-badge.animate-in { opacity: 1; transition: opacity 0.3s ease-in-out; } @-moz-keyframes highlight { from { background: rgba(240,230,210,0.18); } to { background: rgba(240,230,210,0.4); } } @-webkit-keyframes highlight { from { background: rgba(240,230,210,0.18); } to { background: rgba(240,230,210,0.4); } } @-o-keyframes highlight { from { background: rgba(240,230,210,0.18); } to { background: rgba(240,230,210,0.4); } } @keyframes highlight { from { background: rgba(240,230,210,0.18); } to { background: rgba(240,230,210,0.4); } } @-moz-keyframes highlightBadge { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.35) saturate(1.35); } } @-webkit-keyframes highlightBadge { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.35) saturate(1.35); } } @-o-keyframes highlightBadge { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.35) saturate(1.35); } } @keyframes highlightBadge { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.35) saturate(1.35); } } .lol-social-chat-toggle-button { position: relative; background-color: #010a13; z-index: 1; } .lol-social-chat-toggle-button .chat-button { background-image: url(/fe/lol-social/chat_button.png); background-size: cover; background-position-y: 0px; width: 38px; height: 32px; } .lol-social-chat-toggle-button .chat-button:hover { background-position-y: -32px; } .lol-social-chat-toggle-button .chat-button:active { background-position-y: -64px; } .lol-social-chat-toggle-button .chat-button:disabled, .lol-social-chat-toggle-button .chat-button[disabled], .lol-social-chat-toggle-button .chat-button.disabled { cursor: default; background-position-y: -96px; } .lol-social-chat-toggle-button .chat-button:lang(ar-ae) { transform: scaleX(-1); } .lol-social-chat-toggle-button .chat-button.toggled { background-image: url(/fe/lol-social/chat_button.png); background-size: cover; background-position-y: -96px; } .lol-social-chat-toggle-button .chat-button.toggled:hover { background-position-y: -128px; } .lol-social-chat-toggle-button .chat-button.toggled:active { background-position-y: -160px; } .lol-social-chat-toggle-button .chat-button.toggled:disabled, .lol-social-chat-toggle-button .chat-button.toggled[disabled], .lol-social-chat-toggle-button .chat-button.toggled.disabled { cursor: default; background-position-y: -192px; } .lol-social-chat-toggle-button .chat-button.unread { animation: pulseChatButton 750ms infinite alternate ease-in-out; } .lol-social-chat-toggle-button .chat-button[disabled] { background-position-y: 0; opacity: 0.5; cursor: default; } .lol-social-chat-toggle-button .social-count-badge { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); box-shadow: 0 0 2px rgba(1,10,19,0.5); } @-moz-keyframes pulseChatButton { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.5) saturate(1.5); } } @-webkit-keyframes pulseChatButton { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.5) saturate(1.5); } } @-o-keyframes pulseChatButton { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.5) saturate(1.5); } } @keyframes pulseChatButton { from { -webkit-filter: brightness(1) saturate(1); } to { -webkit-filter: brightness(1.5) saturate(1.5); } } lol-social-avatar { display: flex; position: relative; box-sizing: border-box; width: 32px; height: 32px; pointer-events: none; } lol-social-avatar[me] { pointer-events: all; } lol-social-avatar[large] { width: 50px; height: 50px; } lol-social-avatar lol-social-availability-hitbox { position: absolute; padding: 2px; bottom: 3px; right: -3px; } lol-social-avatar[large] lol-social-availability-hitbox { bottom: 6px; } lol-social-avatar .icon-ring { position: absolute; width: 100%; height: 100%; background: url(/fe/lol-social/playerobject_s_sprite.png) no-repeat top; background-size: cover; } lol-social-avatar .icon-ring:not(.has-icon) { background-position-y: -128px; } lol-social-avatar .icon-ring.remote { background-image: url(/fe/lol-social/playerobject_s_sprite2.png); } lol-social-avatar[large] .icon-ring { background: url(/fe/lol-social/playerobject_m_sprite.png) no-repeat top; background-size: cover; } lol-social-avatar[large] .icon-ring:not(.has-icon) { background-position-y: -200px; } lol-social-avatar .icon-image { position: absolute; overflow: hidden; border-radius: 50%; border: 2px solid transparent; box-sizing: border-box; width: 100%; height: 100%; background-color: #010a13; } lol-social-avatar .icon-image:not(.has-icon) { display: none; } lol-social-avatar .icon-image.remote { border-radius: 3px; } lol-social-avatar .summoner-level-icon { margin-top: -7px; } lol-social-avatar .summoner-level-icon .icon-image { background-color: inherit; } lol-social-avatar .xp-ring { border-radius: 50%; width: 56px; height: 56px; position: absolute; left: -3px; top: -3px; } lol-social-avatar .unfilled.xp-ring { background-color: #0a323c; } lol-social-avatar .filled.xp-ring { background-color: #0596aa; } lol-social-avatar .center.xp-ring { background-color: #010a13; width: 48px; height: 48px; left: 1px; top: 1px; } lol-social-avatar .summoner-level-ring { background-image: url(/fe/lol-social/social_panel_level_ring.png); background-position: center; background-size: 76px 76px; position: absolute; width: 70px; height: 70px; top: -10px; left: -10px; } lol-social-avatar .summoner-level { width: 32px; font-size: 11px; position: absolute; bottom: -10px; left: 9px; text-align: center; } lol-social-avatar .summoner-level.has-long-summoner-level { font-size: 10px; bottom: -8px; } lol-social-avatar:not([disabled]):hover .icon-ring.has-icon, .social-avatar-hit:hover lol-social-avatar:not([disabled]) .icon-ring.has-icon, .context-menu-open lol-social-avatar .icon-ring.has-icon { background-position-y: -32px; } lol-social-avatar:not([disabled]):active .icon-ring.has-icon, .social-avatar-hit:active lol-social-avatar:not([disabled]) .icon-ring.has-icon { background-position-y: -64px; } lol-social-avatar[large]:not([disabled]):hover .icon-ring.has-icon, .social-avatar-hit:hover lol-social-avatar[large]:not([disabled]) .icon-ring.has-icon, .context-menu-open lol-social-avatar[large] .icon-ring.has-icon { background-position-y: -50px; } lol-social-avatar[large]:not([disabled]):active .icon-ring.has-icon, .social-avatar-hit:active lol-social-avatar[large]:not([disabled]) .icon-ring.has-icon { background-position-y: -100px; } lol-social-avatar:not([disabled]):hover .summoner-level-ring { -webkit-filter: brightness(1.5); } lol-social-avatar:not([disabled]):active img.icon-image, .social-avatar-hit:active lol-social-avatar:not([disabled]) img.icon-image { opacity: 0.5; } .lol-social-chat-window .hidden { display: none !important; } .lol-social-chat-window .chat-window-wrapper { display: flex; width: 100%; height: 100%; background-color: rgba(1,10,19,0.88); border: thin solid #1e282d; box-sizing: border-box; pointer-events: auto; position: absolute; bottom: 0; right: 0; overflow: hidden; } .lol-social-chat-window .chat-window-wrapper.use-animation { transition: all 350ms cubic-bezier(0, 0, 0, 1); } .lol-social-chat-window .chat-window-wrapper.button-inside .lol-social-chat-input .chat-input { margin-right: 41px; } .lol-social-chat-window .conversations { position: relative; width: 199px; height: auto; border-right: thin solid #1e282d; box-sizing: border-box; flex-shrink: 0; } .lol-social-chat-window .conversations:not(.scrolled-to-bottom) { -webkit-mask-image: -webkit-gradient(linear, left bottom, left 87%, from(rgba(0,0,0,0.1)), to(#000)); } .lol-social-chat-window .conversations.has-button { margin-bottom: 36px; } .lol-social-chat-window .conversations:lang(ar-ae) { border-right: none; border-left: thin solid #1e282d; } .lol-social-chat-window .conversation { display: flex; align-items: center; height: 60px; cursor: pointer; padding: 0 0 0 10px; } .lol-social-chat-window .conversation:lang(ar-ae) { padding: 0 10px 0 0; } .lol-social-chat-window .conversation.active .conversation-subtitle { color: #a09b8c; } .lol-social-chat-window .conversation:hover { background-color: #1e2328; } .lol-social-chat-window .conversation:hover .conversation-close-button { display: block; } .lol-social-chat-window .conversation:hover .conversation-cannot-close-button { display: block; } .lol-social-chat-window .conversation:hover .conversation-muted:not([permanent]) { display: none; } .lol-social-chat-window .conversation:hover .conversation-subtitle { color: #f0e6d2; } .lol-social-chat-window .conversation.active { padding: 0; background: rgba(240,230,210,0.18); } .lol-social-chat-window .conversation.active::before { content: ''; width: 6px; height: 100%; background-color: #c89b3c; margin: 0 10px 0 0; } .lol-social-chat-window .conversation.active:lang(ar-ae)::before { margin: 0 0 0 10px; } .lol-social-chat-window .conversation.animate-move { background-color: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.7); } .lol-social-chat-window .clash-seperator { height: 1px; max-width: 100%; margin: 8px 10px; background: rgba(240,230,210,0.3); } .lol-social-chat-window .conversation-titles-container { flex: 1; overflow: hidden; margin: 0 5px 0 0; } .lol-social-chat-window .conversation-titles-container:lang(ar-ae) { margin: 0 0 0 5px; } .lol-social-chat-window .clash-icon { width: 32px; height: 32px; margin: 0 6px 0 0; } .lol-social-chat-window .clash-icon:lang(ar-ae) { margin: 0 0 0 6px; } .lol-social-chat-window .conversation-title, .lol-social-chat-window .conversation-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; } .lol-social-chat-window .conversation-title { color: #f0e6d2; } .lol-social-chat-window .conversation-subtitle { color: #5b5a56; } .lol-social-chat-window .conversation.unread { background: rgba(240,230,210,0.18); } .lol-social-chat-window .conversation.unread.use-animation { animation: highlight 825ms 4 alternate; } .lol-social-chat-window .conversation.unread.use-animation .social-count-badge { animation: highlightBadge 825ms 4 alternate; } .lol-social-chat-window .conversation.unread .conversation-title { font-weight: bold; } .lol-social-chat-window .conversation.unread .conversation-subtitle { color: #c89b3c; font-weight: bold; } .lol-social-chat-window .conversation-close-button { -webkit-mask: url(/fe/lol-social/x_mask.png) no-repeat center; -webkit-mask-size: 18px; background-color: #c8aa6e; -webkit-mask-size: contain; display: none; width: 18px; height: 18px; margin: 0 3px 0 auto; } .lol-social-chat-window .conversation-close-button:hover { background-color: #f0e6d2; } .lol-social-chat-window .conversation-close-button:active { background-color: #463714; } .lol-social-chat-window .conversation-close-button:lang(ar-ae) { margin: 0 auto 0 3px; } .lol-social-chat-window .conversation-cannot-close-button { -webkit-mask: url(/fe/lol-social/x_block_mask.png) no-repeat center; -webkit-mask-size: 18px; background-color: #5b5a56; -webkit-mask-size: contain; display: none; width: 18px; height: 18px; margin: 0 3px 0 auto; } .lol-social-chat-window .conversation-cannot-close-button:lang(ar-ae) { margin: 0 auto 0 3px; } .lol-social-chat-window .conversation-muted { -webkit-mask: url(/fe/lol-social/mute_mask.png) no-repeat center; -webkit-mask-size: 16px; background-color: #5b5a56; width: 22px; height: 22px; } .lol-social-chat-window .social-count-badge { margin: 0 3px; } .lol-social-chat-window .conversations-list { display: flex; flex-direction: column; } .lol-social-chat-window .more-unread { position: absolute; left: 0; width: 179px; padding: 0 4px; box-sizing: border-box; background-color: rgba(1,10,19,0.5); cursor: pointer; } .lol-social-chat-window .more-unread .bar { background-color: #c89b3c; text-align: center; vertical-align: middle; line-height: 24px; font-weight: 900; color: #010a13; font-size: 12px; } .lol-social-chat-window .more-unread .arrow { position: absolute; left: 50%; margin-left: -6px; border: 4px solid transparent; } .lol-social-chat-window .more-unread.below { bottom: 0; padding-bottom: 20px; } .lol-social-chat-window .more-unread.below .arrow { border-top: 6px solid #f0e6d2; bottom: 4px; } .lol-social-chat-window .more-unread.above { top: 0; padding-top: 20px; } .lol-social-chat-window .more-unread.above .arrow { border-bottom: 6px solid #f0e6d2; top: 4px; } .lol-social-chat-window .chat-area { position: relative; width: 100%; display: flex; flex-direction: column; } .lol-social-chat-window .chat-header { color: #f0e6d2; display: flex; align-items: center; justify-content: flex-end; height: 48px; border-bottom: thin solid #785a28; padding: 0 0 0 8px; box-sizing: border-box; flex-shrink: 0; overflow: hidden; } .lol-social-chat-window .chat-header:lang(ar-ae) { padding: 0 8px 0 0; } .lol-social-chat-window .chat-header .spacer { flex: 1; } .lol-social-chat-window .chat-header.room-header .chat-name { cursor: pointer; } .lol-social-chat-window .chat-header .chat-header-clash-title-container { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; } .lol-social-chat-window .chat-header .chat-header-clash-title-prefix { color: #c8aa6e; flex-direction: row; overflow: hidden; margin: 0 7px 0 0; } .lol-social-chat-window .chat-header .chat-header-clash-title-prefix:lang(ar-ae) { margin: 0 0 0 7px; } .lol-social-chat-window .chat-header .chat-header-clash-title-main { text-overflow: ellipsis; max-width: 150px; flex-direction: row; overflow: hidden; } .lol-social-chat-window .chat-header .chat-header-title { text-overflow: ellipsis; max-width: 200px; flex-direction: row; overflow: hidden; } .lol-social-chat-window .chat-header .chat-participants-count { display: flex; flex-direction: column; margin: 0 0 0 5px; } .lol-social-chat-window .chat-header .chat-participants-count:lang(ar-ae) { margin: 0 5px 0 0; } .lol-social-chat-window .toggle-btn { margin: 2px 0 0 8px; } .lol-social-chat-window .toggle-btn:lang(ar-ae) { margin: 2px 8px 0 0; } .lol-social-chat-window .status, .lol-social-chat-window .avatar { margin: 0 8px 0 0; } .lol-social-chat-window .status:lang(ar-ae), .lol-social-chat-window .avatar:lang(ar-ae) { margin: 0 0 0 8px; } .lol-social-chat-window .chat-name { display: flex; height: 100%; align-items: center; overflow: hidden; justify-content: flex-start; flex-direction: row; } .lol-social-chat-window .chat-name-info { display: flex; flex-direction: column; justify-content: center; } .lol-social-chat-window .chat-name-info > div { display: flex; height: 100%; align-items: center; overflow: hidden; justify-content: flex-start; flex-direction: row; } .lol-social-chat-window .chat-name-info .chat-name { height: auto; } .lol-social-chat-window .chat-name-info .chat-gnt { color: #5b5a56; margin-top: -2px; } .lol-social-chat-window .chat-name-info .gameTag { color: #5b5a56; } .lol-social-chat-window .header-button { height: 18px; width: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; align-self: flex-start; margin: 8px 5px 0 0; } .lol-social-chat-window .header-button:lang(ar-ae) { margin: 8px 0 0 5px; } .lol-social-chat-window .conversation-settings-button { -webkit-mask: url(/fe/lol-social/control_settings_mask.png) no-repeat center; -webkit-mask-size: 18px; background-color: #a09b8c; -webkit-mask-size: contain; margin-right: 48px; } .lol-social-chat-window .conversation-settings-button:hover { background-color: #f0e6d2; } .lol-social-chat-window .conversation-settings-button:active { background-color: #3c3c41; } .lol-social-chat-window .conversation-settings-button[disabled] { background-color: #5c5b57; cursor: default; pointer-events: none; } .lol-social-chat-window .participants { color: #f0e6d2; z-index: 1; margin-top: -1px; padding-bottom: 4px; width: 100%; max-height: calc(100% - 51px); background: #010a13; border-bottom: thin solid #785a28; } .lol-social-chat-window .participants .participant { display: flex; align-items: center; padding: 6px; } .lol-social-chat-window .participants .participant .avatar { margin: 0 8px 0 0; } .lol-social-chat-window .participants .participant .avatar:lang(ar-ae) { margin: 0 0 0 8px; } .lol-social-chat-window .messages { flex: 1; } .lol-social-chat-window .lol-social-chat-input .chat-input { color: #f0e6d2; padding: 5px 8px; flex-shrink: 0; } .lol-social-chat-window .lol-social-chat-input .chat-input:lang(ar-ae) { direction: rtl; } .lol-social-chat-window .create-panel .create-panel-search-input { margin-bottom: 5px; } .lol-social-chat-window .create-panel .create-panel-gnt { color: #5b5a56; } .lol-social-chat-window .create-panel .create-panel-gnt .create-panel-game-name.only-name { color: #a09b8c; } .lol-social-chat-window .create-panel .create-panel-search-match { color: #a09b8c; display: flex; align-items: center; padding: 5px 10px; letter-spacing: 0.05em; } .lol-social-chat-window .create-panel .create-panel-search-match:hover { color: #f0e6d2; cursor: pointer; } .lol-social-chat-window .create-panel .create-panel-search-match:hover .create-panel-gnt { color: #a09b8c; } .lol-social-chat-window .create-panel .create-panel-search-match:hover .create-panel-gnt .create-panel-game-name.only-name { color: #f0e6d2; } .lol-social-chat-window .create-panel .create-chat-input { height: 32px; width: 349px; position: absolute; bottom: 0; } .lol-social-chat-window .settings-menu { position: absolute; top: 47px; right: 0; min-width: 180px; border: thin solid #785a28; background-color: #010a13; } .lol-social-chat-window .settings-menu:lang(ar-ae) { right: auto; left: 0; } .lol-social-chat-window lol-social-menu-item { color: #cdbe91; padding: 0; } .lol-social-chat-window lol-social-menu-item:lang(ar-ae) { text-align: right; } .lol-social-chat-window label.conversation-mute-label { margin: 2px 0 0 10px; } .lol-social-chat-window lol-uikit-flat-checkbox, .lol-social-chat-window .clear-history { padding: 8px 10px; } .lol-social-chat-window lol-uikit-flat-checkbox .hide-offline-label { color: #cdbe91; } .lol-social-chat-window lol-uikit-flat-checkbox:hover .hide-offline-label { color: #f0e6d2; } .lol-social-chat-window .new-chat-button { height: 32px; width: 191px; padding: 4px 4px 0px 4px; position: absolute; left: 0; bottom: 0; } .lol-social-chat-window .new-chat-button:lang(ar-ae) { left: auto; right: 0; } .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-social/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-social/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-social/icon_fb.png); } lol-friend-finder-by-social-network .social-networks .social-network.qq::before { -webkit-mask-image: url(/fe/lol-social/icon_qq.png); } lol-friend-finder-by-social-network .social-networks .social-network.vk::before { -webkit-mask-image: url(/fe/lol-social/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-social/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-social/icon_fb.png); } lol-friend-finder-by-social-network .network.qq { -webkit-mask-image: url(/fe/lol-social/icon_qq.png); } lol-friend-finder-by-social-network .network.vk { -webkit-mask-image: url(/fe/lol-social/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-social/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-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 .enter-summoner-name { height: 32px; padding-left: 25px; } .lol-friend-finder-by-summoner-name .enter-summoner-name.error { border: thin solid #bc213b; } #requested-players-list { display: flex; flex-wrap: wrap; align-content: flex-start; margin-bottom: 20px; } .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-social/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-social/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-social/icon_fb.png); } lol-friend-finder-social-summoner .social-profile-name.social-profile-name-qq::before { background-image: url(/fe/lol-social/icon_qq.png); } lol-friend-finder-social-summoner .social-profile-name.social-profile-name-vk::before { background-image: url(/fe/lol-social/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-social/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-social/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:not(.working) .player-name { color: #f0e6d2; } .lol-friend-finder-requested-player .player-identity:hover:not(.working) .player-gnt { color: #a09b8c; } .lol-friend-finder-requested-player .player-identity:hover:not(.working) .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-social/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; 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-social/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-social/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); } } .hover-card-root-container { display: block; position: relative; -webkit-filter: drop-shadow(0 1px 8px rgba(0,0,0,0.6)); padding: 2px; top: unset !important; left: unset !important; right: unset !important; bottom: unset !important; } .hover-card { position: relative; width: 390px; } .hover-card:lang(ar-ae) { direction: rtl; } .hover-card.left, .hover-card.right { width: 402px; } .hover-card-container { background-color: #010a13; } .hover-card-container.right > div { padding-right: 12px; } .hover-card-container.left > div { padding-left: 12px; } .hover-card-container.top > div:first-child { padding-top: 12px; } .hover-card-container.bottom > div:last-child { padding-bottom: 12px; } .no-header-container #hover-card-header { display: none; } .no-header-container .hover-card-identity { margin: 0px 19px 0 19px; } .no-header-container .hover-card-info { height: 79px; margin-top: 25px; } #border-container { pointer-events: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #border { -webkit-filter: drop-shadow(0 0 1px #000); } #hover-card-header { height: 79px; background-image: url(/fe/lol-social/hovercard_default_bg.jpg); background-size: 100%; background-position: 50% 18%; border-bottom: thin solid rgba(240,230,210,0.1); display: flex; justify-content: space-between; position: relative; overflow: hidden; } #hover-card-header .hover-card-backdrop { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 100%; background-position: 50% 18%; } #hover-card-header .hover-card-gradient { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 160px; background: radial-gradient(transparent 70%, #010a13); } .hover-card-header-left { display: flex; height: 18px; align-items: center; position: relative; margin: 11px 0 0 9px; } .hover-card-header-left:lang(ar-ae) { margin: 11px 9px 0 0; } .hover-card-header-right { display: flex; position: relative; width: 48px; justify-content: flex-end; margin: 8px 8px 0 0; } .hover-card-header-right:lang(ar-ae) { margin: 8px 0 0 8px; } .hover-card-mastery-image { height: 20px; width: 20px; -webkit-mask-image: url(/fe/lol-social/Mastery.png); -webkit-mask-size: contain; background-color: #f0e6d2; margin: 0 4px 0 0; } .hover-card-mastery-image:lang(ar-ae) { margin: 0 0 0 6px; } .hover-card-mastery-score { letter-spacing: 0.03em; color: #f0e6d2; } .hover-card-role, .hover-card-position { -webkit-mask-size: contain; background-color: #f0e6d2; } .hover-card-role { height: 18px; width: 18px; } .hover-card-role.ASSASSIN { -webkit-mask-image: url(/fe/lol-social/roleicon-assassin.png); } .hover-card-role.FIGHTER { -webkit-mask-image: url(/fe/lol-social/roleicon-fighter.png); } .hover-card-role.MAGE { -webkit-mask-image: url(/fe/lol-social/roleicon-mage.png); } .hover-card-role.MARKSMAN { -webkit-mask-image: url(/fe/lol-social/roleicon-marksman.png); } .hover-card-role.SUPPORT { -webkit-mask-image: url(/fe/lol-social/roleicon-support.png); } .hover-card-role.TANK { -webkit-mask-image: url(/fe/lol-social/roleicon-tank.png); } .hover-card-position { height: 20px; width: 20px; margin: 0 0 0 10px; } .hover-card-position:lang(ar-ae) { margin: 0 10px 0 0; } .hover-card-position.TOP { -webkit-mask-image: url(/fe/lol-social/positionicon-top.png); } .hover-card-position.JUNGLE { -webkit-mask-image: url(/fe/lol-social/positionicon-jungle.png); } .hover-card-position.MID { -webkit-mask-image: url(/fe/lol-social/positionicon-mid.png); } .hover-card-position.BOTTOM { -webkit-mask-image: url(/fe/lol-social/positionicon-bottom.png); } .hover-card-position.SUPPORT { -webkit-mask-image: url(/fe/lol-social/positionicon-support.png); } .hover-card-info-container { flex: 1 1 auto; display: flex; flex-direction: row; align-items: center; } .hover-card-identity { position: relative; margin: -46px 28px 0 28px; } .hover-card-identity lol-regalia-hovercard-v2-element { display: flex; width: 100%; height: 100%; } .hover-card.has-regalia .hover-card-identity { margin: -46px 28px 0 32px; } .hover-card.has-regalia .hover-card-identity:lang(ar-ae) { margin: -46px 32px 0 28px; } .hover-card-icon { position: relative; flex: 0 0 auto; align-self: baseline; width: 70px; height: 70px; } .hover-card-icon .icon-image { position: absolute; overflow: hidden; border-radius: 50%; background-color: #1e2328; width: 70px; height: 70px; border: 2px solid transparent; box-sizing: border-box; } .hover-card-icon .icon-ring { position: absolute; width: 100%; height: 100%; background: url(/fe/lol-social/ring.svg) no-repeat top; background-size: cover; } .hover-card-icon .icon-ring.no-image { background: url(/fe/lol-social/blocked-summoner.svg) no-repeat top; background-size: cover; } .summoner-themed-level-ring { height: 70px; width: 70px; --themed-level-ring-level-text-font-size: 12px; --themed-level-ring-level-text-bottom: -6%; --themed-level-ring-level-text-top: auto; --themed-level-ring-level-text-line-height: 20px; } .hover-card-division { color: #a09b8c; font-size: 10px; position: absolute; top: 1px; width: 100%; text-align: center; margin-left: 1px; } .hover-card-rank-image { height: 21px; position: absolute; margin: 8px 0 0 6px; } .hover-card-rank-image:lang(ar-ae) { margin: 8px 6px 0 0; } .hover-card-level { color: #a09b8c; margin-left: 2px; align-self: center; width: 100%; text-align: center; } .hover-card-info { flex: 1 1 auto; height: 90px; display: flex; flex-direction: column; overflow: hidden; line-height: 20px; margin: 0 18px 0 5px; } .hover-card-info:lang(ar-ae) { margin: 0 5px 0 18px; } .hover-card-name-wrapper { display: flex; align-items: center; flex-direction: row; margin: 10px 0 0; } .hover-card-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hover-card-inline-game-tag { letter-spacing: 0.03em; color: #5b5a56; } .hover-card-game-name-and-tag-wrapper { letter-spacing: 0.05em; color: #5b5a56; display: flex; margin-top: 2px; } .hover-card-game-name-and-tag-wrapper .hover-card-game-tag { margin-left: 4px; } .hover-card-ranked-description { display: flex; align-items: center; font-weight: 600; letter-spacing: 0.05em; margin-top: -1px; } .hover-card-ranked-description .hover-card-rank-image { position: static; margin: 0 4px 0 0; } .hover-card-ranked-description .hover-card-rank-image:lang(ar-ae) { margin: 0 0 0 4px; } .hover-card-footer { padding-right: 12px !important;  letter-spacing: 0.05em; } .hover-card-bottom-info { border-top: thin solid rgba(240,230,210,0.15); line-height: 20px; margin-top: 5px; min-height: 34px; } .hover-card-note-wrapper { display: flex; background-color: #1e2328; padding: 3px 16px; } .hover-card-note-wrapper-offline-gnt { display: flex; background-color: #1e2328; padding: 3px 16px; line-height: 20px; margin-top: 5px; } .hover-card-note-icon { height: 16px; width: 16px; background-image: url(/fe/lol-social/Note.png); background-size: cover; flex-shrink: 0; } .hover-card-note { word-break: break-word; overflow: hidden; position: relative; color: #5b5a56; margin: 0 0 0 8px; } .hover-card-note:lang(ar-ae) { margin: 0 8px 0 0; } .hover-card-availability { display: flex; align-items: center; color: #a09b8c; padding: 8px 16px 2px 16px; } .hover-card-availability-offline-gnt { display: flex; align-items: center; color: #a09b8c; } .hover-card-gameinfo { flex: 1 1 auto; color: #0acbe6; } .hovercard-open-party { width: 100%; color: #4bb44b; } .hovercard-open-party .away { color: #a09b8c; } .hovercard-open-party-text { width: 100%; display: flex; justify-content: space-between; } .hovercard-open-party-text .open-party-icon { width: 16px; height: 16px; border-radius: 2px; background: #010a13 url(/fe/lol-social/status_open_party.png) no-repeat center; background-size: contain; flex-grow: 0; margin: 0 5px 1px 1px; } .hovercard-open-party-text .open-party-icon:lang(ar-ae) { margin: 0 1px 1px 5px; } .hovercard-open-party-text .open-party-availability { display: flex; align-items: center; flex-grow: 0; margin: 0 5px 1px 1px; } .hovercard-open-party-text .open-party-availability:lang(ar-ae) { margin: 0 1px 1px 5px; } .hovercard-open-party-text .open-party-occupancy { flex-grow: 1; } .hovercard-open-party-text .open-party-string { flex-grow: 0; margin: 0 4px 0 0; } .hovercard-open-party-text .open-party-string:lang(ar-ae) { margin: 0 0 0 4px; } .hovercard-open-party-summoners { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hovercard-open-party-summoners:after { content: '\200B'; } .hover-card-time { flex: 0 0 auto; color: #0acbe6; } .hover-card-game-status { color: #09a646; } .hover-card-game-status.dnd { color: #0acbe6; } .hover-card-availability-message.dnd { color: #0acbe6; } .hover-card-availability-message.chat { color: #09a646; } .hover-card-availability-message.spectating { color: #0acbe6; } .hover-card-availability-icon { display: none; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; border: 2px solid transparent; flex-shrink: 0; background: #010a13; box-shadow: 0 0 0 2px #010a13; margin: -2px 12px 0 4px; } .hover-card-availability-icon:lang(ar-ae) { margin: -2px 4px 0 12px; } .hover-card-availability-icon.chat, .hover-card-availability-icon.available, .hover-card-availability-icon.online { display: block; background-color: #09a646; border-color: #66f8a0; } .hover-card-availability-icon.dnd, .hover-card-availability-icon.spectating { display: block; background-color: #005176; border-color: #0ac5e1; } .hover-card-availability-icon.away { display: block; border-color: #9c3213; } .hover-card-availability-icon.offline { display: block; border-color: #9c988a; } .hover-card-availability-icon.offline-gnt { display: block; border-color: #9c988a; margin: -2px 6px 0 0px; } .hover-card-availability-icon.offline-gnt:lang(ar-ae) { margin: -2px 0 0 6px; } .hover-card-availability-icon.mobile { display: block; width: 16px; height: 16px; box-shadow: none; border: none; border-radius: 0; background: url(/fe/lol-social/mobile.svg) no-repeat center; background-size: 16px 16px; margin: -1px 7px 0 0; } .hover-card-availability-icon.mobile:lang(ar-ae) { margin: -1px 0 0 7px; } .hover-card-availability-icon.chat.remote, .hover-card-availability-icon.available.remote, .hover-card-availability-icon.online.remote { width: 16px; height: 16px; box-shadow: none; border: none; border-radius: 0; background: url(/fe/lol-social/remote-available.svg) no-repeat center; background-size: 16px 16px; margin: -1px 7px 0 0; } .hover-card-availability-icon.chat.remote:lang(ar-ae), .hover-card-availability-icon.available.remote:lang(ar-ae), .hover-card-availability-icon.online.remote:lang(ar-ae) { margin: -1px 0 0 7px; } .hover-card-status-message-wrapper { display: flex; padding: 0 16px 4px 16px; } .hover-card-status-message-icon { height: 16px; width: 16px; background-image: url(/fe/lol-social/Bullhorn.png); background-size: cover; } .hover-card-status-message { overflow: hidden; text-overflow: ellipsis; position: relative; margin: 0 0 0 8px; } .hover-card-status-message:lang(ar-ae) { margin: 0 8px 0 0; } .lol-social-identity { display: flex; align-items: center; padding: 18px 8px 0px 0; right: 0; width: 213px; min-height: 55px; postition: relative; } .lol-social-identity .identity-rewards-unread-pip { position: absolute; top: 14px; left: 74px; } .lol-social-identity lol-social-avatar { flex-shrink: 0; margin: 0 12px 5px 11px; width: 56px; height: 56px; } .lol-social-identity lol-social-avatar .icon-image { left: 5px; top: 5px; width: 48px; height: 48px; } .lol-social-identity lol-social-avatar .xp-ring { left: 0; top: 0; } .lol-social-identity lol-social-avatar .center.xp-ring { left: 4px; top: 4px; } .lol-social-identity lol-social-avatar .summoner-level-ring { top: -7px; left: -7px; } .lol-social-identity lol-social-avatar .summoner-level { bottom: -7px; left: 13px; } .lol-social-identity lol-social-avatar .summoner-level-icon { margin-top: -8px; } .lol-social-identity lol-uikit-radial-progress { width: 56px; height: 56px; } .lol-social-identity .details { flex: 1; overflow: hidden; } .lol-social-identity .lower-details { display: flex; overflow: hidden; } .lol-social-identity .lower-details lol-social-availability-hitbox { height: 11px; margin: 3px 5px 0 0; } .lol-social-identity .name { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .lol-social-identity .status { display: flex; cursor: pointer; margin-top: 3px; flex: 1; overflow: hidden; } .lol-social-identity .status:hover .message { color: #f0e6d2; } .lol-social-identity .status:active .message { color: #cdbe91; } .lol-social-identity .status.disabled { cursor: default; pointer-events: none; } .lol-social-identity .identity-message { flex: 1; } .lol-social-identity .identity-icon { pointer-events: none; } .lol-social-identity .identity-icon.social-avatar-hit { pointer-events: auto; cursor: pointer; width: 56px; height: 56px; } .lol-social-identity .arrow { margin-right: 4px; } .lol-social-identity .notifications-button { margin-right: 2px; margin-left: 4px; align-self: flex-end; } .lol-social-identity .status .status-message:lang(ar-ae) { text-align: left; } .identity-menu { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; width: 220px; height: 30px; } .lol-social-sidebar { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; color: #a09b8c; font-size: 12px; cursor: default; -webkit-user-drag: none; -webkit-user-select: none; background: linear-gradient(#010a13, transparent 18%); } .lol-social-sidebar .panel { flex: 1; } .lol-social-sidebar .roster { flex: 1; } .lol-social-sidebar .inprogress .spinner { width: 30px; height: 30px; background: url(/fe/lol-social/spinner.png) no-repeat center; animation: social-login-spin 3s linear infinite; } .lol-social-sidebar .centered { display: flex; align-items: center; justify-content: center; } .lol-social-sidebar .disconnected .message { background: url(/fe/lol-social/poro_shocked.png) no-repeat center top; padding: 116px 18px 0; text-align: center; } .lol-social-sidebar .alpha-version-panel { color: #3c3c41; display: flex; align-items: center; width: 100%; height: 32px; border-top: thin solid #1e282d; } .lol-social-sidebar .alpha-tag { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; } .lol-social-sidebar .bug-report-button { background-image: url(/fe/lol-social/report_bug.png); background-size: cover; background-position-y: 0px; width: 34px; height: 34px; margin-right: -1px; } .lol-social-sidebar .bug-report-button:hover { background-position-y: -34px; } .lol-social-sidebar .bug-report-button:active { background-position-y: -68px; } .lol-social-sidebar .bug-report-button:disabled, .lol-social-sidebar .bug-report-button[disabled], .lol-social-sidebar .bug-report-button.disabled { cursor: default; background-position-y: -102px; } .lol-social-sidebar .social-buttons { display: flex; } .lol-social-sidebar .social-button { height: 32px; width: 38px; margin-left: 4px; flex: 0 0 auto; } .identity-and-parties { display: flex; flex-direction: column; animation: fadein 1s; font-size: 12px; } .identity-and-parties .roster { flex: 1; } .identity-and-parties .centered { display: flex; align-items: center; justify-content: center; } .identity-and-parties .disconnected .message { background: url(/fe/lol-social/poro_shocked.png) no-repeat center top; padding: 116px 18px 0; text-align: center; } .identity-and-parties .inprogress .spinner { width: 30px; height: 30px; background: url(/fe/lol-social/spinner.png) no-repeat center; animation: social-login-spin 3s linear infinite; } @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes social-login-spin { 100% { transform: rotate(360deg); } } @-webkit-keyframes social-login-spin { 100% { transform: rotate(360deg); } } @-o-keyframes social-login-spin { 100% { transform: rotate(360deg); } } @keyframes social-login-spin { 100% { transform: rotate(360deg); } } .lol-social-lower-pane-container { height: 100%; position: relative; overflow: hidden; display: flex; flex-direction: column; } .lol-social-menu-item { display: block; width: 100%; box-sizing: border-box; word-break: break-word; color: #cdbe91; font-size: 12px; line-height: 16px; text-align: left; cursor: pointer; padding: 8px 10px; outline: none; transition: padding 0.05s ease-in-out; } .lol-social-menu-input { display: block; } .lol-social-menu-input .wrapper { width: 100%; position: relative; overflow: hidden; } .lol-social-menu-input .input-icon { width: 18px; height: 18px; position: absolute; left: 10px; top: 5px; cursor: default; -webkit-mask: url(/fe/lol-social/note_mask.png) no-repeat center; -webkit-mask-size: contain; background-color: #c8aa6e; } .lol-social-menu-input .input-icon:lang(ar-ae) { left: auto; right: 10px; } .lol-social-menu-input.is-saving .input-icon { background-color: #f0e6d2; } .lol-social-menu-input .input { width: 100%; padding: 0 30px 0 6px; } .lol-social-menu-input .input:lang(ar-ae) { padding: 0 6px 0 30px; } .lol-social-menu-input.has-error .input { border: thin solid #bc213b; } .lol-social-menu-input.has-icon .input { padding: 0 6px 0 34px; } .lol-social-menu-input.has-icon .input:lang(ar-ae) { padding: 0 34px 0 6px; } .lol-social-menu-input .input.saving { display: block; border-color: transparent; border-image: none; box-shadow: none; background: none; } .lol-social-menu-input .animation { position: absolute; background: #785a28; transition: width 0.3s cubic-bezier(0, 0, 0, 1); overflow: hidden; height: 100%; width: 0; } .lol-social-menu-input.is-saving .animation { width: 100%; top: 0; left: 0; right: 0; } .lol-social-menu-input .animation .input-message { position: absolute; box-sizing: border-box; font-size: 12px; letter-spacing: 0.05em; line-height: 16px; color: #f0e6d2; height: 30px; padding: 7px; width: 222px; } .lol-social-menu-input.has-icon .animation .input-message { padding-left: 34px; } .lol-social-menu-input .animation.will-animate-in { right: 100%; } .lol-social-menu-input .animation.animate-in { right: 0; } .lol-social-menu-input .animation.animate-in .input-message { left: 0; right: auto; } .lol-social-menu-input .animation.will-animate-out { right: 0; left: 0; } .lol-social-menu-input .animation.animate-out { transition-delay: 0.3s; left: 100%; } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader, .player-behavior-reform-card-v2 .reform-card-subhead, .reform-card-v2-chat-log .reform-card-chat-log-header-title, .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab, .player-behavior-reform-card .reform-card-subhead { font-family: var(--font-display); } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container .rule-item-body, .code-of-conduct .code-of-conduct-content-container .more-info-link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited, .leaver-buster-dialog a:link, .leaver-buster-dialog a:visited, .player-behavior-reform-card-v2 .reform-card-body, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited, .reform-card-v2-chat-log .reform-card-chat-log-header a:link, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited, .player-behavior-reform-card .reform-card-body, .player-behavior-reform-card a:link, .player-behavior-reform-card a:visited, .reform-card-chat-log .chat-log-header-copy-log-link, .player-behavior-ban-notification a:link, .player-behavior-ban-notification a:visited { font-family: var(--font-body); } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container .rule-item-body, .code-of-conduct .code-of-conduct-content-container .more-info-link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited, .leaver-buster-dialog a:link, .leaver-buster-dialog a:visited, .player-behavior-reform-card-v2 .reform-card-subhead, .player-behavior-reform-card-v2 .reform-card-body, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited, .reform-card-v2-chat-log .reform-card-chat-log-header a:link, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited, .reform-card-v2-chat-log .reform-card-chat-log-header-title, .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab, .player-behavior-reform-card .reform-card-subhead, .player-behavior-reform-card .reform-card-body, .player-behavior-reform-card a:link, .player-behavior-reform-card a:visited, .reform-card-chat-log .chat-log-header-copy-log-link, .player-behavior-ban-notification a:link, .player-behavior-ban-notification a:visited { -webkit-user-select: none; } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container .rule-item-body, .code-of-conduct .code-of-conduct-content-container .more-info-link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited, .leaver-buster-dialog a:link, .leaver-buster-dialog a:visited, .player-behavior-reform-card-v2 .reform-card-subhead, .player-behavior-reform-card-v2 .reform-card-body, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited, .reform-card-v2-chat-log .reform-card-chat-log-header a:link, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited, .reform-card-v2-chat-log .reform-card-chat-log-header-title, .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab, .player-behavior-reform-card .reform-card-subhead, .player-behavior-reform-card .reform-card-body, .player-behavior-reform-card a:link, .player-behavior-reform-card a:visited, .reform-card-chat-log .chat-log-header-copy-log-link, .player-behavior-ban-notification a:link, .player-behavior-ban-notification a:visited { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title, .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader, .player-behavior-reform-card-v2 .reform-card-subhead, .reform-card-v2-chat-log .reform-card-chat-log-header-title, .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab, .player-behavior-reform-card .reform-card-subhead { text-transform: uppercase; } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title:lang(ko-kr), .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader:lang(ko-kr), .player-behavior-reform-card-v2 .reform-card-subhead:lang(ko-kr), .reform-card-v2-chat-log .reform-card-chat-log-header-title:lang(ko-kr), .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:lang(ko-kr), .player-behavior-reform-card .reform-card-subhead:lang(ko-kr), .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title:lang(ja-jp), .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader:lang(ja-jp), .player-behavior-reform-card-v2 .reform-card-subhead:lang(ja-jp), .reform-card-v2-chat-log .reform-card-chat-log-header-title:lang(ja-jp), .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:lang(ja-jp), .player-behavior-reform-card .reform-card-subhead:lang(ja-jp), .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title:lang(tr-tr), .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader:lang(tr-tr), .player-behavior-reform-card-v2 .reform-card-subhead:lang(tr-tr), .reform-card-v2-chat-log .reform-card-chat-log-header-title:lang(tr-tr), .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:lang(tr-tr), .player-behavior-reform-card .reform-card-subhead:lang(tr-tr), .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title:lang(el-gr), .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader:lang(el-gr), .player-behavior-reform-card-v2 .reform-card-subhead:lang(el-gr), .reform-card-v2-chat-log .reform-card-chat-log-header-title:lang(el-gr), .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:lang(el-gr), .player-behavior-reform-card .reform-card-subhead:lang(el-gr), .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title:lang(th-th), .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader:lang(th-th), .player-behavior-reform-card-v2 .reform-card-subhead:lang(th-th), .reform-card-v2-chat-log .reform-card-chat-log-header-title:lang(th-th), .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:lang(th-th), .player-behavior-reform-card .reform-card-subhead:lang(th-th), .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title:lang(zh-tw), .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader:lang(zh-tw), .player-behavior-reform-card-v2 .reform-card-subhead:lang(zh-tw), .reform-card-v2-chat-log .reform-card-chat-log-header-title:lang(zh-tw), .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:lang(zh-tw), .player-behavior-reform-card .reform-card-subhead:lang(zh-tw) { text-transform: none; } .player-behavior-reform-card-v2 .reform-card-subhead, .player-behavior-reform-card .reform-card-subhead { text-transform: none; } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title:lang(ar-ae) { letter-spacing: 0; } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader, .player-behavior-reform-card-v2 .reform-card-subhead, .reform-card-v2-chat-log .reform-card-chat-log-header-title, .player-behavior-reform-card .reform-card-subhead { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader:lang(ar-ae), .player-behavior-reform-card-v2 .reform-card-subhead:lang(ar-ae), .reform-card-v2-chat-log .reform-card-chat-log-header-title:lang(ar-ae), .player-behavior-reform-card .reform-card-subhead:lang(ar-ae) { letter-spacing: 0; } .player-behavior-reform-card-v2 .reform-card-subhead, .player-behavior-reform-card .reform-card-subhead { letter-spacing: 0.025em; } .player-behavior-reform-card-v2 .reform-card-subhead:lang(ar-ae), .player-behavior-reform-card .reform-card-subhead:lang(ar-ae) { letter-spacing: 0; } .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:lang(ar-ae) { letter-spacing: 0; } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container .rule-item-body, .code-of-conduct .code-of-conduct-content-container .more-info-link, .player-behavior-reform-card-v2 .reform-card-body, .player-behavior-reform-card .reform-card-body { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container .rule-item-body:lang(ar-ae), .code-of-conduct .code-of-conduct-content-container .more-info-link:lang(ar-ae), .player-behavior-reform-card-v2 .reform-card-body:lang(ar-ae), .player-behavior-reform-card .reform-card-body:lang(ar-ae) { letter-spacing: 0; } .code-of-conduct .code-of-conduct-content-container .more-info-link a:link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited, .leaver-buster-dialog a:link, .leaver-buster-dialog a:visited, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited, .reform-card-v2-chat-log .reform-card-chat-log-header a:link, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited, .player-behavior-reform-card a:link, .player-behavior-reform-card a:visited, .reform-card-chat-log .chat-log-header-copy-log-link, .player-behavior-ban-notification a:link, .player-behavior-ban-notification a:visited { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .code-of-conduct .code-of-conduct-content-container .more-info-link a:link:lang(ja-jp), .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited:lang(ja-jp), .leaver-buster-dialog a:link:lang(ja-jp), .leaver-buster-dialog a:visited:lang(ja-jp), .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link:lang(ja-jp), .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited:lang(ja-jp), .reform-card-v2-chat-log .reform-card-chat-log-header a:link:lang(ja-jp), .reform-card-v2-chat-log .reform-card-chat-log-header a:visited:lang(ja-jp), .player-behavior-reform-card a:link:lang(ja-jp), .player-behavior-reform-card a:visited:lang(ja-jp), .reform-card-chat-log .chat-log-header-copy-log-link:lang(ja-jp), .player-behavior-ban-notification a:link:lang(ja-jp), .player-behavior-ban-notification a:visited:lang(ja-jp) { font-size: 13px; } .code-of-conduct .code-of-conduct-content-container .more-info-link a:link:lang(ar-ae), .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited:lang(ar-ae), .leaver-buster-dialog a:link:lang(ar-ae), .leaver-buster-dialog a:visited:lang(ar-ae), .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link:lang(ar-ae), .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited:lang(ar-ae), .reform-card-v2-chat-log .reform-card-chat-log-header a:link:lang(ar-ae), .reform-card-v2-chat-log .reform-card-chat-log-header a:visited:lang(ar-ae), .player-behavior-reform-card a:link:lang(ar-ae), .player-behavior-reform-card a:visited:lang(ar-ae), .reform-card-chat-log .chat-log-header-copy-log-link:lang(ar-ae), .player-behavior-ban-notification a:link:lang(ar-ae), .player-behavior-ban-notification a:visited:lang(ar-ae) { letter-spacing: 0; } .reform-card-v2-chat-log .reform-card-chat-log-header a:link, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited, .reform-card-chat-log .chat-log-header-copy-log-link { color: #cdbe91; } .reform-card-v2-chat-log .reform-card-chat-log-header a:link:hover, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited:hover, .reform-card-chat-log .chat-log-header-copy-log-link:hover, .reform-card-v2-chat-log .reform-card-chat-log-header a:link.hover, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited.hover, .reform-card-chat-log .chat-log-header-copy-log-link.hover { color: #f0e6d2; } .code-of-conduct .code-of-conduct-content-container .more-info-link a:link, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited, .leaver-buster-dialog a:link, .leaver-buster-dialog a:visited, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited, .player-behavior-reform-card a:link, .player-behavior-reform-card a:visited, .player-behavior-ban-notification a:link, .player-behavior-ban-notification a:visited { color: #0596aa; text-decoration: none; } .code-of-conduct .code-of-conduct-content-container .more-info-link a:link:hover, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited:hover, .leaver-buster-dialog a:link:hover, .leaver-buster-dialog a:visited:hover, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link:hover, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited:hover, .player-behavior-reform-card a:link:hover, .player-behavior-reform-card a:visited:hover, .player-behavior-ban-notification a:link:hover, .player-behavior-ban-notification a:visited:hover, .code-of-conduct .code-of-conduct-content-container .more-info-link a:link.hover, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited.hover, .leaver-buster-dialog a:link.hover, .leaver-buster-dialog a:visited.hover, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link.hover, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited.hover, .player-behavior-reform-card a:link.hover, .player-behavior-reform-card a:visited.hover, .player-behavior-ban-notification a:link.hover, .player-behavior-ban-notification a:visited.hover { color: #cdfafa; } .code-of-conduct .code-of-conduct-content-container .more-info-link a:link:after, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited:after, .leaver-buster-dialog a:link:after, .leaver-buster-dialog a:visited:after, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link:after, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited:after, .player-behavior-reform-card a:link:after, .player-behavior-reform-card a:visited:after, .player-behavior-ban-notification a:link:after, .player-behavior-ban-notification a:visited:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-social/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .code-of-conduct .code-of-conduct-content-container .more-info-link a:link:lang(ar-ae):after, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited:lang(ar-ae):after, .leaver-buster-dialog a:link:lang(ar-ae):after, .leaver-buster-dialog a:visited:lang(ar-ae):after, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link:lang(ar-ae):after, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited:lang(ar-ae):after, .player-behavior-reform-card a:link:lang(ar-ae):after, .player-behavior-reform-card a:visited:lang(ar-ae):after, .player-behavior-ban-notification a:link:lang(ar-ae):after, .player-behavior-ban-notification a:visited:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .code-of-conduct .code-of-conduct-content-container .more-info-link a:link:hover:after, .code-of-conduct .code-of-conduct-content-container .more-info-link a:visited:hover:after, .leaver-buster-dialog a:link:hover:after, .leaver-buster-dialog a:visited:hover:after, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:link:hover:after, .player-behavior-reform-card-v2 .reform-card-body .reform-card-text a:visited:hover:after, .player-behavior-reform-card a:link:hover:after, .player-behavior-reform-card a:visited:hover:after, .player-behavior-ban-notification a:link:hover:after, .player-behavior-ban-notification a:visited:hover:after { background-color: #cdfafa; } .code-of-conduct { width: 877px; height: 639px; } .code-of-conduct .code-of-conduct-content-container { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; background-image: url("/fe/lol-social/coc-modal-background.png"); background-size: cover; background-repeat: no-repeat; } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-close-button { position: absolute; width: 20px; height: 20px; top: 16px; right: 16px; background-image: url("/fe/lol-static-assets/images/x.png"); } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-close-button:active { background-image: url("/fe/lol-static-assets/images/x_active.png"); } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-close-button:hover { background-image: url("/fe/lol-static-assets/images/x_hover.png"); } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container { height: 22px; display: flex; justify-content: center; align-items: center; } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-title { margin-left: 16px; margin-right: 16px; color: #c8aa6e; text-shadow: 2px 2px 4px #010a13; } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-emphasis-metal { width: 54px; height: 7px; background-image: url("/fe/lol-social/coc-header-metal.png"); background-repeat: no-repeat; } .code-of-conduct .code-of-conduct-content-container .code-of-conduct-title-container .header-emphasis-metal.right { transform: scaleX(-1); } .code-of-conduct .code-of-conduct-content-container .rules-container { display: flex; flex-direction: column-reverse; align-items: center; } .code-of-conduct .code-of-conduct-content-container .rule-item-container { width: 734px; height: 111px; opacity: 0; pointer-events: none; } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-content { width: 100%; height: 119px; position: relative; display: flex; flex-direction: column; align-items: center; background-image: url("/fe/lol-social/coc-rule-item-background.png"); } .code-of-conduct .code-of-conduct-content-container .rule-item-container.visible { cursor: pointer; pointer-events: all; animation: fadeIn linear 0.5s forwards, translationDown ease-in-out 0.5s forwards; } .code-of-conduct .code-of-conduct-content-container .rule-item-container:hover .rule-item-body-container .rule-item-checkbox-container .rule-item-checkbox { background-image: url("/fe/lol-social/coc-checkbox-frame-hover.png"); } .code-of-conduct .code-of-conduct-content-container .rule-item-container:active .rule-item-body-container .rule-item-checkbox-container .rule-item-checkbox { background-image: url("/fe/lol-social/coc-checkbox-frame-down.png"); } .code-of-conduct .code-of-conduct-content-container .rule-item-container.accepted { cursor: default; pointer-events: none; opacity: 1; } .code-of-conduct .code-of-conduct-content-container .rule-item-container.accepted .rule-item-body-container .rule-item-checkbox-container .rule-item-checkbox { pointer-events: none; background-image: url("/fe/lol-social/coc-checkbox-frame-checked.png"); } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-spacer { height: 20px; } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container { display: flex; align-items: center; width: 702px; } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-icon { width: 20px; height: 20px; } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-subheader-container .rule-item-subheader { font-size: 16px; margin-left: 10px; margin-right: 10px; } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container { display: flex; width: 702px; justify-content: space-between; align-items: center; } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container .rule-item-body { width: 660px; font-size: 13px; } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container .rule-item-checkbox-container { width: 53px; height: 53px; display: flex; justify-content: center; align-items: center; background-image: radial-gradient(#323334 0%, rgba(254,0,0,0) 70%); } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-body-container .rule-item-checkbox-container .rule-item-checkbox { width: 33px; height: 33px; background-size: contain; background-image: url("/fe/lol-social/coc-checkbox-frame-default.png"); background-repeat: no-repeat; } .code-of-conduct .code-of-conduct-content-container .rule-item-container .rule-item-bottom-border { width: 734px; height: 11px; top: 111px; position: absolute; background-image: url("/fe/lol-social/coc-rule-item-divider.png"); } .code-of-conduct .code-of-conduct-content-container .more-info-link { position: relative; top: 26px; } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes translationDown { 0% { transform: translateY(-111px); pointer-events: none; } 100% { transform: translateY(0px); pointer-events: all; } } @-webkit-keyframes translationDown { 0% { transform: translateY(-111px); pointer-events: none; } 100% { transform: translateY(0px); pointer-events: all; } } @-o-keyframes translationDown { 0% { transform: translateY(-111px); pointer-events: none; } 100% { transform: translateY(0px); pointer-events: all; } } @keyframes translationDown { 0% { transform: translateY(-111px); pointer-events: none; } 100% { transform: translateY(0px); pointer-events: all; } } .leaver-buster-dialog .leaver-buster-warning-input { margin-top: 12px; text-align: center; } .leaver-buster-dialog .leaver-buster-agree-text { margin-top: 5px; } .leaver-buster-dialog .leaver-buster-i-agree-highlight { font-weight: bolder; color: #c8aa6e; } .player-behavior-reform-card-v2 { direction: ltr; } .player-behavior-reform-card-v2 .reform-card-content { width: 600px; padding: 0 3px 0 0; } .player-behavior-reform-card-v2 .reform-card-scrollable { padding: 30px 0; max-height: 625px; box-sizing: border-box; } .player-behavior-reform-card-v2 .reform-card-scrollable-content { width: 525px; margin: 0 0 0 37px ; } .player-behavior-reform-card-v2 .reform-card-subhead { color: #a09b8c; font-style: italic; } .player-behavior-reform-card-v2 .reform-card-subhead-punishment { font-style: italic; } .player-behavior-reform-card-v2 .reform-card-subhead-rule { height: 1px; background: #1e2328; margin: 20px 0; border: none; } .player-behavior-reform-card-v2 .reform-card-body { text-align: left ; } .reform-card-v2-chat-log .reform-card-chat-log-header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 5px; } .reform-card-v2-chat-log .reform-card-chat-log-header a:link, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited { text-decoration: none; color: #0596aa; } .reform-card-v2-chat-log .reform-card-chat-log-header a:link:hover, .reform-card-v2-chat-log .reform-card-chat-log-header a:visited:hover { color: #cdfafa; } .reform-card-v2-chat-log .reform-card-chat-tab-container { display: block; } .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab { margin: 0 10px 0 0 ; display: inline; position: relative; cursor: pointer; opacity: 0.75; } .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab:hover, .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab.selected { opacity: 1; } .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab.selected:after { content: ''; position: absolute; display: block; bottom: -5px; left: 0; height: 5px; width: 100%; background-color: #c89b3c; } .reform-card-v2-chat-log .reform-card-chat-tab-container .reform-card-chat-tab-line { margin-top: 2px; background-color: #c89b3c; } .reform-card-v2-chat-log .reform-card-scrollable-game { height: 200px; box-sizing: border-box; display: none; margin: 2.5%; } .reform-card-v2-chat-log .reform-card-scrollable-game.selected { display: block; } .reform-card-v2-chat-log .reform-card-chat-log-game { width: 90%; min-height: 95%; padding: 5px 2.5%; background-color: #10191d; } .reform-card-v2-chat-log .reform-card-chat-log-game .reform-card-chat-log-hidden-header { display: none; } .reform-card-v2-chat-log .reform-card-chat-log-game .reform-card-chat-log-subheader { width: 100%; overflow: hidden; } .reform-card-v2-chat-log .reform-card-chat-log-game .reform-card-chat-log-subheader .reform-card-chat-log-subheader-text { color: #f0e6d2; position: relative; } .reform-card-v2-chat-log .reform-card-chat-log-game .reform-card-chat-log-subheader .reform-card-chat-log-subheader-text:after { content: ""; border-bottom: solid 1px #3c3c41; position: absolute; top: 0; bottom: 0; width: 100%; height: 1px; margin: auto 0 auto 10px ; } .reform-card-v2-chat-log .reform-card-chat-log-game .reform-card-chat-log-example { margin: 0 0 0 10px ; } .reform-card-v2-chat-log .reform-card-chat-log-game .reform-card-chat-log-example .reform-card-chat-log-name { color: #cdbe91; } .reform-card-v2-match-history { padding-top: 14px; } .player-behavior-reform-card .reform-card-content { padding: 0 3px 0 0; } .player-behavior-reform-card .reform-card-scrollable { padding: 30px 36px; margin-bottom: 32px; max-height: 550px; box-sizing: border-box; } .player-behavior-reform-card .reform-card-subhead { color: #a09b8c; font-style: italic; } .player-behavior-reform-card .reform-card-subhead-punishment { font-style: italic; } .player-behavior-reform-card .reform-card-subhead-rule { height: 1px; background: #1e2328; margin: 24px -14px; border: none; } .player-behavior-reform-card .reform-card-body { text-align: left; } .reform-card-chat-log .reform-card-chat-log-header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 10px 0; } .reform-card-chat-log .chat-log-header-copy-log-link { color: #0596aa; text-decoration: none; } .reform-card-chat-log .chat-log-header-copy-log-link:hover { color: #cdfafa; } .reform-card-chat-log .reform-card-chat-log { -webkit-user-select: text; } .reform-card-chat-log .reform-card-chat-log-game { color: #f0e6d2; } .reform-card-match-history { padding-top: 14px; } div[data-screen-name='social'] > .social-plugin-home { height: 100%; } div[data-screen-name='social'] > .social-plugin-home > .ember-view { height: 100%; } .social-ember-fade-in { animation: fadeInAnimation ease-in-out 0.25s; } @-moz-keyframes fadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } }