RocketChat Compact

after.png

before.png

rambox-custom-code-rc-59.js

fetch('https://gist.githubusercontent.com/myfonj/3795d9ff5074f643e49ebfaab23f2e4b/raw/RocketChat-0.59-Compact.css').then(r=>r.text()).then(t=>{document.body.appendChild(document.createElement('style')).innerHTML=t});

rambox-custom-code-rc-65.js

fetch('https://gist.githubusercontent.com/myfonj/3795d9ff5074f643e49ebfaab23f2e4b/raw/RocketChat-0.65-Compact.css').then(r=>r.text()).then(t=>{document.body.appendChild(document.createElement('style')).innerHTML=t});

rambox-custom-code.gif

RocketChat Compact.md

RocketChat Compact CSS

Makes Rocket.Chat even more compact / condensed

Prerequisites

• set User (your top left avatar image) > My Account > Messages: View Mode to "Normal" (messages will be affected anyways, but I haven't tested this in other modes).
• set Sidebar View Mode (list icon, third next to your avatar) to "Condensed",

How to try:

'Self XSS' style injection

• open Devtools (F12) Console (Ctrl+Shift+K in Firefox, Ctrl+Shift+J Chrome),
• enter

fetch('https://gist.githubusercontent.com/myfonj/3795d9ff5074f643e49ebfaab23f2e4b/raw/RocketChat-0.65-Compact.css').then(r=>r.text()).then(t=>{document.body.appendChild(document.createElement('style')).innerHTML=t});

Style Editor awesomenes

If your browsers' Devtools happens to have a "Style Editor" (Shift+F7 in Firefox for instance) you can paste the content of aforementioned CSS there and try to toggle features by deleting / commenting out their respective namespaces in the top. You can do that even if you injected the style from console - look for the last style with 77 rules.

Userstyle?

Sure, move namespaces up and wrap the rest in something like

@-moz-document domain("demo.rocket.chat"), regexp("https?://rocketchat\\.[^:/@]+(:\\d+)?/.*") {
 /* Content */
}

RocketChat-0.59-Compact.css

/*
RocketChat 0.59+ Compact+
https://gist.githubusercontent.com/myfonj/3795d9ff5074f643e49ebfaab23f2e4b/
*/
:root {
	--sidebar-default-padding: 0px;
	--sidebar-item-height: 21px; /* font-size is 16px; this is minimal reasonable line-height */
	--sidebar-header-small-padding: 0;
	--sidebar-width: 16rem;
	--avatar-radius: 0;
	--header-min-height: 2.5em;
	--sidebar-item-radius: 0;
	--flex-tab-width: 25vw;

	--sidebar-item-thumb-size: calc( var(--sidebar-item-height) - 1px );
	
	--u-avatar-width: calc( var(--sidebar-item-thumb-size) * 2.5 );
	--u-avatar-height: calc( var(--sidebar-item-thumb-size) * 1 );
	--u-avatar-space: calc( var(--u-avatar-width) + 5px );
	--u-sc: calc( var(--u-avatar-width) * 1.3 ); /* 1 means the same as cover below */
	--u-avatar-scale: var(--u-sc) var(--u-sc); 
	--u-avatar-scale: var(--u-sc);
}
/*
§	"legibler" (X|) font (?)
*/
.global-font-family {
	font-family: "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Verdana",
	/* orig: */
	-apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif,
	"Apple Color Emoji", "Meiryo UI";
}
/*
§	status colour to text
*/
.away ~ .room-title,
.user-card-room.status-away p,
.sidebar-item__user-status--away ~ * .sidebar-item__name {
	color: var(--status-away);
}
.online ~ .room-title,
.user-card-room.status-online p,
.sidebar-item__user-status--online ~ * .sidebar-item__name {
	color: var(--status-online);
}
.busy ~ .room-title,
.user-card-room.status-busy p,
.sidebar-item__user-status--busy ~ * .sidebar-item__name {
	color: var(--status-busy);
}
.offline ~ .room-title,
.user-card-room.status-offline p,
.sidebar-item__user-status--offline ~ * .sidebar-item__name {
	color: var(--sidebar-item-text-color);
}
/*
§	unread emphasis
*/
.sidebar-item--unread .sidebar-item__name {
	font-weight: bold;
}
.sidebar-item--unread .sidebar-item__name::before {
	content: '(•) ';
	font-weight: normal;
}
/*
§	currently active emphasis
*/
.sidebar-item {
	transition: none;
}
.sidebar-item--active .sidebar-item__name {
	text-decoration: underline;
	/*
	font-weight: bold;
	letter-spacing: -0.04em;
	*/
}
/*
§	rooms
*/
/* v 60 introduced "avatars" for rooms */
.rooms-list__list.type-channels .sidebar-item__picture {
	display: none;
}
.rooms-list__list.type-channels .sidebar-item__room-type {
	position: static;
	width: var(--u-avatar-width);
	flex-direction: column;
	align-items: center;
}
.rooms-list__list.type-channels .sidebar-item__icon {
	height: var(--u-avatar-height);
}
.rooms-list__list.type-channels .sidebar-item__name {
	color: var(--status-online);
}


.sidebar-item__user-status {
/* *
	Leaving this invisible because under the avatar image.
	Since status information is expressed by the text colour,
	this "point" is completely pointless (what a pun!).
/
	top: 0; left: 0;
	transform: none;
	z-index: 1;
	opacity: 0.8;
/**/
}
.sidebar-item {
	height: auto;
	min-height: var(--sidebar-item-height);
	line-height: var(--sidebar-item-height);
}
.sidebar-item__name {
	line-height: var(--sidebar-item-height);
}
.sidebar-item__link ,
.sidebar-item__picture {
	margin: 0;
}
.rooms-list__type {
	display: none; 
}
.rooms-list__list:not(:last-child) {
	margin-bottom: 0;
}
/*
§	sidebar "logo" footer: hide
*/
.sidebar__footer {
	display: none
}
.rooms-list__list.rooms-list__toolbar-search {
	bottom: 0;
}
/*
§	avatars: bigger but more compact
*/
.messages-box.compact .message .thumb .avatar ,
.messages-box.compact .message .thumb  ,
.sidebar-item__user-thumb {
	width: var(--u-avatar-width);
	height: var(--u-avatar-height);
}
.messages-box.compact .avatar .avatar-image {
	background-size: var(--u-avatar-scale);
}
.sidebar-item__user-thumb .avatar .avatar-image {
	background-size: var(--u-avatar-scale);
}
.user-view .avatar .avatar-image {
	background-size: contain;
}
.messages-box.compact .message button.user {
	text-indent: var(--u-avatar-space);
}
.messages-box.compact .message .thumb {
	left: 0;
}
.messages-box.compact .message {
	padding-left: 0;
}
.messages-box.compact > .wrapper > ul {
	padding-left: 0.5rem;
}
/*
§	no gaps
*/
.rc-old .compact .message {
	padding-top: 0;
}
.rc-old .compact .message.new-day {
	margin-top: 30px; /* hardcoded */
}
/*
§	"message actions": move to the left
*/
.messages-box.compact .first-unread .message-actions ,
.messages-box.compact .message-actions {
	top: 0;
	right: auto;
	bottom: auto;
	left: var(--u-avatar-space);
	background-color: #F2F2F2;
	z-index: 2;
}
.messages-box.compact .message.sequential .message-actions {
	left: 0;
}
/*
§	sequential redundances: hide
*/
.messages-box.compact .message .message-alias {
	display: none;
}
.messages-box.compact .message.sequential .user-card-message {
	display: none !important;
}
/*
§	emoticons small big emo, no picture (rely on local font), textual represantation
*/
.messages-box.compact .emojione[title],
.messages-box.compact .emojione.big[title] {
	width: auto !important;
	height: auto !important;
	line-height: 1;
}
.messages-box.compact .emojione[title] {
	background-image: none;
	text-indent: 0;
}
.messages-box.compact .emojione[title]::after {
	content: attr(title);
}
/*
§	Current theme contains `.rc-old .message .body > * + * { padding-top: 10px; }`.
	That screws our screwed emojis.
	I wonder what that was good for anyway.
*/
.rc-old .message .body > * + * {
	padding-top: 0;
}
/*
§	visible reactioners
*/
.messages-box.compact .message .reactions .reaction-emoji {
	color: var(--rc-color-primary);
}
.messages-box.compact .message .reactions .people {
	display: inline;
}
.messages-box.compact .message .reactions .people [style="font-weight: bold;"] {
	font-weight: normal !important;
}
.messages-box.compact .message .reactions .reaction-count {
	color: var(--rc-color-primary);
	font-weight: bold;
	font-size: 1em;
}
.messages-box.compact .message .reactions .reaction-count::after {
	content: '×: ';
	font-weight: normal;
}
/* @user, @user →"left raction XYZ"← (=> redundant)
*/
.messages-box.compact .message .reactions .people span span {
	display: none;
}
/*
§	reaction emojis number sort fix (vertical (block) variant)
*/
.reactions {
	display: flex;
	flex-direction: column;
}
/*
(horizontal (float) variant)
*/
/*
.reactions {
	display: flex;
	flex-direction: column;
}
.reactions > * {
	display: block !important;
	height: auto !important;
	float: left;
	overflow: hidden;
}
*/
.reactions > [data-emoji] {
	order: 100;
}
.reactions > [data-emoji=":zero:"] {
	order: 0;
}
.reactions > [data-emoji=":one:"] {
	order: 1;
}
.reactions > [data-emoji=":two:"] {
	order: 2;
}
.reactions > [data-emoji=":three:"] {
	order: 3;
}
.reactions > [data-emoji=":four:"] {
	order: 4;
}
.reactions > [data-emoji=":five:"] {
	order: 5;
}
.reactions > [data-emoji=":six:"] {
	order: 6;
}
.reactions > [data-emoji=":seven:"] {
	order: 7;
}
.reactions > [data-emoji=":eight:"] {
	order: 8;
}
.reactions > [data-emoji=":nine:"] {
	order: 9;
}
.reactions > .add-reaction {
	order: 200;
}
/*
there is originial nonsence:
.messages-box ul {
	padding: 21px 0 10px;
}
*/
.reactions ul {
	padding: 0;
}
/*
§	"textarea": compact
*/
.messages-box.compact + * .rc-message-box ,
.messages-box.compact + * .rc-message-box__container {
	padding: 0;
}
/*
§	typing notification fix
*/
.messages-box.compact + * .rc-message-box__typing {
	top: auto;
	bottom: 100%;
	margin-left: 0;
	background-color: var(--rc-color-primary-lightest);
}
/*
§ message formatting buttons/mnemonics visibility fix
*/
.messages-box.compact + * .rc-message-box__toolbar-markdown {
	bottom: 2px;
	width: auto;
	right: 60px;
	left: auto;
}
/*
§ fix for potential obscuring of textarea content by mnemonics
*/
.messages-box.compact + * .rc-message-box__textarea {
	padding-right: 180px
}
/*
§ tooltip bubble ~> status bar
*/
.tooltip {
	position: fixed !important;
	top: auto !important;
	right: auto !important;
	bottom: 0 !important;
	left: 0 !important;
	border-radius: 0 1em 0 0 !important;
	max-width: none;
	opacity: 1 !important;
}
.tooltip .content {
	padding: 0.1em 0.8em 0.1em 0.5em;
	opacity: 1;
}
.tooltip-arrow {
	display: none;
}
/*
§ hide scrollbar when not needed
*/
.rooms-list {
	overflow-y: auto;
}

/*
§ "three dots" appearance faster and less demanding
(swapping `display` on hover? SRSLY?)
*/
.sidebar-item__menu {
	display: block;
	opacity: 0;
}
.sidebar-item:hover .sidebar-item__menu {
	opacity: 1;
}

/*
§ edited avatars: hide (pen icon is sufficient)
  todo: hide only self-edits
*/
.user-card-message + .info .edited .icon-edit + .user-card-message {
	display: none;
}

RocketChat-0.65-Compact.css

/*
RocketChat 0.65+ Compact+
https://gist.githubusercontent.com/myfonj/3795d9ff5074f643e49ebfaab23f2e4b/
*/
@namespace "http://www.w3.org/1999/xhtml";
/**/@namespace compact_sidebar "http://www.w3.org/1999/xhtml";
/**/@namespace compact_messages "http://www.w3.org/1999/xhtml";
/**/@namespace compact_textarea "http://www.w3.org/1999/xhtml";
/**/@namespace better_reactions "http://www.w3.org/1999/xhtml";
/**/@namespace font_emoji "http://www.w3.org/1999/xhtml";
/**/@namespace text_emoji "http://www.w3.org/1999/xhtml";
/**/@namespace tooltip_to_status "http://www.w3.org/1999/xhtml";
/**/@namespace font_stack "http://www.w3.org/1999/xhtml";
/**/
/*
§§	Condensed sidebar for reals
*/
compact_sidebar|*.sidebar--condensed {
	/*
	redefinig original properties, how nice and convenient!
	*/
	--sidebar-default-padding: 0px;
	--sidebar-item-height: 21px; /* font-size is 16px; this is minimal reasonable line-height */
	--sidebar-header-small-padding: 0;
	--sidebar-width: 16rem;
	--avatar-radius: 0;
	--header-min-height: 2.5em;
	--sidebar-item-radius: 0;
	--flex-tab-width: 25vw;
	--sidebar-item-thumb-size: calc( var(--sidebar-item-height) - 1px );
	/*
	properties related to this userstyle
	*/
	--u-avatar-width: calc( var(--sidebar-item-thumb-size) * 2.5 );
	--u-avatar-height: calc( var(--sidebar-item-thumb-size) * 1 );
	--u-avatar-space: calc( var(--u-avatar-width) + 5px );
	--u-sc: calc( var(--u-avatar-width) * 1.3 ); /* 1 means the same as cover below */
	--u-avatar-scale: var(--u-sc) var(--u-sc); 
	--u-avatar-scale: var(--u-sc);
	--u-status-width: calc( var(--sidebar-item-height) * 0.8 );
}
/*
§	status badge:  more apparent
*/
compact_sidebar|*.sidebar--condensed .sidebar-item__message ,
compact_sidebar|*.sidebar--condensed .sidebar-item__body {
	margin: 0;
}
compact_sidebar|*.sidebar--condensed .sidebar-item__user-status {
	border-radius: 0;
	height: calc( var(--sidebar-item-height) - 1px );
	width: var(--u-status-width);
	margin: 0 4px 0 0;
	opacity: 0.6;
	transform-origin: calc(var(--sidebar-item-height) / 2) calc(var(--u-status-width) / 2);
	animation-duration: 2s;
	animation-play-state: running;
	animation-iteration-count: 2;
	animation-direction: alternate;
	animation-timing-function: linear;
}
/*
§	status badge: animated transition
it is necessary to have distinct animations for each transition to re-trigger the loop
quite possible it will be "throttled" in inactive tab; seems lots of changes are raking place in newly fucused RC after longer period of inactivity
*/
compact_sidebar|*.sidebar--condensed .sidebar-item__user-status--online { animation-name: online; }
compact_sidebar|*.sidebar--condensed .sidebar-item__user-status--away { animation-name: away; }
compact_sidebar|*.sidebar--condensed .sidebar-item__user-status--offline { animation-name: offline; }
compact_sidebar|*.sidebar--condensed .sidebar-item__user-status--busy { animation-name: busy; }
@keyframes online { to { transform: scale(0.5); border-radius: 50%; opacity: 1; } }
@keyframes away { to { transform: scale(0.5); border-radius: 50%; opacity: 1; } }
@keyframes offline { to { transform: scale(0.5); border-radius: 50%; opacity: 1; } }
@keyframes busy { to { transform: scale(0.5); border-radius: 50%; opacity: 1; } }
/*
fix for ctrl+k search results
NOT in .sidebar--condensed 
*/
compact_sidebar|*.rooms-list__toolbar-search .sidebar-item__user-status {
	animation-name: none;
}
/*
§	status colour to name text
works again in 65, yay
*/
compact_sidebar|*.sidebar--condensed .sidebar-item__user-status--away ~ .sidebar-item__ellipsis { color: var(--status-away); }
compact_sidebar|*.sidebar--condensed .sidebar-item__user-status--online ~ .sidebar-item__ellipsis { color: var(--status-online); }
compact_sidebar|*.sidebar--condensed .sidebar-item__user-status--busy ~ .sidebar-item__ellipsis { color: var(--status-busy); }
compact_sidebar|*.sidebar--condensed .sidebar-item__user-status--offline ~ .sidebar-item__ellipsis { color: var(--sidebar-item-text-color);}
/*
§	unread room: emphasis like (•) title
*/
compact_sidebar|*.sidebar--condensed .sidebar-item--unread .sidebar-item__name {
	font-weight: bold;
}
compact_sidebar|*.sidebar--condensed .sidebar-item--unread .sidebar-item__name::before {
	content: ' (•)';
	font-weight: normal;
}
/*
§	current room: emphasis
*/
compact_sidebar|*.sidebar--condensed .sidebar-item--active .sidebar-item__name {
	text-decoration: underline;
}
/*
§	rooms: compact
*/
compact_sidebar|*.sidebar--condensed .sidebar-item__link ,
compact_sidebar|*.sidebar--condensed .sidebar-item__picture {
	margin: 0;
}
/*
§	rooms: hide types headers (redundant)
*/
compact_sidebar|*.sidebar--condensed .rooms-list__type {
	display: none; 
}
compact_sidebar|*.sidebar--condensed .rooms-list__list {
	margin-bottom: 0 !important;
}
/*
§	sidebar "logo" footer: hide
*/
compact_sidebar|*.sidebar--condensed .sidebar__footer {
	display: none
}
compact_sidebar|*.sidebar--condensed .rooms-list__list.rooms-list__toolbar-search {
	bottom: 0;
}
/*
§	sidebar avatars: bigger but more compact
*/
compact_sidebar|*.sidebar--condensed .sidebar-item__user-thumb .avatar .avatar-image {
	height: auto;
	position: absolute;
	bottom: -75%;
}
compact_sidebar|*.sidebar--condensed .sidebar-item__user-thumb {
	width: var(--u-avatar-width);
	height: var(--u-avatar-height);
}
/*
§	sidebar scrollbar: hide when not needed
*/
compact_sidebar|*.sidebar--condensed .rooms-list {
	overflow-y: auto;
}
/*
§	"three dots" sidebar item menu: faster and more performant
(swapping `display` on hover? SRSLY?)
*/
compact_sidebar|*.sidebar--condensed .sidebar-item {
	transition: none;
}
compact_sidebar|*.sidebar--condensed .sidebar-item__menu {
	display: block;
	opacity: 0.2;
}
compact_sidebar|*.sidebar--condensed .sidebar-item:hover .sidebar-item__menu {
	opacity: 1;
}
/*
§§	Compact messages
*/
compact_messages|*.rc-old .message {
	padding-top: 5px;
	padding-right: 0px;
	padding-left: 50px;
	padding-bottom: 0px;
}
compact_messages|*.rc-old .message .thumb {
	left: 10px;
}
/*
§	@username: hide
*/
compact_messages|*.message .message-alias {
	display: none;
}
/*
§	edited info: hide avatars
	(pen icon is sufficient)
	TODO: hide only self-edits?
*/
compact_messages|*.user-card-message + .info .edited .icon-edit + .user-card-message {
	display: none;
}
/*
§	"message actions": move to the left bottom
again, unnecessary swapping of display from none to block/flex on hover :(
poor, poor  browser.
*/
compact_messages|*.message .message-actions {
	display: flex;
	top: auto;
	right: auto;
	bottom: 0;
	left: 0;
	background-color: #e2e2e2;
	transition-property: opacity;
	transition-delay: 200ms;
	transition-duration: 300ms;
	opacity: 0;
}
compact_messages|*.message:hover .message-actions {
	opacity: 0.3;
	transition-delay: 0ms;
}
compact_messages|*.message:hover .message-actions:hover {
	opacity: 1.0;
	transition-delay: 0ms;
}
compact_messages|*.message-actions__menu {
	order: -1;
}
/*
§§	better reactions
*/
/*
§	reactions: always visible authors
*/
better_reactions|*.message .reactions .reaction-emoji {
	color: var(--rc-color-primary);
}
better_reactions|*.message .reactions .people {
	display: inline !important;
	color: var(--rc-color-primary);
	padding: 0;
}
/* hide redundant "left raction XYZ"
*/
better_reactions|*.message .reactions .people [style="color: #aaa;"] {
	display: none
}
better_reactions|*.message .reactions .people [style="font-weight: bold;"] {
	font-weight: normal !important;
}
better_reactions|*.message .reactions .reaction-count {
	color: var(--rc-color-primary);
	font-weight: bold;
	font-size: 1em !important;
}
better_reactions|*.message .reactions .reaction-count::after {
	content: '×: ';
	font-weight: normal;
}
/*
§	polls: reaction emoji numbers numerical sort
*/
better_reactions|*.reactions {
	display: flex;
	flex-direction: column;
}
better_reactions|*.reactions > [data-emoji] {	order: 100; }
better_reactions|*.reactions > [data-emoji=":zero:"] { order: 0; }
better_reactions|*.reactions > [data-emoji=":one:"] { order: 1; }
better_reactions|*.reactions > [data-emoji=":two:"] { order: 2; }
better_reactions|*.reactions > [data-emoji=":three:"] { order: 3; }
better_reactions|*.reactions > [data-emoji=":four:"] { order: 4; }
better_reactions|*.reactions > [data-emoji=":five:"] { order: 5; }
better_reactions|*.reactions > [data-emoji=":six:"] { order: 6; }
better_reactions|*.reactions > [data-emoji=":seven:"] { order: 7; }
better_reactions|*.reactions > [data-emoji=":eight:"] { order: 8; }
better_reactions|*.reactions > [data-emoji=":nine:"] { order: 9; }
better_reactions|*.reactions > .add-reaction { order: 200; }


/*
§§	"textarea": compact
*/

compact_textarea|*.rc-message-box ,
compact_textarea|*.rc-message-box__container {
	padding: 0;
}
/* typing notification fix
*/
compact_textarea|*.rc-message-box__typing {
	top: auto;
	bottom: 100%;
	margin-left: 0;
	background-color: var(--rc-color-primary-lightest);
}
/* message formatting buttons/mnemonics visibility fix
*/
compact_textarea|*.rc-message-box__toolbar-markdown {
	bottom: 2px;
	width: auto;
	right: 100px;
	left: auto;
}
/* fix for potential obscuring of textarea content by mnemonics
yup, ugly
*/
compact_textarea|*.rc-message-box__textarea {
	padding-right: 180px
}

/*
§§	tooltip bubbles: like floating status bar
*/

tooltip_to_status|*.tooltip {
	position: fixed !important;
	top: auto !important;
	right: auto !important;
	bottom: 0 !important;
	left: 0 !important;
	border-radius: 0 1em 0 0 !important;
	max-width: none;
	opacity: 1 !important;
}
tooltip_to_status|*.tooltip .content {
	padding: 0.1em 0.8em 0.1em 0.5em;
	opacity: 1;
}
tooltip_to_status|*.tooltip-arrow {
	display: none;
}


/*
§	emoticons: always small and textual
*/
font_emoji|*.emojione[title],
font_emoji|*.emojione.big[title] {
	width: auto !important;
	height: auto !important;
	line-height: 1;
	background-image: none;
	text-indent: 0;
}
text_emoji|*.emojione[title]::after {
	content: attr(title);
}
/*
§	fix for strange Windows Segoe UI Emoji behavior regarding combined characters
https://codepen.io/myf/pen/WyGqbq
- Digit + Unicode Character 'COMBINING ENCLOSING KEYCAP' (U+20E3)
-- Digit is rendered in fallback (Arial)
-- square is in Segoe UI Emoji and pushed but not match the digit boundaries
-- works well with Segoe UI Symbol
- BOth Segoe UI Symbol and Emoji capture even "ascii" characters => broken diacritic (eěsšrřcč)
- some combining sequences are captured by almost anything, but works well only in one certain font-face:
data:text/html;charset=utf-8,<p style="font-family: segoe ui symbol">2%E2%83%A3
2 + combining enclosing keycap (U+20E3)
2⃣
- what works in ..Emoji is Digit + variation selector-16 (U+FE0F)
data:text/html;charset=utf-8,<p style="font-family: segoe ui emoji">2%EF%B8%8F
2 + variation selector-16 (U+FE0F)
2️
*/
font_emoji|*.emojione[title=":zero:"] ,
font_emoji|*.emojione[title=":one:"] ,
font_emoji|*.emojione[title=":two:"] ,
font_emoji|*.emojione[title=":three:"] ,
font_emoji|*.emojione[title=":four:"] ,
font_emoji|*.emojione[title=":five:"] ,
font_emoji|*.emojione[title=":six:"] ,
font_emoji|*.emojione[title=":seven:"] ,
font_emoji|*.emojione[title=":eight:"] ,
font_emoji|*.emojione[title=":nine:"] {
	font-family: Segoe UI;
}

/*
§§	font stack: "legibler" (X|) font (?)
@see §	fix for strange Windows Segoe UI Emoji behavior regarding certain characters
@see discussion https://github.com/RocketChat/Rocket.Chat/issues/11037
proposed as of 2018-06-20
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Helvetica Neue, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Meiryo UI, Arial, sans-serif;
usable windows stack
	font-family: Arial,Verdana,Segoe UI Emoji,Segoe UI Symbol,Segoe UI,sans-serif;
*/
font_stack|*.global-font-family {
	font-family: -apple-system, BlinkMacSystemFont, Arial, Segoe UI Emoji, Segoe UI Symbol, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Helvetica Neue, Apple Color Emoji, Meiryo UI, sans-serif;
}