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://greatest.deepsurf.us/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);
}
}