Skip to content

Microsoft Teams general improvements by vbocek

Write a review Install Get Stylus

Details

Authorvbocek

LicenseNo License

Categoryteams.microsoft.com

Created

Updated

Size98 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

  • Wider layout
  • Unfold long messages

Random changes for my personal usage, take it or leave it.

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         Microsoft Teams general improvements
@version      20240410.10.03
@namespace    https://userstyles.world/user/vbocek
@description  * Wider layout* Unfold long messagesRandom changes for my personal usage, take it or leave it.
@author       vbocek
@license      No License
==/UserStyle== */

/* ==UserStyle==
@name         Microsoft Teams general improvements
@namespace    teams.microsoft.com
@description  Random changes for my personal usage, take it or leave it.
@author       Vojtech Bocek <vbocek@gmail.com>
@preprocessor stylus
@version      2.0.1
@license      MIT*/

@-moz-document domain("teams.microsoft.com") {
/* TEAMS v1 */
/* Auto-expand message content */
thread[see-more-enabled="true"] see-more:not(.expanded) .message-body-container {
    max-height: unset !important;
}

/* Wide message area */
.list-wrap.list-wrap-v3.ts-message-list-container {
    max-width: 3000px !important;
}

.message-list-common:not(.chat-style) .button-row,
.message-list-common:not(.chat-style) .large-max-stage,
.message-list-common:not(.chat-style) .message-list-common .button-row,
.message-list-common:not(.chat-style) .message-pane .new-typing-indicator,
.message-list-common:not(.chat-style) .middle-messages-context-stripe .ts-message-list-container,
.message-list-common:not(.chat-style) .ts-add-message .ts-new-message,
.message-list-common:not(.chat-style) .ts-message-list-container,
.message-list-common:not(.chat-style) .ts-new-meetup-animated,
.message-list-common:not(.chat-style) virtual-repeat > .list-wrap > .item-wrap,
.ts-add-message.is-not-chat .ts-new-message {
    max-width: 3000px !important;
}

/* Compact the pinned channels */
.ts-channel-list .pin-channel-container profile-picture {
    display: none !important;
}

.pin-channel-container div.name-channel-type.pin-channel-info {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.pin-channel-container div.pin-channel-team-display-name {
    font-size: unset !important;
    padding: 0 0 0 24px !important;
    line-height: unset !important;
    color: unset !important;
}

.pin-channel-container .left-rail-selected {
    background: #C5CAE9 !important;
}

.pin-channel-container .left-rail-item-hover:hover {
    background: #E8EAF6 !important;
}

.pin-channel-container div.pin-channel-team-display-name span {
    word-break: normal !important;
    white-space: normal !important;
    padding: 0 5px 0 0 !important;
}

.pin-channel-list-header > a {
    padding: 0 !important;
    height: 30px !important;
}


/*  Attempt at Slackifying the message view */
.message-list-common:not(.chat-style) thread .ts-message {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* TEAMS v2 */
/* Auto-expand message content */
div[id^="see-more-content"],
div[id^="see-more-card-content"] {
    max-height: unset !important;
}

#see-more-container,
#see-more-card-container {
    display: none;
}

/* Wide message area */
#channel-pane-l1 {
    max-width: 3000px !important;
    padding: 0 24px !important;
}

#channel-pane-l1 > li > div {
    max-width: 3000px !important;
}

#channel-pane-l2 {
    max-width: 3000px !important;
    padding: 0 24px !important;
}

#channel-pane-l2 > li > div {
    max-width: 3000px !important;
}

div[id^="message-body"] {
    max-width: 3000px !important;
}

div[id^="message-body"] > div:nth-child(1 of .fui-Flex) {
    height: 5.0rem !important;
}

div[data-tid="channel-pane-message"] {
    max-width: 3000px !important;
}

div[data-tid="channel-pane-message"] > div > div {
    max-width: 3000px !important;
}

div[data-tid="channel-pane-message"] > div > div > div.fui-Primitive {
    max-width: 3000px !important;
}

div[data-tid="message-pane-footer"] {
    max-width: 3000px !important;
}

div[data-tid="message-pane-footer"] > div {
    max-width: 3000px !important;
}

div[data-tid="channel-replies-pane-message"] {
    max-width: 3000px !important;
}

h2[id^="subject-line-"] {
    padding-bottom: 0px !important;
}

/* Hide stupid "discover" button */
div[data-tid="channel-list-container"] > div > div:nth-child(2):has(div > button[data-tid="discover-entry-button"]) {
    display: none;
}


/* Compact the pinned channels */
div[data-tid="channel-list-container"] .ui-avatar {
    display: none;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div[role="none"] > a > div > div > div {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div[role="none"] > a > div {
    height: 2.2rem !important;
}

:root {
    --count-current: 0;
}


div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div {
    height: 25px !important;
    top: calc(25px * (var(--count-current) - 1)) !important;
}


div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(1) {
    --count-current: 1;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(2) {
    --count-current: 2;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(3) {
    --count-current: 3;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(4) {
    --count-current: 4;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(5) {
    --count-current: 5;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(6) {
    --count-current: 6;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(7) {
    --count-current: 7;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(8) {
    --count-current: 8;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(9) {
    --count-current: 9;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(10) {
    --count-current: 10;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(11) {
    --count-current: 11;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(12) {
    --count-current: 12;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(13) {
    --count-current: 13;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(14) {
    --count-current: 14;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(15) {
    --count-current: 15;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(16) {
    --count-current: 16;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(17) {
    --count-current: 17;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(18) {
    --count-current: 18;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(19) {
    --count-current: 19;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(20) {
    --count-current: 20;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(21) {
    --count-current: 21;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(22) {
    --count-current: 22;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(23) {
    --count-current: 23;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(24) {
    --count-current: 24;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(25) {
    --count-current: 25;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(26) {
    --count-current: 26;
}

div[data-tid="channel-list-container"] > div > div[role="tree"] > div > div.virtual-tree-list-scroll-container > div[role="none"] > div:nth-child(27) {
    --count-current: 2...

Reviews

No reviews yet.