wagesj45/RocketChatCustomLayout
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Newest Version

Browse source 
Newest version as of 11/9
This commit is contained in:
Jordan Wages 2021-11-09 19:15:37 -06:00
parent 3033f0b41e
commit 410dbeadb0
1 changed files with 86 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
custom.css
View file

@ -5,7 +5,7 @@
:root {
--primary-font-color: #444;
--info-font-color: #a0a0a0;
--color-darker: #272c34;
--color-darker: #272c33;
}
/* Reset global font color so that it's changable more easily */
@ -175,6 +175,11 @@ body.dark-mode {
/***************Main Chat*****************/
/* Breadcrumbs discussions */
body.dark-mode .rcx-room-header .rcx-tag--default {
background-color: unset;
}
/* Blockquote */
body.dark-mode .rcx-css-1d5cod7 {
background-color: var(--color-darkest) !important;
@ -194,6 +199,11 @@ body.dark-mode .rcx-message-attachment .rcx-attachment__content .rcx-box--full {
color: var(--primary-font-color);
}
body.dark-mode .rcx-message-attachment .rcx-attachment__content .rcx-box--full.rcx-box--with-block-elements pre code {
background-color: var(--color-dark);
color: var(--primary-font-color);
}
/* Pinned messages content */
body.dark-mode .rcx-css-ntpg4f {
color: var(--rc-color-primary) !important;
@ -454,6 +464,10 @@ body.dark-mode .rcx-options .rcx-option--selected:hover {
background-color: var(--color-dark) !important;
}
body.dark-mode .rcx-css-dpt4t8 { /* User selector in create direct message modal */
color: var(--color-dark);
}
/***** Buttons *****/
/* Regular button style */
@ -467,10 +481,29 @@ body.dark-mode .main-content .rcx-button:is(.rcx-button--ghost, .rcx-button):hov
/* Square (icon) button style */
body.dark-mode .main-content .rcx-button--square:not(.rcx-button--ghost), /* Default */
body.dark-mode .main-content .rcx-button--square:is(.rcx-button--ghost, .rcx-button):hover { /* Hovered or selected */
background-color: var(--color-dark) !important;
background-color: var(--color-darkest) !important;
border-color: transparent !important;
}
body.dark-mode .main-content .rcx-button--square:is(.rcx-button--ghost, .rcx-button):focus {
background-color: var(--color-darkest);
border-color: transparent !important;
box-shadow: 0 0 0 .1rem var(--color-gray);
}
/* Menu buttons on top right (threads, search, etc.) */
body.dark-mode .rcx-css-15vvv6z:hover,
body.dark-mode .rcx-css-ue04py:hover,
body.dark-mode .rcx-css-15vvv6z:active,
body.dark-mode .rcx-css-ue04py:active {
border-color: var(--color-dark-medium) !important;
background-color: var(--color-dark-medium) !important;
}
body.dark-mode .rcx-css-136xdpx {
background-color: var(--color-darkest);
}
body.dark-mode .rcx-button {
color: var(--info-font-color);
}
@ -539,8 +572,17 @@ body.dark-mode .emoji-picker .filter-item.active {
border-color: var(--color-light-blue);
}
body.dark-mode .rc-header--room {
border-bottom: 2px solid var(--color-dark-medium);
body.dark-mode .rcx-room-header hr.rcx-divider {
border-color: var(--color-dark-medium);
}
body.dark-mode aside.rcx-box.rcx-box--full.rcx-vertical-bar, /* right aside (threads, search, etc.) */
body.dark-mode .rcx-css-ccvr3m, /* thread list message */
body.dark-mode .rcx-css-1j3nsmc, /* thread list message */
body.dark-mode .rcx-css-1bmadou, /* thread list header */
body.dark-mode .rcx-css-1yhzjdg /* thread list search bar */
{
border-color: var(--color-dark-medium) !important;
}
body.dark-mode .room-leader:hover {
@ -779,6 +821,16 @@ body.dark-mode .rcx-box * .rcx-select {
background-color: var(--color-white);
}
body.dark-mode .rcx-banner {
background-color: var(--color-dark-medium);
color: var(--info-font-color) !important;
}
body.dark-mode .rcx-banner__close-button .rcx-button:hover {
background-color: var(--color-dark-light);
border: none;
}
body.dark-mode .mail-messages__instructions {
background-color: var(--color-dark);
}
@ -893,15 +945,8 @@ body.dark-mode .main-content *::-webkit-scrollbar-corner {
}
/***** Poll App *****/
body.dark-mode .rc-modal-wrapper > dialog > div {
background-color: var(--header-background-color);
}
body.dark-mode .rcx-box--text-style-h1,
body.dark-mode .rcx-subtitle,
body.dark-mode .rcx-box--text-color-default,
body.dark-mode .rcx-box--text-color-info {
color: var(--color-dark);
body.dark-mode .rcx-css-erwtrf {
color: var(--primary-font-color) !important;
}
/* Style the browser scroll bars to avoid visually clashing with the rest of Rocket.Chat in dark mode. */
@ -938,41 +983,64 @@ body.dark-mode *::-webkit-scrollbar-thumb:active {
/* aside.sidebar--main .rcx-sidebar-topbar .rcx-button--small-square {
width: 1.35rem;
}
body.dark-mode .main-content .rcx-box {
color: var(--info-font-color) !important;
background-color: var(--color-darkest) !important;
}
body.dark-mode div[class*="user-card"] {
color: var(--info-font-color) !important;
background-color: var(--color-dark) !important;
}
body.dark-mode .rcx-box {
color: var(--info-font-color) !important;
background-color: var(--color-dark-medium);
}
body.dark-mode .rcx-status-bullet--online {
background: #2de0a5 !important;
}
body.dark-mode .rcx-box--full {
background-color: var(--color-dark);
}
body.dark-mode .rc-box.rcx-box--full.rcx-sidebar-item__title,
body.dark-mode .rc-box.rcx-box--full.rcx-sidebar-item__subtitle,
body.dark-mode .rc-box.rcx-box--full.rcx-sidebar-item__time {
color: var(--sidebar-item-text-color);
}
body.dark-mode .rcx-sidebar-topbar button.rcx-button-group__item .rcx-icon,
body.dark-mode .rcx-box.rcx-box--full.rcx-icon--name-hashtag,
body.dark-mode .rcx-box.rcx-box--full.rcx-sidebar-title {
color: var(--sidebar-item-text-color) !important;
}
body.dark-mode .rcx-sidebar-item--highlighted {
color: #fff !important;
}
body.dark-mode .rcx-sidebar-item__container span.rcx-box.rcx-box--full.rcx-badge {
background-color: var(--rc-color-alert);
} */
body.dark-mode figcaption.rcx-box.rcx-box--full.rcx-attachment__details {
background-color: var(--color-darker) !important;
color: var(--primary-font-color) !important;
}
body.dark-mode .rcx-css-z2kk2c {
color: var(--primary-font-color) !important;
}
body.dark-mode .rcx-box--with-inline-elements code, .rcx-field__description code, .rcx-field__error code, .rcx-field__hint code{
background-color: var(--color-dark-100) !important;
color: var(--primary-font-color) !important;
}
/* This CSS block is used to counter RocketChat's bug which crop the end of custom CSS. */
.dummy-entry {
color: whitesmoke;