-
-
Save nCastle1/cbebc4ac6a3a8e81b26b377a115f89fd to your computer and use it in GitHub Desktop.
Teams user css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?