.lol-social-sidebar .alpha-version-panel { font-family: var(--font-display); } .lol-social-sidebar, .social-count-badge { font-family: var(--font-body); } .lol-social-sidebar .alpha-version-panel { -webkit-user-select: none; } .lol-social-sidebar .alpha-version-panel { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .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, .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 .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%; }