diff --git a/custom.css b/custom.css index 87e1e50..b44ceb3 100644 --- a/custom.css +++ b/custom.css @@ -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; @@ -191,12 +196,17 @@ body.dark-mode .rcx-css-11c35pn:focus .rcx-attachment__details { /* Attachements content */ body.dark-mode .rcx-message-attachment .rcx-attachment__content .rcx-box--full { - color: var(--primary-font-color); + 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; + color: var(--rc-color-primary) !important; } /* Message "You joined a new private conversation with" */ @@ -287,7 +297,7 @@ body.dark-mode .content-background-color { } body.dark-mode .message { - background-color: var(--color-darkest); + background-color: var(--color-darkest); } body.dark-mode .message.new-day::after, @@ -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,12 +481,31 @@ 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); + color: var(--info-font-color); } body.dark-mode .rcx-button--ghost:not(.rcx-button--square):hover { @@ -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,42 +983,65 @@ 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; -} \ No newline at end of file +}