.lol-social-sidebar .alpha-version-panel { font-family: var(--font-display); } .lol-social-sidebar, .lol-social-sidebar .disconnected .message, .social-count-badge { font-family: var(--font-body); } .lol-social-sidebar .disconnected .message, .lol-social-sidebar .alpha-version-panel { -webkit-user-select: none; } .lol-social-sidebar .disconnected .message, .lol-social-sidebar .alpha-version-panel { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .lol-social-sidebar .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) { font-size: 13px; } .lol-social-sidebar .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 { font-family: var(--font-display); } .lol-social-sidebar, .lol-social-sidebar .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 { 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; } .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 { 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.use-animation { animation: pulseChatButton 750ms infinite alternate ease-in-out; } .lol-social-chat-toggle-button .chat-button.unread:not(.use-animation) { -webkit-filter: brightness(1.5) saturate(1.5); } .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); } } 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; } }