Update 'custom.css'
This commit is contained in:
parent
3cf2b2a2f7
commit
83dcaab571
1 changed files with 39 additions and 10 deletions
49
custom.css
49
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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue