teams-customization.user.css

/* ==UserStyle==
@name           MS Teams - Customization
@description    Provides some extra customization options for MS Teams.
@version        2026.03.27.12.03
@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="list-item-THREADS"],
    [data-testid="list-item-activities-mentions"],
    [data-testid="list-item-activities-replies"] {
      &,
      & + 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;
      }
    }
  }
}