.lol-social-sidebar .alpha-version-panel, .lol-social-identity .name, .lol-social-actions-bar .friend-header { font-family: var(--font-display); } .lol-social-sidebar, .lol-social-sidebar .disconnected .message, .identity-and-parties, .identity-and-parties .disconnected .message, .social-count-badge { font-family: var(--font-body); } .lol-social-sidebar .disconnected .message, .lol-social-sidebar .alpha-version-panel, .identity-and-parties .disconnected .message, .lol-social-identity .name, .lol-social-actions-bar .friend-header { -webkit-user-select: none; } .lol-social-sidebar .disconnected .message, .lol-social-sidebar .alpha-version-panel, .identity-and-parties .disconnected .message, .lol-social-identity .name, .lol-social-actions-bar .friend-header { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .lol-social-identity .name, .lol-social-actions-bar .friend-header { text-transform: uppercase; } .lol-social-identity .name:lang(ko-kr), .lol-social-actions-bar .friend-header:lang(ko-kr), .lol-social-identity .name:lang(ja-jp), .lol-social-actions-bar .friend-header:lang(ja-jp), .lol-social-identity .name:lang(tr-tr), .lol-social-actions-bar .friend-header:lang(tr-tr), .lol-social-identity .name:lang(el-gr), .lol-social-actions-bar .friend-header:lang(el-gr), .lol-social-identity .name:lang(th-th), .lol-social-actions-bar .friend-header:lang(th-th), .lol-social-identity .name:lang(zh-tw), .lol-social-actions-bar .friend-header:lang(zh-tw) { text-transform: none; } .lol-social-identity .name { text-transform: none; } .lol-social-identity .name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .lol-social-identity .name: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-actions-bar .friend-header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .lol-social-actions-bar .friend-header:lang(ja-jp) { font-size: 13px; } .lol-social-actions-bar .friend-header:lang(ar-ae) { letter-spacing: 0; } .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-sidebar .disconnected .message:lang(ja-jp), .identity-and-parties .disconnected .message:lang(ja-jp) { font-size: 13px; } .lol-social-sidebar .disconnected .message:lang(ar-ae), .identity-and-parties .disconnected .message:lang(ar-ae) { letter-spacing: 0; } .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-sidebar .alpha-version-panel, .lol-social-identity .name, .lol-social-actions-bar .friend-header { font-family: var(--font-display); } .lol-social-sidebar, .lol-social-sidebar .disconnected .message, .identity-and-parties, .identity-and-parties .disconnected .message, .social-count-badge { font-family: var(--font-body); } .lol-social-sidebar .bug-report-button, .lol-social-chat-toggle-button .chat-button, .lol-social-chat-toggle-button .chat-button.toggled, .lol-social-actions-bar .filter-button, .lol-social-actions-bar .folder-button, .lol-social-actions-bar .options-button { outline: none; border: none; background: none; cursor: pointer; padding: 0; } .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: 30px; height: 30px; } .lol-social-sidebar .bug-report-button:hover { background-position-y: -30px; } .lol-social-sidebar .bug-report-button:active { background-position-y: -60px; } .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: -90px; } .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; } .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 .chat-button, .lol-social-chat-toggle-button .chat-button.toggled, .lol-social-actions-bar .filter-button, .lol-social-actions-bar .folder-button, .lol-social-actions-bar .options-button { outline: none; border: none; background: none; cursor: pointer; padding: 0; } .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-identity { display: flex; align-items: center; padding: 18px 8px 0px 0; right: 0; width: 213px; min-height: 55px; } .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 .identity-menu { position: absolute; top: 81px; z-index: 10; right: 0; width: 222px; display: flex; flex-direction: column; justify-content: flex-end; height: 0; animation: identity-menu-slide-down 250ms ease forwards; overflow: hidden; } .lol-social-identity .identity-menu input { margin-bottom: 1px; } .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; } @-moz-keyframes identity-menu-slide-down { 0% { height: 0; } 100% { height: 30px; } } @-webkit-keyframes identity-menu-slide-down { 0% { height: 0; } 100% { height: 30px; } } @-o-keyframes identity-menu-slide-down { 0% { height: 0; } 100% { height: 30px; } } @keyframes identity-menu-slide-down { 0% { height: 0; } 100% { height: 30px; } } .lol-social-menu-input { display: block; } .lol-social-menu-input .wrapper { width: 100%; position: relative; overflow: hidden; } .lol-social-menu-input .note, .lol-social-menu-input .note-saving { -webkit-mask: url(/fe/lol-social/note_mask.png) no-repeat center; -webkit-mask-size: contain; background-color: #c8aa6e; } .lol-social-menu-input .note-saving { background-color: #f0e6d2; } .lol-social-menu-input .input-icon { width: 18px; height: 18px; position: absolute; left: 10px; top: 5px; cursor: default; } .lol-social-menu-input .input-icon:lang(ar-ae) { left: auto; right: 10px; } .lol-social-menu-input .input.has-icon { padding: 0 6px 0 34px; } .lol-social-menu-input .input.has-icon:lang(ar-ae) { padding: 0 34px 0 6px; } .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 .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 .animation.active { 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 .animation .input-message.has-icon { 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%; } lol-social-menu-item .lol-social-menu-input { margin: -10px -11px; } lol-social-menu-item:last-child .lol-social-menu-input { margin-bottom: -11px; } .lol-social-actions-bar .filter-button, .lol-social-actions-bar .folder-button, .lol-social-actions-bar .options-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: 100%; 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, .lol-social-actions-bar lol-friend-finder-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-lower-pane-container .options-menu { position: absolute; top: 0; z-index: 10; width: 100%; border-bottom: thin solid #785a28; display: flex; flex-direction: column; justify-content: flex-end; transform: translateY(-100%); transition: transform 250ms ease-in-out; } .lol-social-lower-pane-container .options-menu.active { transform: translateY(0); } .lol-social-lower-pane-container .options-menu lol-uikit-flat-checkbox { padding: 8px 10px; margin: -8px -10px; } .lol-social-lower-pane-container .options-menu lol-uikit-flat-checkbox.gbg-checkbox { margin-top: -24px; } .lol-social-lower-pane-container .options-menu lol-uikit-flat-checkbox label { color: #cdbe91; } .lol-social-lower-pane-container .options-menu lol-uikit-flat-checkbox:hover label { color: #f0e6d2; } .lol-social-lower-pane-container .options-menu lol-uikit-radio-input-option { --radio-input-option-hover-background-color: #1e2328; --radio-input-option-padding: 0px 10px; } .lol-social-lower-pane-container lol-social-menu-item.separator { position: relative; margin-top: 5px; } .lol-social-lower-pane-container lol-social-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); } .lol-social-lower-pane-container .gbg-label { display: flex; flex-direction: column; margin-top: 16px !important; } .lol-social-lower-pane-container .menuitem-sublabel { color: #5b5a56; letter-spacing: 0.05em; } 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; } }