snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/app/theme/client/imports/components/emoji.css

@@ -0,0 +1,81 @@
+/* Wrapper for Segoe UI Emoji correcting its metrics: it paints its ink low
+relative to its metric midpoint (so vertical-align: middle sits glyphs ~2px
+below the text center) and ~15% larger than the other platform emoji fonts.
+Only exists on Windows, so other platforms skip it in the fallback list. */
+@font-face {
+	font-family: rc-emoji-segoe;
+	src: local('Segoe UI Emoji');
+	ascent-override: 90%;
+	descent-override: 25%;
+	size-adjust: 85%;
+}
+
+/* Global emoji styles */
+.emoji {
+	font-family: 'Apple Color Emoji', rc-emoji-segoe, 'Noto Color Emoji', 'Twemoji Mozilla', 'Android Emoji', sans-serif;
+	font-size: 1.375rem;
+
+	/* Must exceed the emoji fonts' ink height — ~1.13em on Noto Color Emoji and on
+	size-adjusted Segoe UI Emoji (rc-emoji-segoe) — otherwise the glyph paints outside
+	the line box and gets cut by overflow: hidden ancestors (message body, announcement
+	banner). */
+	line-height: 1.2;
+	vertical-align: middle;
+
+	/* custom emojis */
+	&--custom {
+		height: 1.375rem;
+		width: 1.375rem;
+		overflow: hidden;
+		position: relative;
+		white-space: nowrap;
+		text-indent: 100%;
+		vertical-align: bottom;
+		display: inline-block;
+		margin: 0 .15em;
+		background-position: 50%;
+		background-repeat: no-repeat;
+		background-size: contain;
+	}
+}
+
+/* emoji picker */
+.rcx-button .emoji {
+	font-size: 1.375rem;
+	line-height: 1.5rem;
+}
+
+.rcx-message {
+	/* emojis on messages */
+	&__emoji {
+		font-family: 'Apple Color Emoji', rc-emoji-segoe, 'Noto Color Emoji', 'Twemoji Mozilla', 'Android Emoji', sans-serif;
+
+		/* Fuselage fixes this box at 1.5rem inline-block, sized for image emojis. Native
+		glyphs on Segoe UI Emoji/Noto Color Emoji paint taller and wider than that box, and
+		the overhang gets clipped by the message body's overflow: hidden — so let the box
+		grow to the glyph. inline-block also aligns by geometric box while the announcement
+		banner's .emoji span (plain inline) aligns by font metrics; Segoe UI Emoji's
+		asymmetric metrics make those disagree by ~2px, leaving message glyphs off-center.
+		Use the same inline model everywhere. */
+		&:not(&--custom) {
+			display: inline;
+			width: auto;
+			height: auto;
+			line-height: 1.2;
+		}
+	}
+}
+
+.rcx-message-reactions {
+	&__emoji {
+		/* Can't be written as `&--custom` like the .rcx-message rule above: custom emojis here
+		carry the renderer's global `.emoji--custom` class, not a block modifier. */
+		/* stylelint-disable-next-line selector-class-pattern */
+		&:not(.emoji--custom) {
+			width: auto;
+			height: auto;
+			font-size: 1rem;
+			line-height: 1.2;
+		}
+	}
+}

apps/meteor/app/theme/client/imports/components/flex-nav.css

@@ -0,0 +1,19 @@
+.flex-nav {
+	position: absolute;
+	z-index: 3;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	transition: transform 0.15s cubic-bezier(0.5, 0, 0.1, 1);
+	background-color: var(--flex-nav-background);
+	will-change: transform;
+
+	&.animated-hidden {
+		transform: translate3d(-100%, 0, 0);
+	}
+}
+
+.rtl .flex-nav.animated-hidden {
+	transform: translate3d(200%, 0, 0);
+}

apps/meteor/app/theme/client/imports/components/loading.css

