RocketChat | Discord Theme

Changes RocketChat color and layout to be more similar to Discord.com's dark theme.

/* ==UserStyle==
 -- THEME STUFF --
@name           RocketChat | Discord Theme
@version        1.0.4
@description    Changes RocketChat color and layout to be more similar to Discord.com's dark theme.

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://pages.codeberg.org/freeplay/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues

==/UserStyle== */
/* July, 29 / 20
- Proper Userstyle Metadata
*/
/* July, 23 / 20
- Fixes some more issues due to the update, Not everything is fixed but it's back to being usable
- https://greasyfork.org/en/scripts/402919-rocketchat-discord-theme/discussions/54393
/* July, 12 / 20
- Some fixes
*/
/* May, 14 / 20
- Fixed Message Dividers
*/
@-moz-document domain("stux.chat"), domain("open.rocket.chat") {
	/* Yes, I realize this may be a bit messy. Feedback is appreciated!*/
	
	/* Frames */
	* {
		transition: background 0s !important;
		border-color: hsla(0,0%,100%,0.06);
	}
	.wrapper {
		scrollbar-color: #202225 #36393f;
	}
	.section {
		border-color: hsla(0,0%,100%,0.06) !important;
	}
	.rc-old {
		border: none !important;
	}
	.rcx-box {
		color: white;
		border: none !important;
		/*background-color: #36393f !important;*/
	}
	.rcx-box:after {
		border: none !important;
	}
	.rcx-tile--elevation-0, .rcx-tile--elevation-1 {
		background-color: #202225;
		color: white;
	}

	/* Text */
	.global-font-family {
		font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif !important;
	}
	.color-primary-font-color, .rc-form-label, .rc-switch__text {
		color: #dcddde;
	}
	
	.rcx-box--text-style-h1 {
		color: white;
	}
	.rc-switch-double {
		color: #7289DA;
	}
	
	a {
		color: #7289DA;
	}
	label {
		color: white;
	}

	/* Alerts */
	.alert {
		background-color: #1f2124;
		color: white;
		border: none;
	}
	.rcx-callout--type-warning {
		background-color: #1f2124;
	}
	
	/* Other */
	.role-tag, .message-alias, .rc-apps-category, .remove-role, .is-bot {
		background-color: #7289DA !important; 
		border: none !important;
		color: white !important;
		font-size: 10px !important;
		line-height: 15px !important;
		border-radius: 3px !important;
		font-weight: 500 !important;
		padding: 0 4px !important;
		text-transform: uppercase;
		display: inline-block;
		height: 15px !important;
	}
		
	.mention-link { /* Mention Tags */
		border-radius: 3px !important;
		padding: 0 2px !important;
		color: #7289da !important;
		background: rgba(114,137,218,.1) !important;
		font-weight: 500 !important;
	}
	.mention-link:hover {
		background: #7289da !important;
		color: white !important;
		opacity: 1 !important;
	}
	.mention-link--user:before {
		content: "@";
	}
	.reactions > li { /* Emoji Reactions */
			background-color: rgba(114,137,218,.3) !important;
			border: none !important;
			border-radius: .25rem;
			margin-right: .125rem;
			margin-bottom: .125rem;
		}
		.reactions > li.add-reaction {
			background-color: transparent !important;
		}

	/* TextBoxes */
	.rc-input__element, .rcx-input-box__wrapper, .rcx-input-box, .rc-tags__input/*, .rcx-select*/ { 
		background-color: #202225 !important;
		border: none !important;
		border-radius: 4px !important;
		color: white !important;
		box-shadow: none !important;
	}
		.rc-input__icon {
			color: #dcddde;
		}
	
	/* CodeBlocks */
	.CodeMirror-gutters {
		background-color: #202225;
	}
	.code-colors, code, .CodeMirror-scroll {
		color: white !important;
		background-color: #2f3136 !important;
		border: 1px solid #202225 !important;
		border-radius: 4px !important;
	}
		.hljs-keyword, .hljs-string, .cm-string {
			color: #dc3233;
		}
	
	/* Buttons */
	.rc-button, .rcx-button {
		background-color: #7289da;
		color: white;
		border: none;
		border-radius: 3px;
		font-weight: 500;
		line-height: 16px;
		font-size: 14px;
		/*padding: 2px 16px;*/
	}
	.rc-button:hover, .rcx-button:hover {
		background-color: #677bc4 !important;
		opacity: 1 !important;
	}
	.rc-button--cancel {
		background-color: transparent !important;
		border: 1px solid rgba(240,71,71,.3) !important;
		color: #f04747;
	}
	.rc-button:disabled, .rcx-button--primary:disabled {
		background-color: #7289da;
		color: white;
		opacity: 0.7;
	}
	.rc-select, select.rc-input { /* DropDown */
		background-color: rgb(79, 84, 92) !important;
		color: white !important;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px 0px !important;
		border: none !important;
	}
		.rc-select__element {
			color: white !important;
		}
			option {
				background-color: rgb(79, 84, 92);
				color: white;
				border: none;
				border-radius: 4px;
			}
	/* Files */
	.attachments__item:hover {
		background-color: rgba(79,84,92,0.32) !important;
	}
	.attachments__name {
		color: white !important;
	}
	
	i {
		color: white !important;
	}
	
	/*** SIDEBAR ***/
	
	.sidebar {
		max-width: 240px;
		min-width: 240px;
		background-color: #2f3136;
	}
		.rooms-list {
			margin-top: 48px;
			scrollbar-color: #202225 transparent;
			scrollbar-width: thin;
		}
			.rooms-list__list:not(:last-child) {
				margin: 0 !important;
			}
			h3.rooms-list__type {
				height: 40px !important;
				padding: 16px 16px 0 16px;
			}
				.sidebar-item { /* Sidebar Buttons */
					height: 34px !important;
					font-size: 16px !important;
					font-weight: 500 !important;
					color: #8e9297 !important;
					margin: 0 8px !important;
					padding: 0 !important;
				}
					.sidebar-item__picture {
						display: none;
					}
					.sidebar-item__body {
						font-size: 16px !important;
						font-weight: 500 !important;
						padding: 0 8px;
					}
				.sidebar-item:hover {
					background-color: rgba(79, 84, 92, 0.16) !important;
				}
				.sidebar-item--active {
					background-color: rgba(79, 84, 92, 0.32) !important;
					color: white !important;
				}
				.sidebar-item--unread {
					color: white !important;
				}

		.sidebar__header {
			position: fixed;
			top: 0;
			background-color: #2f3136;
			width: 240px;
			min-width: 240px;
			max-width: 240px;
			margin: 0;
			padding: 12px;
			z-index: 1;
			box-shadow: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
		}
			.sidebar__header-thumb {
				margin: 0;
				margin-right: 10px;
			}
			.sidebar__toolbar {
				margin: 0 !important;
				padding: 0 !important;
				justify-content: space-evenly;
				/*display: grid !important;
				grid-template-columns: repeat(auto-fill,minmax(25px, 1fr))*/
			}
				.sidebar__toolbar-button {
					margin: 0;
					width: 25px;
				}
	
	/*** CONTENT ***/
	
	.content-background-color {
		background-color: #36393f;
	}
		/* HEADER */
		.rc-header--room {
			/*background-color: #36393f;*/
			height: 48px;
			padding: 0;
			padding-left: 8px;
			box-shadow: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
			border: none !important;
		}
			.rc-header__wrap {
				background-color: transparent;
				height: 100%;
			}
				.rc-header__data {
					display: contents;
				}
					.rc-header__name {
						width: min-content;
						padding-right: 16px;
						border-right: 1px solid #ffffff0f;
						color: white;
						font-weight: 600;
						font-size: 16px !important;
					}
					.rc-header__topic {
						padding-left: 16px;
					}
				.rc-old .fixed-title {
					border: none !important;
				}
		/* MEssages */
		.messages-box ul {
			padding: 21px 0 25px;
		}
			.message {
				padding: 0;
				padding-left: 72px;
				padding-right: 48px;
				margin-top: 1.0625rem;
				line-height: 1.375rem;
				font-size: 100%;
				font-weight: 400;
			}
				.message .thumb {
					left: 16px;
					width: 40px;
					height: 40px;
				}
					.message .thumb:not(.thumb-small) .avatar {
						width: 40px;
						height: 40px;
					}
				.message-oembed, .attachment {
					background-color: #2f3136;
					border-radius: 4px;
					overflow: hidden;
					width: max-content;
					max-width: 100%;
					padding-right: 10px;
				}
					.rc-old blockquote::before, .attachment-block-border {
						display: flex;
						width: 4px !important;
						border-radius: 0px !important;
						margin-top: -5px;
						height: calc(100% + 10px)
					}
				.message-oembed > iframe {
					width: 100%;
				}
			.message-actions {
				color: white;
				background-color: #36393f;
				box-shadow: 0 0 0 1px rgba(4,4,5,0.15);
				border: none;
			}
				.message-actions__button:hover, .message-actions__menu:hover {
					background-color: #3e4249;
				}
			.message:hover, .message.active {
				background-color: rgba(4,4,5,0.07);
			}
			.message a {
				color: #7289DA;
			}
			.message.editing {
				background-color: rgba(250,166,26,0.08);
			}
			.message.new-day::before {
				background-color: #36393f;
				color: #72767d;
				border-radius: 50px;
			}
			.message.new-day::after {
				border-color: hsla(0,0%,100%,0.06) !important;
				border-width: thin !important;
			}
		
		/* TextBox */
		.rc-old .messages-container {
			overflow: hidden;
		}
		.rc-old .messages-container .footer {
			min-height: 68px;
			padding-bottom: 24px;
			background-color: #36393f;
		}
			.rc-message-box {
				background-color: #36393f !important;
				padding: 0;
				padding-left: 16px;
				padding-right: 16px;
			}
				
				/*.message-popup-results {
					bottom: 0;
					position: absolute;
				}*/
					.rc-message-box .reply-preview {
						background-color: #2e3035 !important;
					}
				.rc-message-box__container {
					border: none;
					background-color: #40444b;
					border-radius: 8px;
					padding: 9px 0;
					/*margin-bottom: 24px;*/
				}
					.rc-message-box__textarea {
						color: white;
					}
				.rc-message-box__container.editing {
					background-color: rgba(250,166,26,0.08);
				}
				.rc-message-box__toolbar-formatting {
					position: absolute;
					bottom: -24px;
				}
			.rc-message-box__typing {
				bottom: 0;
				margin-top: auto;
				position: fixed;
				height: 20px;
				color: white;
			}
				.rc-message-box__typing-user {
					color: white !important;
				}
		
		/* DropZone */
		.dropzone-overlay {
			background: rgba(0,0,0,0.8) !important;
		}
	
		/* Context SideBar */
		.rc-user-info-container {
			background-color: transparent !important;
		}
		.contextual-bar {
			background-color: #2f3136;
			box-shadow: none !important;
			border-inline-start: none !important;
		}
			.contextual-bar__header, .rcx-\@9jfjls {
				background-color: #2f3136;
				height: 48px;
				box-shadow: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
				border: none;
				z-index: 2;
			}
			.contextual-bar__content, .rcx-\@10ikbhr {
				background-color: #2f3136;
				border-radius: 0 !important;
			}
				.contextual-bar__content > .rc-message-box {
					background-color: #2f3136 !important;
				}
				.rc-user-info__row--separator {
					border: none;
				}
				.rc-member-list__counter { /* Member list count text */
					color: white;
				}
				.rc-user-info-details {
					background-color: #202225;
					border-radius: 4px;
					color: white;
				}
					.rc-user-info-details__info {
						color: white;
					}
				.rc-member-list__user, .rcx-table__row {
					border-radius: 4px !important;
					height: 42px !important;
					padding: 0 8px !important;
					align-items: center !important;
				}
					
				.rc-member-list__user:hover, .rcx-table__row:hover {
					background-color: rgba(79,84,92,0.16);
				}
				.rc-member-list__user.active {
					background-color: rgba(79,84,92,0.32);
					color: white;
				}
	
				/* Discussions */
				.rcx-\@1usu1xd:hover, .rcx-\@1usu1xd:focus, .rcx-\@2xn2yo:hover, .rcx-\@2xn2yo:focus {
					background-color: rgba(79,84,92,0.16);
				}
					.rcx-\@16ef2pm {
						color: white !important;
					}
	
			.rc-old .list-view > .title:not(:last-child) { /* Search W/ Regex text */
				margin: 0;
			}
			.rocket-search-tab {
				padding: 8px;
				scrollbar-color: #202225 #2f3136;
			}
				.thread {
					padding: 8px;
				}
					.list > .message, .thread > .message {
						background-color: #36393f;
						border: 1px solid #202225;
						border-radius: 4px;
						padding-top: 8px;
						padding-bottom: 8px;
					}
	
	
	
	/*** SETTINGS ***/
	.flex-nav {
		background-color: #2f3136;
	}
	.rcx-\@197qq4o {
		color: white !important; 
	}
	.flex-nav a:hover, .rcx-\@1l00c5f.active {
		background-color: #393c43 !important;
	}
	.rcx-\@txktj6 {
		background-color: #36393f !important;
	}
	
	/** Admin Settings */
	
	.rc-old .flex-tab-container.opened, .flex-tab-bar {
		box-shadow: none !important;
	}
	.flex-tab-bar .tab-button:hover {
		background-color: transparent;
		border-right: 1px solid white;
	}
	.tab-button.active {
		background-color: transparent !important;
	} 
	.page-settings a:not(.rc-button) {
		color: #b9bbbe;
	}
	
	/* Tables */
	tr:not(.table-no-click):not(.table-no-pointer):hover {
		background-color: #2f3136 !important;
	}
		.statistics-table, .admin-table-row {
			background-color: #36393f !important;
		}
		.statistics-table:hover, .admin-table-row:hover {
			background-color: #2f3136 !important;
		}
		.rc-table-title {
			color: lightgray;
		}
		.table-fake-th {
			color: lightgray !important;
		}
		.permissions-manager .permission-grid .role-name {
			background-color: #36393f !important;
			color: white !important;
		}
			.page-list a:not(.rc-button) {
				color: lightgrey;
			}
		
	
	/* Integrations */
	.admin-integrations-new-item {
		border: none !important;
		color: white !important;
	}
	.admin-integrations-new-item:hover {
		background-color: rgba(79,84,92,0.32) !important;
	} 
	
	/* Federation Dash */
	.overview-item > .value {
		color: white;
	}
	
	/* Accounts */
	.rcx-accordion-item__bar[tabindex]:hover {
		background-color: transparent !important;
	}
	
	/*** POPUPS ***/
	.rc-modal-wrapper {
		background: rgba(0,0,0,0.85)
	}
		.rc-modal {
			background-color: #36393f;
			color: white;
			box-shadow: 0 0 0 1px rgba(32,34,37,.6),0 2px 10px 0 rgba(0,0,0,.2);
			border-radius: 5px;
			width: 440px;
			max-height: 660px;
			min-height: 200px;
			padding: 0;
			overflow: hidden;
		}
			.rc-modal__header {
				padding: 20px;
			}
				.rc-modal__title {
					font-weight: 600;
					font-size: 16px;
					line-height: 20px;
					letter-spacing: .3px;
					text-transform: uppercase;
				}
		.rc-modal__content {
			padding: 20px;
			padding-top: 10px;
		}
			.rc-modal__content-icon {
				display: none;
			}
			.rc-modal__content-text {
				text-align: left;
				font-size: 16px;
				line-height: 20px;
				color: #dcddde;
			}
		.rc-modal__footer {
			background-color: #2f3136;
			bottom: 0;
			margin-top: auto;
		}
	
	/* Emoji Picker */
	.emoji-picker {
		background-color: #2f3136 !important;
		border-radius: 8px;
		box-shadow: 0 0 0 1px rgba(4,4,5,0.15), 0 8px 16px rgba(0,0,0,0.24);
		padding: 0;
	}
		.filter-item {
			border: none !important;
		}
			.filter-item.active {
				border-bottom: solid !important;
			}
		.emoji-footer {
			display: none;
		}
	
	/* Context Menu */
	.rc-popover__content { 
		background-color: #202225;
		padding: 6px 8px;
		min-width: 188px;
		max-width: 320px;
		border-radius: 4px;
		box-shadow: 0 8px 16px rgba(0,0,0,0.24);
	}
		.rc-popover__title {
			color: #7289da;
			padding-top: 8px;
		}
			.rc-popover__list {
				margin-bottom: 8px;
			}
				.rc-popover__item {
					color: #b9bbbe;
					height: 35px;
					font-size: 14px;
					font-weight: 500;
					line-height: 18px;
				}
				.rc-popover__item:hover {
					background-color: rgba(79,84,92,0.16);
				}
		.rc-popover__divider {
			height: 1px;
			margin: 0;
			margin-top: -4px;
			background-color: hsla(0,0%,100%,0.06);
		}
	
}