Update 'custom.css'
This commit is contained in:
parent
ffcd4c63cc
commit
e42b92dd1d
1 changed files with 606 additions and 50 deletions
656
custom.css
656
custom.css
|
|
@ -1,98 +1,654 @@
|
||||||
|
/******************************************
|
||||||
|
*************General Settings*************
|
||||||
|
******************************************/
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--header-background-color: #141414 !important;
|
--primary-font-color: #444;
|
||||||
--message-box-editing-color: #141414 !important;
|
--info-font-color: #a0a0a0;
|
||||||
--popover-background: #121212 !important;
|
|
||||||
--chip-background : #141414 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reply-preview {
|
/* Reset global font color so that it's changable more easily */
|
||||||
background-color: #222222 !important;
|
.color-primary-font-color, textarea {
|
||||||
|
color: var(--primary-font-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rc-table-title{
|
.color-info-font-color {
|
||||||
color: #dddddd !important;
|
color: var(--info-font-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rc-popover__item {
|
input, select, textarea {
|
||||||
color: #FFFFFF !important;
|
color: var(--input-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.error-color {
|
||||||
color: #FFFFFF !important;
|
color: var(--rc-color-error);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-item.sidebar-item--unread {
|
.js-button[aria-label="Toggle Dark Mode"] {
|
||||||
color: #ff2222 !important;
|
transition: filter 150ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-item.sidebar-item--unread::after {
|
.sidebar__toolbar-button-icon--darkmode {
|
||||||
content: "💬";
|
height: .9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar__toolbar-button {
|
@media (min-width: 1372px) {
|
||||||
color: #FFFFFF !important;
|
.sidebar__toolbar-button {
|
||||||
|
margin: 0 3px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-item {
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
|
/******************************************
|
||||||
|
************Transition Effect*************
|
||||||
|
******************************************/
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select,
|
||||||
|
.color-primary-font-color,
|
||||||
|
.color-info-font-color,
|
||||||
|
.background-info-font-color,
|
||||||
|
.background-transparent-darker-before::before,
|
||||||
|
.messages-box .message .body, /* override for opacity transition */
|
||||||
|
.rc-header__name,
|
||||||
|
.rc-header__wrap,
|
||||||
|
.message .reactions>li,
|
||||||
|
.message .title .is-bot,
|
||||||
|
.message .title .role-tag,
|
||||||
|
.message.new-day::before,
|
||||||
|
.code-colors,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-doctag,
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-type,
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-number,
|
||||||
|
.hljs-tag,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-variable,
|
||||||
|
.rc-message-box__container,
|
||||||
|
.messages-container .footer,
|
||||||
|
.content-background-color,
|
||||||
|
.message.new-day::after,
|
||||||
|
.message .reactions>li,
|
||||||
|
.border-component-color,
|
||||||
|
.contextual-bar__header,
|
||||||
|
.contextual-bar__content,
|
||||||
|
.sidebar__footer {
|
||||||
|
transition: opacity 300ms linear, color 150ms, background-color 150ms, border-color 150ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-light .sidebar-item {
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
|
/******************************************
|
||||||
|
*************Dark Mode Settings***********
|
||||||
|
******************************************/
|
||||||
|
body.dark-mode {
|
||||||
|
|
||||||
|
/****************************** Custom Variables ******************************/
|
||||||
|
--primary-font-color: var(--color-gray-lightest);
|
||||||
|
--info-font-color: var(--color-gray-light);
|
||||||
|
--message-box-background: hsla(0, 0, 100%, 0.1);
|
||||||
|
|
||||||
|
--button-outline-color: var(--color-gray-medium);
|
||||||
|
--button-close-color: var(--color-gray-medium);
|
||||||
|
|
||||||
|
|
||||||
|
/********************** Overridden Rocket.Chat Variables **********************/
|
||||||
|
|
||||||
|
/* General Colors */
|
||||||
|
--rc-color-alert-message-warning-background: hsl(352, 83%, 20%);
|
||||||
|
--rc-color-primary: var(--color-gray-lightest);
|
||||||
|
--rc-color-primary-lightest: var(--color-dark-medium);
|
||||||
|
|
||||||
|
/* Forms - Button */
|
||||||
|
--button-disabled-background: var(--color-dark-70);
|
||||||
|
--button-disabled-text-color: var(--color-dark-80);
|
||||||
|
|
||||||
|
/* Forms - Input */
|
||||||
|
--input-text-color: var(--color-gray-lightest);
|
||||||
|
--input-icon-color: var(--color-gray-lightest);
|
||||||
|
|
||||||
|
/* Forms - popup list */
|
||||||
|
--popup-list-background: var(--color-dark);
|
||||||
|
--popup-list-background-hover: var(--color-darkest);
|
||||||
|
--popup-list-selected-background: var(--color-dark);
|
||||||
|
--popup-list-name-color: var(--color-white);
|
||||||
|
|
||||||
|
/* Forms - tags */
|
||||||
|
--tags-text-color: var(--color-white);
|
||||||
|
--tags-background: var(--color-blue);
|
||||||
|
|
||||||
|
/* Sidebar */
|
||||||
|
--sidebar-background: var(--color-dark);
|
||||||
|
|
||||||
|
/* Chip */
|
||||||
|
--chip-background: var(--color-blue);
|
||||||
|
|
||||||
|
/* Mention link */
|
||||||
|
--mention-link-background: var(--color-dark-medium);
|
||||||
|
--mention-link-text-color: var(--color-light-blue);
|
||||||
|
|
||||||
|
/* Message box */
|
||||||
|
--message-box-user-typing-color: var(--color-gray-lightest);
|
||||||
|
--message-box-user-typing-user-color: var(--color-gray-lightest);
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
--header-title-username-color-darker: var(--color-gray-lightest);
|
||||||
|
--header-background-color: var(--color-darkest);
|
||||||
|
|
||||||
|
/* Popover */
|
||||||
|
--popover-background: var(--color-dark);
|
||||||
|
--popover-title-color: var(--color-white);
|
||||||
|
--popover-item-color: var(--color-white);
|
||||||
|
|
||||||
|
/* Tooltip */
|
||||||
|
--tooltip-background: var(--color-darkest);
|
||||||
|
--tooltip-text-color: var(--color-white);
|
||||||
|
|
||||||
|
/* alert */
|
||||||
|
--alerts-background: #1d73f5;
|
||||||
|
--alerts-color: var(--color-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contextual-bar {
|
|
||||||
background-color: #171717 !important;
|
|
||||||
|
/******************************************
|
||||||
|
*********Manual Dark Theme Overrides******
|
||||||
|
******************************************/
|
||||||
|
|
||||||
|
|
||||||
|
/***************Main Chat*****************/
|
||||||
|
|
||||||
|
body.dark-mode a {
|
||||||
|
color: var(--color-light-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contextual-bar__header {
|
body.dark-mode select {
|
||||||
background-color: #101010 !important;
|
background-color: var(--color-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rc-member-list__counter {
|
body.dark-mode select option {
|
||||||
color: #FFFFFF !important;
|
color: var(--primary-font-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message.editing {
|
body.dark-mode .sidebar-item > a {
|
||||||
background-color: #222222 !important;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rc-user-info-container {
|
body.dark-mode select option {
|
||||||
background-color: #101010 !important;
|
color: var(--color-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rc-user-info-details {
|
body.dark-mode .rc-switch__text {
|
||||||
background-color: #101010 !important;
|
color: var(--color-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message .highlight-text {
|
body.dark-mode .rc-switch-double {
|
||||||
background-color: var(--mention-link-me-background) !important;
|
color: var(--color-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message .reactions > li {
|
body.dark-mode .rc-switch__button {
|
||||||
background-color: transparent !important;
|
background-color: var(--color-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-transparent-darker-before::before {
|
body.dark-mode .error-border {
|
||||||
background-color: #DEDEDE !important;
|
border-color: var(--color-dark-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-component-color {
|
body.dark-mode .background-component-color {
|
||||||
background-color: #000000 !important;
|
background-color: var(--color-dark-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-actions {
|
body.dark-mode .upload-progress-progress {
|
||||||
color: #FFFFFF !important;
|
background-color: var(--color-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rc-message-box__typing-user {
|
body.dark-mode .container-bars .color-primary-action-color {
|
||||||
color: #FFFFFF !important;
|
color: var(--color-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rooms-list__type {
|
body.dark-mode .burger i {
|
||||||
color: firebrick !important;
|
background-color: var(--color-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message:hover {
|
body.dark-mode .rc-member-list__user.active,
|
||||||
background: #5b5b5b;
|
body.dark-mode .rc-member-list__user:hover {
|
||||||
|
background-color: var(--color-darkest);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rc-user-info-details {
|
||||||
|
background-color: var(--color-dark-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode p.rc-user-info-details__info {
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .messages-container .footer,
|
||||||
|
body.dark-mode .content-background-color {
|
||||||
|
background-color: var(--header-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .message {
|
||||||
|
background-color: var(--color-darkest);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .message.new-day::after,
|
||||||
|
body.dark-mode .message .reactions>li,
|
||||||
|
body.dark-mode .border-component-color {
|
||||||
|
border-color: var(--rc-color-primary-lightest);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .message .reactions>li,
|
||||||
|
body.dark-mode .message .title .is-bot,
|
||||||
|
body.dark-mode .message .title .role-tag,
|
||||||
|
body.dark-mode .message.new-day::before {
|
||||||
|
background-color: var(--rc-color-primary-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .message.active,
|
||||||
|
body.dark-mode .message:hover {
|
||||||
|
background-color: var(--color-dark-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .message.editing {
|
||||||
|
background-color: var(--color-dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rc-message-box__container {
|
||||||
|
background-color: var(--message-box-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rc-old .rc-message-box .reply-preview {
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .message-actions,
|
||||||
|
body.dark-mode .rc-member-list__counter {
|
||||||
|
color: var(--color-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .background-transparent-darker-before::before {
|
||||||
|
background-color: var(--color-dark-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*body.dark-mode .background-info-font-color {
|
||||||
|
background-color: var(--color-dark-medium);
|
||||||
|
}*/
|
||||||
|
|
||||||
|
body.dark-mode .rc-modal,
|
||||||
|
body.dark-mode .rc-modal__footer {
|
||||||
|
background: var(--color-darkest);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rc-modal__content,
|
||||||
|
body.dark-mode .rc-modal__header {
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rc-button--outline {
|
||||||
|
border-color: var(--button-outline-color);
|
||||||
|
color: var(--button-outline-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rc-button--outline.js-close,
|
||||||
|
body.dark-mode .rc-button--nude.js-close {
|
||||||
|
border-color: var(--button-close-color);
|
||||||
|
color: var(--button-close-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rc-button--cancel,
|
||||||
|
body.dark-mode .rc-button--danger {
|
||||||
|
background-color: var(--button-cancel-color);
|
||||||
|
border-color: var(--button-cancel-color);
|
||||||
|
color: var(--button-primary-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .contextual-bar {
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
border-left: 2px solid var(--color-dark-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .contextual-bar__header {
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
border-bottom: 1px solid var(--color-dark-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .contextual-bar__content {
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
/***** Chat file list *****/
|
||||||
|
|
||||||
|
body.dark-mode .attachments__item:hover, .attachments__item:active {
|
||||||
|
background-color: var(--color-darkest);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .attachments__content:hover, .attachments__content:active {
|
||||||
|
color: var(--primary-font-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .attachments__name {
|
||||||
|
color: var(--color-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .attachments__name:hover, .attachments__name:active {
|
||||||
|
color: var(--color-light-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*****/
|
||||||
|
|
||||||
|
body.dark-mode .rc-popover__content {
|
||||||
|
background-color: var(--popover-background);
|
||||||
|
box-shadow: 0px 0px 2px var(--color-dark-20);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 .room-leader:hover {
|
||||||
|
background-color: var(--color-darkest);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .chat-now {
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .message-popup-title {
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************Code Highlights*****************/
|
||||||
|
|
||||||
|
body.dark-mode .code-colors {
|
||||||
|
background: var(--color-dark-100);
|
||||||
|
color: var(--color-gray-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .hljs-selector-id,
|
||||||
|
body.dark-mode .hljs-keyword {
|
||||||
|
color: var(--color-light-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .hljs-title {
|
||||||
|
color: var(--color-gray-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .hljs-literal,
|
||||||
|
body.dark-mode .hljs-number,
|
||||||
|
body.dark-mode .hljs-attr,
|
||||||
|
body.dark-mode .hljs-template-variable,
|
||||||
|
body.dark-mode .hljs-variable {
|
||||||
|
color: var(--color-dark-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .hljs-tag,
|
||||||
|
body.dark-mode .hljs-name {
|
||||||
|
color: var(--color-light-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .hljs-selector-tag {
|
||||||
|
color: var(--color-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .hljs-doctag,
|
||||||
|
body.dark-mode .hljs-string {
|
||||||
|
color: var(--color-red);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .hljs-attribute,
|
||||||
|
body.dark-mode .hljs-type,
|
||||||
|
body.dark-mode .hljs-number {
|
||||||
|
color: var(--color-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .hljs-addition {
|
||||||
|
background-color: #1e3a21;
|
||||||
|
}
|
||||||
|
body.dark-mode .hljs-deletion {
|
||||||
|
background-color: #472d2e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***** My Account *****/
|
||||||
|
|
||||||
|
body.dark-mode .rc-form-legend,
|
||||||
|
body.dark-mode .rc-form-label {
|
||||||
|
color: var(--primary-font-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .js-logout {
|
||||||
|
color: var(--primary-font-color);
|
||||||
|
border-color: var(--primary-font-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************Admin Panel******************/
|
||||||
|
|
||||||
|
.page-list a:not(.rc-button), .page-settings a:not(.rc-button) {
|
||||||
|
color: var(--primary-font-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .sidebar-flex__header {
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .sidebar-light {
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-accordion-item__title,
|
||||||
|
body.dark-mode .rcx-label__text,
|
||||||
|
body.dark-mode .rcx-field__label{
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .sidebar-flex__search .rc-input__element {
|
||||||
|
color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-input-box__wrapper {
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-box * .rcx-input-box {
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-table__cell {
|
||||||
|
color: var(--color-gray);
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-table__cell--align-end {
|
||||||
|
color: var(--color-gray);
|
||||||
|
background-color: var(--color-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rc-input__element:disabled{
|
||||||
|
background-color: var(--color-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .admin-table-row {
|
||||||
|
background-color: hsl(219, 16%, 25%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .sidebar-light .sidebar-item {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .admin-table-row:nth-child(even) {
|
||||||
|
background-color: hsl(219, 15%, 33%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .permissions-manager .permission-grid .id-styler {
|
||||||
|
color: var(--info-font-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-accordion-item__bar:hover {
|
||||||
|
background-color: var(--color-dark-30);
|
||||||
|
}
|
||||||
|
|
||||||
|
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-gray-lightest);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-table__cell {
|
||||||
|
color: var(--color-gray-lightest);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-button--primary:disabled {
|
||||||
|
color: var(--color-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .permissions-manager .permission-grid .role-name {
|
||||||
|
background: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rc-apps-marketplace .rc-table-content tbody .rc-table-tr:not(.table-no-click):not(.table-no-pointer):hover,
|
||||||
|
body.dark-mode .rc-apps-section .rc-table-content tbody .rc-table-tr:not(.table-no-click):not(.table-no-pointer):hover {
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rc-apps-marketplace .rc-table-content .rc-table-info .rc-apps-categories .rc-apps-category,
|
||||||
|
body.dark-mode .rc-apps-section .rc-table-content .rc-table-info .rc-apps-categories .rc-apps-category {
|
||||||
|
color: var(--primary-font-color);
|
||||||
|
background-color: var(--color-dark-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*body.dark-mode .rcx-box * .rcx-input-box,*/
|
||||||
|
body.dark-mode .rcx-box * .rcx-select {
|
||||||
|
/*color: var(--color-dark-medium);*/
|
||||||
|
background-color: var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .mail-messages__instructions {
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-tag--secondary {
|
||||||
|
background-color: var(--color-dark-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-table__cell--align-end {
|
||||||
|
color: var(--info-font-color) !important;
|
||||||
|
background-color: var(--color-dark-medium) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-box {
|
||||||
|
color: var(--info-font-color) !important;
|
||||||
|
background-color: var(--color-dark) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-table__cell--align-start {
|
||||||
|
color: var(--info-font-color) !important;
|
||||||
|
background-color: var(--color-dark-medium) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-button {
|
||||||
|
background-color: var(--color-dark-medium)
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-button--primary {
|
||||||
|
color: var(--info-font-color);
|
||||||
|
background-color: #095ad2
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-field__description code {
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .table-fake-th {
|
||||||
|
color: var(--info-font-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rc-input__element {
|
||||||
|
background-color: var(--color-dark-medium);
|
||||||
|
color: var(--info-font-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .rcx-check-box.is-focused,
|
||||||
|
body.dark-mode .rcx-check-box__input:checked+.rcx-check-box__fake,
|
||||||
|
body.dark-mode .rcx-check-box.is-focused,
|
||||||
|
body.dark-mode .rcx-check-box__input:indeterminate+.rcx-check-box__fake,
|
||||||
|
body.dark-mode .rcx-check-box__input:checked:focus+.rcx-check-box__fake,
|
||||||
|
body.dark-mode .rcx-check-box__input:indeterminate:focus+.rcx-check-box__fake,
|
||||||
|
body.dark-mode .rcx-radio-button.is-focused
|
||||||
|
body.dark-mode .rcx-radio-button__input:checked+.rcx-radio-button__fake,
|
||||||
|
body.dark-mode .rcx-radio-button__input:checked:focus+.rcx-radio-button__fake,
|
||||||
|
body.dark-mode .rcx-toggle-switch.is-focused
|
||||||
|
body.dark-mode .rcx-toggle-switch__input:checked+.rcx-toggle-switch__fake,
|
||||||
|
body.dark-mode .rcx-toggle-switch__input:checked:focus+.rcx-toggle-switch__fake {
|
||||||
|
background-color: #1d74f5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .CodeMirror {
|
||||||
|
background-color: var(--color-gray-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .CodeMirror-gutter {
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .setting-action {
|
||||||
|
border: var(--button-border-width) solid var(--info-font-color);
|
||||||
|
color: var(--info-font-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**************Login Page******************/
|
||||||
|
|
||||||
|
body.dark-mode section.full-page.color-tertiary-font-color {
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 .register-link-replacement {
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode #login-card {
|
||||||
|
background-color: var(--color-darkest);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**************Scrollbars******************/
|
||||||
|
body.dark-mode *::-webkit-scrollbar {
|
||||||
|
background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode *::-webkit-scrollbar-thumb {
|
||||||
|
background-color: rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode *::-webkit-scrollbar-corner {
|
||||||
|
background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/***** 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);
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue