/* ==UserStyle== @name MS Teams - Customization @description Provides some extra customization options for MS Teams. @version 2026.06.11.11.46 @author MetalTxus @namespace https://github.com/jesuscc1993/ @license CC BY-SA 4.0 @preprocessor stylus @var text font-scale "Font scale" 1 @var text line-height "Line height" 1.4286 @var text sidebar-font-scale "Sidebar font scale" 1 @var text sidebar-item-height "Sidebar item height" 32px @var checkbox hide-alerts "Hide alerts" 0 @var checkbox hide-sidebar-filters "Hide sidebar filters" 0 @var checkbox hide-sidebar-links "Hide sidebar links (mentions, etc)" 0 @var checkbox hide-external-label "Hide (External) label" 0 @var checkbox hide-edited-label "Hide edited label" 0 @var checkbox hide-translate "Hide translate button" 0 @var checkbox full-width-messages "Full width messages" 0 @var checkbox align-own-messages-text-to-end "Align own messages text to end" 0 @var checkbox align-own-messages-to-start "Align own messages to start" 0 @var checkbox reduced-code-padding "Reduced code padding" 0 @var checkbox reduced-message-padding "Reduced message padding" 0 ==/UserStyle== */ @-moz-document domain("teams.microsoft.com"), domain("teams.cloud.microsoft") { applyFontScale(scale) { --fontSizeBase100: 10px * scale; --fontSizeBase200: 12px * scale; --fontSizeBase300: 14px * scale; --fontSizeBase400: 16px * scale; --fontSizeBase500: 20px * scale; --fontSizeBase600: 24px * scale; --lineHeightBase100: 14px * scale; --lineHeightBase200: 16px * scale; --lineHeightBase300: 20px * scale; --lineHeightBase400: 22px * scale; --lineHeightBase500: 28px * scale; --lineHeightBase600: 32px * scale; } .fui-FluentProviderr0 { applyFontScale(font-scale); line-height: line-height; .ck.ck-editor__editable { font-size: var(--fontSizeBase300); } } [data-tid="app-layout-area--mid-nav"] { applyFontScale(sidebar-font-scale); [data-testid="list-item"], [data-inp="simple-collab-unified-chat-switch"] { min-height: 0; height: sidebar-item-height * sidebar-font-scale; } .f1nxs5xn { min-height: sidebar-item-height; } .fw5db7e { padding-right: var(--spacingHorizontalS); } } .fui-Chat { --chat-avatar-spacing-size: 40px; } /* more obvious selection */ .fpzvzei { background-color: #fff2; } /* hide alerts */ if (hide-alerts) { [data-tid="app-layout-area--main"] { .ui-alert { display: none; } } } /* hide sidebar top */ if (hide-sidebar-filters) { [data-testid="simple-collab-left-rail-sticky-filter-v2"] { display: none; } } /* hide sidebar links */ if (hide-sidebar-links) { [data-testid="simple-collab-dnd-rail"] > :first-child { &, & + hr { display: none; } } } /* hide external label */ if (hide-external-label) { .f16lhge, [data-tid="chat-list-federation-tag"] { display: none; } } /* hide edited label */ if (hide-edited-label) { .fui-Chat { [id^="edited"] { display: none; } .f14rdt9 { margin-bottom: 0; } } } /* hide translate */ if (hide-translate) { .fui-ChatMessage__details { display: none; } } /* full width messages */ if (full-width-messages) { [data-tid="message-pane-list-runway"], [data-tid="message-pane-footer"] { max-width: 100%; } [data-tid="chat-pane-message"] { blockquote { width: 100%; } } } /* align own messages text to end */ if (align-own-messages-text-to-end) { .fui-Chat { .fypbzun { text-align: end; } } } /* align own messages to start */ if (align-own-messages-to-start) { .fui-Chat { .f9c4gz4 { justify-content: flex-start; } .fe9ho8d { left: -8px; } .fui-ChatMyMessage__body { margin-inline-start: var(--chat-avatar-spacing-size); border-radius: var(--borderRadiusLarge); } } } /* reduced code padding */ if (reduced-code-padding) { .r1wszx8g code { padding: 0 4px; } } /* reduced message padding */ if (reduced-message-padding) { [data-tid="chat-pane-message"]:has(p) { padding: 0.3rem .8rem 0.5rem; &:has([id^="content-"] > blockquote:only-child) { padding: 0; blockquote { margin: 0; } } } .fb2oc5p { margin-bottom: 2.5rem; } .fui-ChatMessage__avatar { margin-top: 0; text-align: end; } .f1kcqot9 { padding-top: 0.75rem; } /* meeting chat */ /* .fjw5fx7 { width: 24px; } .fb5scp { margin-left: 24px; } */ /* */ } [data-tid="app-layout-area--nav"] { --slot-width: 5.8rem; } /* dark theme fixes */ html.theme-darkV2 { [data-tid="message-body"] { span[style*="background"] { &, * { color: #111; } } strong { color: #fff; } } } }