diff --git a/custom.css b/custom.css index f4c8d09..50087a3 100644 --- a/custom.css +++ b/custom.css @@ -5,6 +5,7 @@ :root { --primary-font-color: #444; --info-font-color: #a0a0a0; + --color-darker: #272c33; } /* Reset global font color so that it's changable more easily */ @@ -38,7 +39,11 @@ input, select, textarea { } } - +@keyframes highlight { + from { + background-color: hsl(216, 92%, 54%); + } +} /****************************************** ************Transition Effect************* @@ -135,6 +140,10 @@ body.dark-mode { /* Mention link */ --mention-link-background: var(--color-dark-medium); --mention-link-text-color: var(--color-light-blue); + --mention-link-me-background: var(--alerts-background); + --mention-link-me-text-color: var(--color-white); + --mention-link-group-background: var(--alerts-background); + --mention-link-group-text-color: var(--color-white); /* Message box */ --message-box-user-typing-color: var(--color-gray-lightest); @@ -156,10 +165,9 @@ body.dark-mode { /* alert */ --alerts-background: #1d73f5; --alerts-color: var(--color-white); - - /* highlight text */ - --selection-background: orangered; - + + --message-box-editing-color: var(--rc-color-alert-message-warning-background); + --rc-color-alert: var(--color-dark-red); } @@ -180,7 +188,7 @@ body.dark-mode select { } body.dark-mode select option { - color: var(--primary-font-color); + color: var(--color-white); } body.dark-mode .sidebar-item > a { @@ -260,13 +268,17 @@ body.dark-mode .message.new-day::before { body.dark-mode .message.active, body.dark-mode .message:hover { - background-color: var(--color-dark-medium); + background-color: var(--color-darker); } body.dark-mode .message.editing { background-color: var(--color-dark-blue); } +body.dark-mode .message.first-unread .body:after { + background-color: var(--header-background-color); +} + body.dark-mode .rc-message-box__container { background-color: var(--message-box-background); } @@ -277,7 +289,14 @@ body.dark-mode .rc-old .rc-message-box .reply-preview { body.dark-mode .message-actions, body.dark-mode .rc-member-list__counter { - color: var(--color-gray); + color: var(--color-gray-light); + background-color: var(--color-darkest); + border-color: var(--color-dark); +} + +body.dark-mode .message-actions__button:hover, +body.dark-mode .message-actions__menu:hover { + background-color: var(--color-dark); } body.dark-mode .background-transparent-darker-before::before { @@ -377,7 +396,8 @@ body.dark-mode .message-popup-title { /**************Code Highlights*****************/ -body.dark-mode .code-colors { +body.dark-mode .code-colors, +body.dark-mode .rc-old code.inline { background: var(--color-dark-100); color: var(--color-gray-light); } @@ -558,6 +578,10 @@ body.dark-mode .rcx-box { background-color: var(--color-dark) !important; } +body.dark-mode .rcx-modal__backdrop { + background-color: transparent !important; +} + body.dark-mode .rcx-table__cell--align-start { color: var(--info-font-color) !important; background-color: var(--color-dark-medium) !important; @@ -616,6 +640,10 @@ body.dark-mode .setting-action { /**************Login Page******************/ +body.dark-mode main#rocket-chat { + background-color: var(--color-dark); +} + body.dark-mode section.full-page.color-tertiary-font-color { background-color: var(--color-dark); } @@ -623,6 +651,7 @@ body.dark-mode section.full-page.color-tertiary-font-color { body.dark-mode .rc-button.rc-button--nude.forgot-password, body.dark-mode .rc-button.rc-button--nude.back-to-login, body.dark-mode .rc-button.rc-button--nude.register, +body.dark-mode .rc-button.rc-button--nude i.icon-cancel, body.dark-mode .register-link-replacement { color: var(--color-white); } @@ -655,4 +684,4 @@ 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); -} \ No newline at end of file +}