Updated to latest version of CSS.
This commit is contained in:
parent
7e758c8909
commit
bef3fcc539
1 changed files with 321 additions and 40 deletions
347
custom.css
347
custom.css
|
|
@ -30,7 +30,8 @@ input, select, textarea {
|
|||
}
|
||||
|
||||
.rcx-icon--name-darkmode {
|
||||
height: .9em;
|
||||
height: 1em;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1372px) {
|
||||
|
|
@ -90,8 +91,6 @@ select,
|
|||
transition: opacity 300ms linear, color 150ms, background-color 150ms, border-color 150ms;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/******************************************
|
||||
*************Dark Mode Settings***********
|
||||
******************************************/
|
||||
|
|
@ -170,19 +169,57 @@ body.dark-mode {
|
|||
--rc-color-alert: var(--color-dark-red);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/******************************************
|
||||
*********Manual Dark Theme Overrides******
|
||||
******************************************/
|
||||
|
||||
|
||||
/***************Main Chat*****************/
|
||||
|
||||
/* Blockquote */
|
||||
body.dark-mode .rcx-css-1d5cod7 {
|
||||
background-color: var(--color-darkest) !important;
|
||||
}
|
||||
|
||||
body.dark-mode blockquote.rcx-attachment__details .rcx-box--full {
|
||||
color: var(--secondary-font-color);
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-css-11c35pn:hover .rcx-attachment__details,
|
||||
body.dark-mode .rcx-css-11c35pn:focus .rcx-attachment__details {
|
||||
background-color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
/* Attachements content */
|
||||
body.dark-mode .rcx-message-attachment .rcx-attachment__content .rcx-box--full {
|
||||
color: var(--primary-font-color);
|
||||
}
|
||||
|
||||
/* Pinned messages content */
|
||||
body.dark-mode .rcx-css-ntpg4f {
|
||||
color: var(--rc-color-primary) !important;
|
||||
}
|
||||
|
||||
/* Message "You joined a new private conversation with" */
|
||||
body.dark-mode .rcx-css-dlop43 {
|
||||
color: var(--rc-color-primary) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .main-content a {
|
||||
color: var(--color-light-blue);
|
||||
}
|
||||
|
||||
body.dark-mode .main-content .messages-box .wrapper {
|
||||
background-color: var(--color-darkest);
|
||||
}
|
||||
|
||||
body.dark-mode .mention-link--group {
|
||||
color: var(--mention-link-group-text-color) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .mention-link--me {
|
||||
color: var(--mention-link-me-text-color) !important;
|
||||
}
|
||||
|
||||
body.dark-mode select {
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
|
@ -195,6 +232,10 @@ body.dark-mode .sidebar-item > a {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
body.dark-mode .highlight-text {
|
||||
background-color: var(--color-blue);
|
||||
}
|
||||
|
||||
body.dark-mode .rc-switch__text {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
|
@ -311,17 +352,42 @@ body.dark-mode .background-transparent-darker-before::before {
|
|||
background-color: var(--color-dark-medium);
|
||||
}
|
||||
|
||||
/* User card */
|
||||
body.dark-mode .rcx-user-card {
|
||||
background-color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-user-card .rcx-button:not(.rcx-css-ue04py) {
|
||||
background-color: var(--color-dark-medium);
|
||||
border: none;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-user-card .rcx-button:hover {
|
||||
background-color: var(--color-dark-light);
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
|
||||
/*body.dark-mode .background-info-font-color {
|
||||
background-color: var(--color-dark-medium);
|
||||
}*/
|
||||
body.dark-mode .rcx-modal__inner,
|
||||
body.dark-mode .rcx-modal__footer {
|
||||
background: var(--color-dark);
|
||||
}
|
||||
|
||||
body.dark-mode .rc-modal,
|
||||
body.dark-mode .rc-modal__footer {
|
||||
body.dark-mode .rc-modal__footer,
|
||||
body.dark-mode .rc-modal {
|
||||
background: var(--color-darkest);
|
||||
}
|
||||
|
||||
body.dark-mode .rc-modal__content,
|
||||
body.dark-mode .rc-modal__header {
|
||||
body.dark-mode .rc-modal__header,
|
||||
body.dark-mode .rcx-modal__content,
|
||||
body.dark-mode .rcx-modal__inner,
|
||||
body.dark-mode .rcx-modal__header,
|
||||
body.dark-mode .rcx-modal__title {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
|
|
@ -357,6 +423,90 @@ body.dark-mode .contextual-bar__content {
|
|||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
body.dark-mode .rc-member-list__counter {
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
/**** Select / Dropdowns ****/
|
||||
|
||||
body.dark-mode .rcx-select {
|
||||
background-color: var(--rc-color-primary-darkest) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-options > .rcx-tile {
|
||||
background-color: var(--rc-color-primary-darkest) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-options .rcx-option,
|
||||
body.dark-mode .rcx-options .rcx-option--focus /* Temporary fix while focus is not refreshed */ {
|
||||
background-color: var(--rc-color-primary-darkest) !important;
|
||||
color: var(--color-white) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rc-popover__content .rcx-option:hover,
|
||||
/* body.dark-mode .rcx-options .rcx-option--focus, */ /* Temporary fix while focus is not refreshed */
|
||||
body.dark-mode .rcx-options .rcx-option--selected {
|
||||
background-color: var(--color-dark-light) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-options .rcx-option:hover,
|
||||
body.dark-mode .rcx-options .rcx-option--selected:hover {
|
||||
background-color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
/***** Buttons *****/
|
||||
|
||||
/* Regular button style */
|
||||
body.dark-mode .main-content .rcx-button:not(.rcx-button--ghost) { /* Default */
|
||||
background-color: var(--color-dark) !important;
|
||||
}
|
||||
body.dark-mode .main-content .rcx-button:is(.rcx-button--ghost, .rcx-button):hover { /* Hovered or selected */
|
||||
background-color: var(--color-darkest) !important;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-button {
|
||||
color: var(--info-font-color);
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-button--ghost:not(.rcx-button--square):hover {
|
||||
color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-button--primary {
|
||||
color: var(--info-font-color);
|
||||
background-color: #095ad2
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-button--primary:disabled {
|
||||
color: var(--color-gray);
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-button--danger {
|
||||
color: var(--rcx-button-colors-secondary-danger-color,var(--rcx-color-danger-500,#f5455c));
|
||||
}
|
||||
|
||||
/***** Right sidebar *****/
|
||||
|
||||
/* TODO : switch toggle */
|
||||
|
||||
body.dark-mode .rcx-vertical-bar {
|
||||
background-color: var(--rc-color-primary-background) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-css-136xdpx:hover, /* Thread list item */
|
||||
body.dark-mode .rcx-css-136xdpx:focus,
|
||||
body.dark-mode .rcx-css-1es44sn:hover, /* Files list item */
|
||||
body.dark-mode .rcx-css-1es44sn:focus {
|
||||
background-color: var(--rc-color-primary-dark);
|
||||
}
|
||||
|
||||
/* Targets unread message indicator in threads panel. */
|
||||
body.dark-mode button.rcx-contextual-message__follow + div.rcx-box--full {
|
||||
background-color: #1d74f5 !important;
|
||||
|
|
@ -435,7 +585,8 @@ body.dark-mode .hljs-name {
|
|||
color: var(--color-light-blue);
|
||||
}
|
||||
|
||||
body.dark-mode .hljs-selector-tag {
|
||||
body.dark-mode .hljs-selector-tag,
|
||||
body.dark-mode .hljs-subst {
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
|
|
@ -469,12 +620,66 @@ body.dark-mode .js-logout {
|
|||
border-color: var(--primary-font-color);
|
||||
}
|
||||
|
||||
/**************Admin Panel******************/
|
||||
/************** Admin panel & Account panel ******************/
|
||||
|
||||
.page-list a:not(.rc-button), .page-settings a:not(.rc-button) {
|
||||
color: var(--primary-font-color);
|
||||
}
|
||||
|
||||
/*body.dark-mode .simplebar-content > .rcx-box => will also modify sidebar background */
|
||||
body.dark-mode .simplebar-content > .rcx-css-fr02gd { /* main content */
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-css-txktj6 { /* Account settings page background */
|
||||
background-color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-css-1wm5na { /* Account settings page header title */
|
||||
color: var(--primary-font-color) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rc-scrollbars-container { /* Panels sidebar */
|
||||
background-color: var(--sidebar-background);
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-css-15hfnte { /* Panels sidebar header */
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-css-10ij0kz .rcx-box { /* Panels sidebar header text and button (with cross icon) */
|
||||
color: var(--primary-font-color) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-css-15hfnte .rcx-css-4pvxx3:hover { /* Panels sidebar button (with cross icon) hovered */
|
||||
color: var(--rc-color-primary-dark) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-css-1l00c5f,
|
||||
body.dark-mode .rcx-css-1ky5rco { /* Panels sidebar item */
|
||||
color: var(--rcx-sidebar-item-color,var(--rcx-color-foreground-hint,#9ea2a8)) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-css-1l00c5f.active { /* Panels sidebar item selected */
|
||||
background-color: rgba(108, 114, 122, 0.3);
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-css-1l00c5f:hover, .rcx-css-1l00c5f:focus, .rcx-css-1l00c5f.active:focus, .rcx-css-1l00c5f.active:hover { /* Panels sidebar item hovered */
|
||||
background-color: var(--color-darkest);
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-css-kyq2rf { /* Admin panel info & stats (Deployment, License, Usage) */
|
||||
background-color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-css-61di5s { /* Admin panel info & stats (Deployment, License, Usage) */
|
||||
color: var(--color-gray) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-select__item {
|
||||
color: var(--primary-font-color) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .sidebar-flex__header {
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
|
@ -499,18 +704,29 @@ body.dark-mode .rcx-input-box__wrapper {
|
|||
|
||||
body.dark-mode .rcx-box * .rcx-input-box {
|
||||
background-color: var(--color-dark);
|
||||
color: var(--rc-color-primary);
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-table__cell {
|
||||
color: var(--color-gray);
|
||||
color: var(--color-gray) !important;
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-table__cell--header {
|
||||
color: var(--color-gray-lightest) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-table__cell--align-end {
|
||||
color: var(--color-gray);
|
||||
background-color: var(--color-gray);
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-css-18up6l1,
|
||||
body.dark-mode .rcx-css-zvbm6,
|
||||
body.dark-mode .rcx-css-n6qrb5 { /* Table cells content text*/
|
||||
color: var(--primary-font-color) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .rc-input__element:disabled{
|
||||
background-color: var(--color-gray);
|
||||
}
|
||||
|
|
@ -542,14 +758,6 @@ 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);
|
||||
}
|
||||
|
|
@ -584,29 +792,28 @@ body.dark-mode .rcx-table__cell--align-end {
|
|||
background-color: var(--color-dark-medium) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .main-content .rcx-box {
|
||||
/* Apply info (white) font *everywhere* */
|
||||
body.dark-mode .rcx-css-ps0pgs, /* Channel name */
|
||||
body.dark-mode .rcx-room-header .rcx-box:not(.rcx-button-group):not(.rcx-button):not(.rcx-css-1fgkscl):not(.rcx-css-4pvxx3), /* omit buttons/icons (.rcx-css-1fgkscl is .rcx-icon parent) */
|
||||
body.dark-mode .rcx-vertical-bar .rcx-box:not(.rcx-button-group):not(.rcx-button):not(.rcx-css-1fgkscl):not(.rcx-css-4pvxx3) {
|
||||
color: var(--info-font-color) !important;
|
||||
background-color: var(--color-dark) !important;
|
||||
/*background-color: var(--color-darkest) !important;*/
|
||||
}
|
||||
|
||||
body.dark-mode .rcx-modal__backdrop {
|
||||
/* body.dark-mode .main-content .rcx-box {
|
||||
color: var(--info-font-color) !important;
|
||||
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;
|
||||
}
|
||||
|
||||
body.dark-mode .main-content .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);
|
||||
}
|
||||
|
|
@ -696,3 +903,77 @@ body.dark-mode .rcx-box--text-color-default,
|
|||
body.dark-mode .rcx-box--text-color-info {
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
/* Style the browser scroll bars to avoid visually clashing with the rest of Rocket.Chat in dark mode. */
|
||||
|
||||
/*
|
||||
body.dark-mode * {
|
||||
scrollbar-color: #777 transparent;
|
||||
}
|
||||
*/
|
||||
|
||||
body.dark-mode *::-webkit-scrollbar {
|
||||
width: .75rem;
|
||||
}
|
||||
|
||||
body.dark-mode *::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
body.dark-mode *::-webkit-scrollbar-thumb {
|
||||
background-color: #777;
|
||||
}
|
||||
|
||||
/* Firefox does the dimming on hover automatically. We emulate it for Webkit-based browsers. */
|
||||
body.dark-mode *::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
body.dark-mode *::-webkit-scrollbar-thumb:active {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
/***** Changes for 3.9.1 *****/
|
||||
|
||||
/* 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);
|
||||
} */
|
||||
|
||||
/* This CSS block is used to counter RocketChat's bug which crop the end of custom CSS. */
|
||||
.dummy-entry {
|
||||
color: whitesmoke;
|
||||
}
|
||||
Loading…
Reference in a new issue