@@ -0,0 +1,54 @@
+.loading {
+	&__animation {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__animation__bounce {
+		display: inline-block;
+		width: 1rem;
+		height: 1rem;
+		margin: 2px;
+		animation: loading-bouncedelay 1.4s infinite ease-in-out both;
+		animation-delay: -0.32s;
+		border-radius: 100%;
+		background-color: var(--loading-bounce-color-light);
+
+		@media (prefers-color-scheme: dark) {
+			background: var(--loading-bounce-color-dark);
+		}
+	}
+
+	&__animation__bounce--medium {
+		display: inline-block;
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+
+	&__animation__bounce--large {
+		display: inline-block;
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+
+	&__animation__bounce + &__animation__bounce {
+		animation-delay: -0.16s;
+	}
+
+	&__animation__bounce + &__animation__bounce + &__animation__bounce {
+		animation-delay: 0s;
+	}
+}
+
+@keyframes loading-bouncedelay {
+	0%,
+	80%,
+	100% {
+		transform: scale(0);
+	}
+
+	40% {
+		transform: scale(1);
+	}
+}

apps/meteor/app/theme/client/imports/general/base.css

@@ -0,0 +1,133 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+html {
+	overflow-y: auto;
+	height: 100%;
+
+	&.noscroll {
+		overflow: hidden;
+	}
+}
+
+body {
+	position: relative;
+	display: flex;
+	overflow: visible;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	font-family: var(--body-font-family);
+	font-size: var(--text-small-size);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+:focus {
+	outline: 0;
+	outline-style: none;
+	outline-color: transparent;
+}
+
+.clearfix {
+	clear: both;
+
+	&::after {
+		display: table;
+		clear: both;
+		content: '';
+	}
+}
+
+button {
+	padding: 0;
+	cursor: pointer;
+	text-align: left;
+	text-transform: inherit;
+	color: inherit;
+	border-width: 0;
+	background: none;
+	font-style: inherit;
+}
+
+#rocket-chat {
+	position: relative;
+	display: flex;
+	overflow: hidden;
+	flex: 1 1 auto;
+	height: 100%;
+	max-height: 100%;
+	align-items: stretch;
+
+	&.animated-hidden {
+		visibility: hidden;
+		opacity: 0;
+	}
+}
+
+.ps-scrollbar-y-rail {
+	background: transparent !important;
+}
+
+.ps-scrollbar-y {
+	width: 4px !important;
+}
+
+@media print {
+	#rocket-chat.menu-nav,
+	.messages-container .wrapper {
+		position: relative !important; /* 1 */
+	}
+
+	body {
+		height: auto !important; /* 1 */
+	}
+
+	.messages-container-main,
+	.messages-container-wrapper,
+	.main-content-flex {
+		flex: 1 0 auto !important; /* 1 */
+		height: auto !important; /* 1 */
+	}
+
+	.rc-alerts {
+		display: none !important; /* 1 */
+	}
+
+	.rcx-box {
+		&--full.rcx-box {
+			overflow: visible !important /* 1 */;
+			height: auto !important /* 1 */;
+		}
+	}
+}
+
+.gallery-item {
+	max-width: 100%;
+	cursor: pointer;
+}
+
+/*
+ * Prevent iOS Safari from auto-zooming when a field gains focus: it zooms whenever the
+ * focused control's font-size is below 16px. Enforce a 16px minimum on text-entry controls
+ * on small screens — this preserves pinch-to-zoom, unlike disabling user-scalable in the
+ * viewport meta. `!important` is required to override the design-system default
+ * (.rcx-input-box is 0.875rem and fuselage.css is imported after this file).
+ *
+ * `-webkit-touch-callout` is implemented only by iOS WebKit, so it scopes this to the
+ * engine that has the behavior: every iOS browser, but no desktop or Android one.
+ */
+@supports (-webkit-touch-callout: none) {
+	@media (width <= 767px) {
+		input,
+		textarea,
+		select,
+		[contenteditable]:not([contenteditable='false']) {
+			font-size: 16px !important;
+		}
+	}
+}

apps/meteor/app/theme/client/imports/general/base_old.css

@@ -0,0 +1,250 @@
+.copyonly {
+	display: none;
+	width: 0;
+	height: 0;
+	user-select: none;
+	vertical-align: baseline;
+	font-size: 0;
+	-moz-box-orient: vertical;
+
+	code & {
+		float: left;
+	}
+}
+
+/* change to page-messages */
+
+.messages-container {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	width: 100%;
+
+	&-wrapper {
+		display: flex;
+		flex: 1 1 auto;
+		height: 1%;
+	}
+
+	&-main {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		flex: 1 1 auto;
+		width: 50%;
+	}
+
+	& .wrapper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		overflow: hidden auto;
+		width: 100%;
+		height: 100%;
+		word-wrap: break-word;
+		-webkit-overflow-scrolling: touch;
+	}
+}
+
+.messages-box {
+	position: relative;
+	overflow: hidden;
+	flex-grow: 1;
+
+	& .wrapper.has-more-next {
+		padding-bottom: 24px;
+	}
+
+	/* Overlay scrollbars overrides styles, so we need an important here */
+	& .messages-list {
+		padding: 21px 0 10px !important;
+	}
+}
+
+.highlight-text {
+	padding: 0 2px 2px;
+	color: var(--rcx-color-font-pure-white, #ffffff);
+	border-radius: var(--border-radius);
+	background-color: var(--rcx-color-badge-background-level-4, #f5455c);
+}
+
+.inline-video {
+	width: 100%;
+	max-width: 480px;
+	height: auto;
+	max-height: 270px;
+}
+
+.load-more {
+	position: relative;
+	height: 2rem;
+}
+
+.rcx-message {
+	&.highlight {
+		animation: highlight 6s;
+	}
+}
+
+.page-loading {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	text-align: center;
+	background-color: var(--page-loading-background-light);
+	align-items: center;
+	justify-content: center;
+
+	@media (prefers-color-scheme: dark) {
+		background: var(--page-loading-background-dark);
+	}
+}
+
+/* FLEX-TAB and FLEX-TAB views */
+.main-content-flex {
+	display: flex;
+	height: 100%;
+	flex-grow: 1;
+}
+
+.no-scroll {
+	overflow: hidden !important;
+}
+
+code {
+	padding: 0.5em;
+	text-align: left;
+	vertical-align: middle;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	border-width: 1px;
+	border-radius: var(--border-radius);
+	font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+	font-size: 13px;
+	font-weight: 600;
+	direction: ltr;
+	unicode-bidi: embed;
+
+	&.inline {
+		display: inline;
+		padding: 0.05rem 0.2rem;
+		line-height: 1.25rem;
+	}
+
+	&.hljs {
+		overflow-y: hidden;
+	}
+}
+
+pre {
+	display: inline-block;
+	width: 100%;
+}
+
+blockquote {
+	position: relative;
+	display: block;
+	clear: both;
+	min-height: 20px;
+	padding-left: 10px;
+
+	&::after {
+		display: table;
+		clear: both;
+		content: '';
+	}
+
+	&::before {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		width: 2px;
+		content: ' ';
+	}
+
+	&:first-child::before {
+		border-radius: 2px 2px 0 0;
+	}
+
+	&:last-child::before {
+		border-radius: 0 0 2px 2px;
+	}	
+}
+
+.new-room-highlight a {
+	animation: highlight 6s infinite;
+}
+
+.room-not-found {
+	display: flex;
+	flex-direction: column;
+	font-size: 30px;
+	align-items: center;
+	justify-content: center;
+
+	& div {
+		text-align: center;
+		line-height: 40px;
+	}
+
+	& i {
+		padding-bottom: 30px;
+		font-size: 100px;
+	}
+}
+
+.flex-tab-main-content {
+	position: relative;
+	z-index: 1;
+	overflow: auto;
+	flex-grow: 1;
+}
+
+.code-colors {
+	color: var(--rcx-color-font-default, #1f2329);
+	border-color: var(--rcx-color-stroke-extra-light, #ebecef);
+	background-color: var(--rcx-color-surface-neutral, #e4e7ea);
+}
+
+.code-mirror-box {
+	& .CodeMirror { /* stylelint-disable-line */
+		border-width: var(--input-border-width);
+		border-color: var(--input-border-color);
+		border-radius: var(--input-border-radius);
+	}
+
+	&.code-mirror-box-fullscreen {
+		& .CodeMirror { /* stylelint-disable-line */
+			display: flex;
+			flex-direction: column;
+			flex-grow: 1;
+
+			& .CodeMirror-scroll { /* stylelint-disable-line */
+				flex-grow: 1;
+			}
+		}
+	}
+}
+
+.embedded-view {
+	& .messages-container {
+		border-width: 0;
+
+		& .messages-box {
+			margin-top: 0;
+		}
+	}
+}
+
+@keyframes zoom-in {
+	0% {
+		transform: scale3d(0.9, 0.9, 0.9);
+		opacity: 0;
+	}
+
+	50% {
+		opacity: 1;
+	}
+}

apps/meteor/app/theme/client/imports/general/react-root.css

@@ -0,0 +1,10 @@
+#react-root {
+	position: relative;
+	display: flex;
+	overflow: visible;
+	flex-direction: column;
+	width: 100vw;
+	height: 100vh;
+	padding: 0;
+	block-size: -webkit-fill-available;
+}

apps/meteor/app/theme/client/imports/general/reset.css

@@ -0,0 +1,136 @@
+/**
+* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+* http://cssreset.com
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+button,
+audio,
+video {
+	margin: 0;
+	padding: 0;
+	vertical-align: baseline;
+	border: 0 solid;
+
+	&::after,
+	&::before {
+		border: 0 solid;
+	}
+}
+
+/* HTML5 display-role reset for older browsers */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+	display: block;
+}
+
+ol,
+ul {
+	list-style: none;
+}
+
+blockquote,
+q {
+	quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+	content: '';
+	content: none;
+}
+
+table {
+	border-spacing: 0;
+	border-collapse: collapse;
+}

apps/meteor/app/theme/client/imports/general/theme_old.css

@@ -0,0 +1,37 @@
+* {
+	-webkit-overflow-scrolling: touch;
+
+	&::-webkit-scrollbar {
+		width: 6px;
+		height: 6px;
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		border-radius: 50px;
+		background-color: var(--custom-scrollbar-color);
+	}
+
+	&::-webkit-scrollbar-corner {
+		background-color: transparent;
+	}
+}
+
+.content-background-color {
+	background-color: var(--content-background-color);
+}
+
+.color-primary-font-color {
+	color: var(--primary-font-color);
+}
+
+.secondary-font-color {
+	color: var(--secondary-font-color);
+}
+
+input,
+select,
+textarea {
+	border-style: solid;
+	background-color: transparent;
+}

apps/meteor/app/theme/client/imports/general/variables.css

@@ -0,0 +1,85 @@
+:root {
+	/*
+	* Color palette
+	*/
+	--color-red: #f5455c;
+	--color-yellow: #ffd21f;
+	--color-green: #2de0a5;
+
+	/*
+	* General Colors
+	*/
+	--color-gray: #9ea2a8;
+	--color-gray-medium: #cbced1;
+	--color-gray-lightest: #f2f3f5;
+
+	/* Colors */
+	--rc-color-error: var(--color-red);
+	--rc-color-alert: var(--color-yellow);
+	--rc-color-success: var(--color-green);
+	--rc-color-primary-light: var(--color-gray);
+
+	/* Old Colors */
+	--content-background-color: #ffffff;
+	--primary-font-color: #444444;
+	--primary-action-color: #1d74f5;
+	--secondary-font-color: #a0a0a0;
+	--component-color: #f2f3f5;
+
+	/* Fonts */
+	--body-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;
+
+	/*
+	* General
+	*/
+	--rc-status-online: var(--rc-color-success);
+	--rc-status-away: var(--rc-color-alert);
+	--rc-status-busy: var(--rc-color-error);
+	--rc-status-invisible: var(--color-gray-medium);
+
+	/*
+	* General Typography
+	*/
+	--text-small-size: 0.875rem;
+
+	/*
+	* Sidebar
+	*/
+	--sidebar-width: 17.5rem;
+	--sidebar-md-width: 20rem;
+	--sidebar-lg-width: 21rem;
+	--sidebar-default-padding: 24px;
+	--sidebar-small-default-padding: 16px;
+
+	/*
+	* Rooms list
+	*/
+	--rooms-list-title-color: var(--rc-color-primary-light);
+	--rooms-list-title-text-size: 0.75rem;
+	--rooms-list-empty-text-color: var(--color-gray);
+	--rooms-list-empty-text-size: 0.75rem;
+
+	/*
+	* Flex nav
+	*/
+	--flex-nav-background: var(--color-gray-lightest);
+
+	/*
+	* Loading
+	*/
+	--page-loading-background-light: var(--rcx-color-surface-tint, #f7f8fa);
+	--page-loading-background-dark: var(--rcx-color-surface-tint, #1f2329);
+	--loading-bounce-color-light: var(--rcx-color-font-default, #2f343d);
+	--loading-bounce-color-dark: var(--rcx-color-font-default, #e4e7ea);
+
+	/*
+	* Scrollbar
+	*/
+	--custom-scrollbar-color: var(--rcx-color-stroke-dark, #6C737A);
+}
+
+.rcx-sidebar {
+	&--main {
+		--sidebar-background: var(--rcx-color-surface-tint, #262931);
+	}
+}

apps/meteor/app/theme/client/index.ts

@@ -0,0 +1 @@
+import './main.css';

apps/meteor/app/theme/client/main.css

@@ -0,0 +1,16 @@
+/* General */
+@import url('imports/general/variables.css');
+@import url('imports/general/reset.css');
+@import url('imports/general/base_old.css');
+@import url('imports/general/base.css');
+@import url('imports/general/react-root.css');
+
+/* Main */
+@import url('imports/components/flex-nav.css');
+@import url('imports/components/emoji.css');
+@import url('imports/components/loading.css');
+
+/* Legacy theming */
+@import url('imports/general/theme_old.css');
+@import url('./rocketchat.font.css');
+@import url('../../../node_modules/@rocket.chat/fuselage/dist/fuselage.css');

apps/meteor/app/theme/client/rocketchat.font.css

@@ -0,0 +1,7 @@
+@font-face {
+	font-family: RocketChat;
+	font-weight: 400;
+	font-style: normal;
+	font-display: block;
+	src: url('/fonts/rocketchat.woff2') format('woff2');
+}