Skip to content

Instantly share code, notes, and snippets.

@nCastle1
Last active February 11, 2021 22:36
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nCastle1/cbebc4ac6a3a8e81b26b377a115f89fd to your computer and use it in GitHub Desktop.
Save nCastle1/cbebc4ac6a3a8e81b26b377a115f89fd to your computer and use it in GitHub Desktop.
Teams user css
/* Everything 100% is expanding the width of messages in channels and chat */
.ts-message-list-container {
max-width: 100%;
}
.item-wrap {
max-width: 100%;
}
.ts-message-list-item {
max-width: 100%;
}
#body {
line-height: 1.1;
}
.ts-message {
max-width: 100%;
padding-left: 0rem !important;
padding-right: 0rem !important;
padding-top: 4px !important;
padding-bottom: 2px !important;
}
.acc-message-list-focusable {
max-width: 100%;
}
#virtual-repeat.list-wrap.item-wrap {
max-width: 100%;
}
.item-wrap.ts-message-list-item {
max-width: 100%;
padding-right: 4px !important;
padding-left: 8px !important;
}
.list-wrap.list-wrap-v3.ts-message-list-container {
max-width: 100%;
}
.ts-add-message .ts-new-message {
max-width: 100% !important;
}
.new-message-common {
margin-left: 0px !important;
margin-right: 0px !important;
}
.ts-new-message-footer {
margin-left: 8px !important;
margin-right: 4px !important;
}
.message-list-common:not(.chat-style).ts-message-list-container .ts-message-list-item {
max-width: 100%;
}
.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) prompt-to-talk,
.message-list-common:not(.chat-style) smart-reply .smart-replies-alignment,
.message-list-common:not(.chat-style) virtual-repeat > .list-wrap > .item-wrap,
.ts-add-message.is-not-chat .ts-new-message {
max-width: 100%;
}
.item-wrap {
max-width: 100% !important;
}
#messageBody {
width: 100%;
}
/* Everything 26rem below is adjusting sidebar in various contexts; note sidebar content sizing is independent from sidebar container sizing */
.ts-left-rail-wrapper {
width: 26rem !important;
}
.left-rail-header-v2 {
width: 26rem !important;
}
.app-left-rail-width {
width: 26rem !important;
}
.files-navigation .content .add-provider-element {
width: 26rem!important;
}
/* Moves the ... popup menu for channels to adjust for smaller sidebar */
.popover.leftrail-override-position {
left: 32.6rem !important;
}
/* Dial pad sizing on calls tab */
.dialpad-container.left-rail-box-shadow-overlay {
width: 26rem !important;
}
.dialpad-display-wrapper {
width: 21rem !important;
}
.dialpad {
width: 24rem !important;
}
.open-dialpad-btn-wrapper {
width: 21rem !important;
}
.dialpad-key {
width: 32px !important;
height: 32px !important;
margin-top: 16px !important;
}
.dialpad-key > button {
width: 48px !important;
height: 48px !important;
}
.dialpad-key > sup {
top: 1.2rem !important;
margin-left: 14px !important;
}
/* Show the new message field by default, hide new post button */
new-message.ng-hide {
display: block !important;
}
.chat-style.ng-hide {
display: block !important;
}
new-post-button {
display: none !important;
}
/* Reduce margin around new post box */
#add-new-message {
margin-top: 0px;
margin-bottom: 4px;
}
/* Adjust preview box sizing */
.preview-image .preview-actual-image {
width: 64px !important;
height: 64px !important;
}
.preview-content {
left: 64px !important;
}
.preview-height {
height: auto!important;
}
.preview-content > .preview-detail > .description {
max-height: 1.5rem;
}
/* Adjusts heading bar in apps to be more compact */
.app-messages-header {
padding-left: 4px !important;
padding-right: 4px !important;
height: auto !important;
}
.app-chat-header {
padding-top: 4px !important;
height: auto !important;
}
.ts-tab-bar-wrapper {
height: auto !important;
}
.app-tabs {
height: auto !important;
}
.ts-tabs-chevron {
height: auto !important;
}
.ts-messages-header .ts-tab-bar-wrapper ul > li {
height: auto !important;
}
.app-messages-header {
height: 40px !important;
}
.ts-title-bar-team-header {
height: auto !important;
padding-top: 4px !important;
}
.app-header-bar {
height: 36px !important;
}
app-header-bar {
height: 36px !important;
}
.waffle-header {
height: 36px !important;
}
#wrapper {
height: calc(100vh - 28px) !important;
}
ul.app-tabs > li > div > a.btn.btn-default {
height: auto !important;
}
.app-full-viewport-height {
height: calc(100vh) !important;
}
.teams-title {
display: none !important;
}
/* shrink image previews */
.ts-image-chicklet {
height: auto !important;
max-height: 64px !important;
}
.ts-image-outer-container > .image-container {
max-height: 64px !important;
}
/* Improve media preview canvas */
.ts-media-preview-canvas {
background: rgba(0, 0, 0, 0.9) !important;
}
.ts-media-preview {
top: 36px !important;
}
.od-VideoPlayer-canvas {
background: rgba(0, 0, 0, 0.9) !important;
}
/* Reduce prominence of message boxes */
#messageBody.message-body.message-body-width {
background: rgba(0, 0, 0, 0) ! important;
border: none;
}
.media.message-body.acc-thread-focusable.expand-collapse {
background: rgba(0, 0, 0, 0) !important;
}
.media.thread-body.acc-thread-focusable.has-hover-actions.edited-message.show-top-row.keep-size-after-like {
background: rgba(0, 0, 0, 0) !important;
}
/* Adjusts reply message sizing */
thread .ts-message .conversation-common:not(.conversation-start) .media {
margin-left: 4rem;
}
/* Fixes for chat message boxes */
.self > .ts-message-thread-body > #messageBody.message-body.message-body-width {
background: rgba(100, 100, 100, 0) ! important;
border: none;
margin-left: 8px;
}
:not(.self) > .ts-meeting-message {
border: none;
margin-left: 1.1rem;
}
.chat-style .self .ts-message-thread-body {
padding-left: 0px;
background: rgba(100, 100, 100, 0.3) ! important;
}
/* Slack-style user pictures */
thread-body > div > .media-left {
margin-right: 0px !important;
width: auto !important;
}
thread-body > div > .media-left > .wrapper {
border-radius: 12% !important;
height: 3rem !important;
width: 3rem !important;
}
.message-list-common:not(.chat-style) .ts-message .thread-body-status > .ts-skype-status {
top: 3rem;
}
/* Smaller hero cards */
.inline-compose-card {
max-height: 200px !important;
width: 100% !important;
overflow: scroll;
}
.card-title.card-html {
font-size: 12pt;
}
.ts-hero-card {
width: 100% !important;
}
.image-crop.wide-image {
max-width: 200px ! important;
max-height: 200px !important;
}
.ts-meeting-message {
background-color: rgba(98, 100, 167,0.2) !important;
}
/* Improve reply area experience */
.thread-action-reply-message {
padding-left: 4rem !important;
}
/* Make wiki take up full space */
.base-tab.thread-right-rail{
margin: 0px !important;
}
/* Make files app take up full space, enhance appearance */
.files-with-navigation {
margin: 0rem;
}
/* Fix for channel settings tab */
.td-channel-setting {
margin-top: 10rem;
}
td-ch-analytics-tab {
margin-top: 10rem;
}
/* Left rail enhancements */
.app-left-rail-width.simple-scrollbar.overflow-visible {
height: calc(100vh - 14.4rem) !important;
}
channel-list {
border-right-color: black;
border-right-width: 1px;
border-right-style: solid;
}
.chat-style .thread-body:not(.self) .ts-message-thread-body{
margin-right: 0px;
}
@zhil
Copy link

zhil commented Feb 6, 2021

Hi, Nathan!

I have founded your gist here https://microsoftteams.uservoice.com/forums/555103-public/suggestions/17408641-compact-mode

I am working on Teams plugin, which will solve that issue and add CompactMode view, will you be interested in being beta-tester for it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment