rocketchat-dark.user.css

/* ==UserStyle==
@name        Rocket.Chat Dark Contrasted
@namespace   5jubs
@version     1.0.0
@homepageURL https://github.com/5jubsPRO/RocketChat-Dark
@updateURL   https://raw.githubusercontent.com/5jubsPRO/RocketChat-Dark/main/rocketchat-dark.user.css
@license     CC0 - Public Domain
@author      5jubs
==/UserStyle== */
/*! Rocket.Chat Dark v1.0.0 (2023-04-24) */
/*! Repository: https://github.com/5jubsPRO/RocketChat-Dark */
/*! License:    https://creativecommons.org/share-your-work/public-domain/cc0/ */
@-moz-document domain("rocket.chat"), domain("chat.deltasge.com.br") {
      /* --- SIDEBAR --- */
	  .rcx-sidebar {
        background-color: #000;
      }
      code {
          font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
      }

      /* --- NOVOS --- */
      .rcx-button--ghost {
        appearance: none;
        background-color: var(--rcx-button-colors-ghost-background-color,transparent);
        border: 2px solid transparent;
        border-color: var(--rcx-button-colors-ghost-border-color,transparent);
        border-radius: 2px;
        color: #fff;
      }
  
      .color-primary-font-color {
        color: #fff;
      }
  
      .rcx-css-cz4e1i {
        font-size: 1.125rem !important;
        color: #fff !important;
      }
  
      .rcx-css-ps0pgs {
        color: #fff !important;
        margin-inline: 0.25rem !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        letter-spacing: 0rem !important;
        line-height: 1.375rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
  
      .rcx-css-1d5cod7 {
        font-size: 0.875rem !important;
        font-weight: 400 !important;
        letter-spacing: 0rem !important;
        line-height: 1.25rem !important;
        color: #fff !important;
        background-color: #000 !important;
        padding-inline: 1rem !important;
        padding-block: 1rem !important;
        border-radius: 0.125rem !important;
        border-width: 0.125rem !important;
        border-style: solid !important;
        border-color: #141414 !important;
        border-inline-start-color: #141414 !important;
      }
  
      .rcx-css-11c35pn:hover .rcx-attachment__details, .rcx-css-11c35pn:focus .rcx-attachment__details {
        background: rgb(0, 0, 0) !important;
        border-color: rgb(158, 162, 168) !important;
        border-inline-start-color: rgb(158, 162, 168) !important;
      }
  
      .message-actions {
        position: absolute;
        z-index: 2;
        top: -28px;
        right: .4rem;
        box-sizing: border-box;
        padding: 2px;
        user-select: none;
        color: #fff;
        border: 2px solid #141414;
        border-radius: 4px;
        background: #000;
        font-size: 1.25rem;
      }
  
      .message-actions__button:hover, .message-actions__menu:hover {
        border-radius: 2px;
        background: #141414;
      }
  
      .rcx-divider {
        border: .0625rem solid var(--rcx-divider-color,var(--rcx-color-neutral-300,#141414));
        margin-bottom: .5rem;
        margin-top: .5rem;
      }
  
      .message.new-day::after {
        border-color: #141414;
      }
  
      /* --- ANTERIORES --- */
  
      .account-box .info {
          background-color: #000000 !important;
      }
  
      .side-nav .rooms-list {
          background-color: #000000 !important;
      }
  
      .users-typing {
          background-color: #000000 !important;
      }
  
      .side-nav .unread-rooms {
          background-color: #6D6D6D !important;
      }
  
      .side-nav .unread {
          background-color: #6D6D6D !important;
      }
  
      .side-nav .footer {
          background-color: #000000 !important;
      }
  
      .fixed-title {
          background-color: #000000 !important;
          color: white !important;
          border-bottom-color: #696969;
      }
  
      .messages-box {
          background-color: #333;
          background-color: #000000;
      }
  
      .messages-box ul {
          color: #CDCDCD;
      }
  
      .messages-box ul > li:nth-child(odd) {
          background-color: #000000;
      }
  
      .messages-box ul > li:nth-child(even) {
          background-color: #000000;
      }
  
      .message .user,
      .message .body {
          color: #D0D0D0;
      }
  
      div.body a {
          color: #94c3e0 !important;
          font-weight: bold;
      }
  
      .mention-link {
          color: #EFEFEF !important;
      }
  
      .message.new-day:before {
          background-color: #333 !important;
          color: #EEEEEE;
          font-size: 1.1em;
      }
  
      .message .user:hover {
          color: #EEEEEE;
      }
  
      .messages-container .footer {
          background-color: #000000 !important;
          border-top-color: #696969;
      }
  
      .messages-container .message-form > div > .file {
          background-color: #2b2c2f !important;
          border-color: #999 !important;
      }
  
      .messages-container .message-form textarea {
          background-color: #2b2c2f !important;
          border-color: #696969;
          color: #EEEEEE;
      }
  
      .icon-paper-plane,
      .send-button {
          background-color: #434343 !important;
      }
  
      .flex-tab-bar,
      .tab-button {
          background-color: #000000 !important;
          border-color: #24777a !important;
          color: #a2a2a2;
      }
  
      .flex-tab-bar {
          border-color: #757575 !important;
      }
  
      .message.new-day .day-divider {
          background-color: #000000;
      }
  
      .flex-tab .content > div,
      .content,
      .flex-tab .message.new-day .day-divider {
          background-color: #000000 !important;
          color: white;
      }
  
      .message.new-day .day-divider span,
      .flex-tab .message.new-day .day-divider span {
          background-color: #696969;
          color: white;
      }
  
      /* ---Message InputBox--- */
      .messages-container .message-form .stream-info {
          background: #000000;
      }
  
      .messages-container .message-form > .message-input > .file,
      .messages-container .message-form > .message-input .message-buttons,
      .messages-container .message-form > .message-input {
          color: #a2a2a2;
          background-color: #2b2c2f;
          border-color: #000000;
      }
  
      .border-component-color {
          border-color: #000000;
      }
  
      .message .info .is-bot,
      .message .info .role-tag,
      .user-view .info .role-tag {
          background-color: #3a61ec;
      }
  
      .list-view.uploaded-files-list i {
          color: #fff;
      }
  
      /* ---Make the code boxes dark--- */
      .hljs,
      code,
      .code-colors {
          background: #1f1f1f !important;
          color: #fff !important;
          border-color: #636363 !important;
      }
  
      /* ---Syntax Highlighting Patches--- */
      .hljs-deletion {
          background: #903a3a !important;
      }
  
      .hljs-addition {
          background: #2b842b !important;
      }
  
      .hljs-keyword,
      .css .rule .hljs-keyword,
      .hljs-winutils,
      .javascript .hljs-title,
      .nginx .hljs-title,
      .hljs-subst,
      .hljs-request,
      .hljs-status {
          color: #c5c5c5 !important;
      }
  
      .hljs-tag,
      .hljs-tag .hljs-title,
      .hljs-rules .hljs-property,
      .django .hljs-tag .hljs-keyword {
          color: #79a0fb !important;
      }
  
      .hljs-tag,
      .hljs-name,
      .hljs-attribute {
          color: #7b95ff !important;
      }
  
      .hljs-keyword,
      .hljs-selector-tag,
      .hljs-subst {
          color: #6d6d6d !important;
      }
  
      /* ---Fixed icons to make them more viewable on dark background--- */
      .message .message-dropdown ul li {
          color: #fbfbfb;
      }
  
      /* ---Made message edit options dark on selection and highlight--- */
      .message .message-dropdown ul li:hover,
      .message .message-dropdown ul li:first-child {
          background-color: #1d1c1c;
      }
  
      /* ---Prevent page from blasting white in your face when loading--- */
      .main-content,
      .cms-page,
      .page-container {
          background-color: #000000;
      }
  
      .messages-container .message-form .formatting-tips {
          color: #fff;
      }
  
      /* ---Fix Dark Links--- */
      a {
          color: #007ACC;
      }
  
      a:hover {
          color: #fff;
      }
  
      /* ---Message box--- */
      .rc-message-box__container {
          border-color: #2a2e33 !important;
      }
  
      /* ---Edit message box--- */
      .messages-box .editing .body,
      .rc-message-box__container.editing {
          background-color: #30333a;
          color: white;
      }
  
      /* ------Fix Admin Area------ */
      .flex-tab .content > div,
      .content,
      .flex-tab .message.new-day .day-divider,
      .rc-header,
      .rc-header__wrap,
      .contextual-bar__content,
      .contextual-bar__header {
          background-color: #000000 !important;
          color: #a2a3a5;
      }
  
      .rc-button {
          color: #a2a2a2;
          border-color: #a2a2a2;
      }
  
      .rc-header__name {
          color: white;
          font-weight: bold;
      }
  
      /* They used some actual black icons here afaik so set them all black and invert */
      .rc-icon {
          color: black !important;
          filter: invert(90%);
      }
  
      .statistics-table {
          border-color: #696969;
      }
  
      .statistics-table tr {
          background-color: #000000;
      }
  
      .statistics-table tr:nth-of-type(even) {
          background-color: #24282d;
      }
  
      .page-settings .section {
          background-color: #000000;
          color: white;
      }
  
      .page-settings .section .section-content .input-line > label {
          color: white;
      }
  
      .page-list .list table tbody tr:nth-child(odd) {
          background-color: #282c31;
      }
  
      .page-list .list table tbody tr.row-link:hover {
          background-color: #4c4c4c;
      }
  
      .page-list a,
      .page-settings a {
          color: #fff;
      }
  
      /* ---The most 1337 Terminal you will ever see--- */
      .terminal {
          background-color: #000000 !important;
          color: #2dda2d !important;
      }
  
      /* ---Info Page--- */
      .page-container table tr:nth-of-type(even) {
          background-color: rgb(30, 33, 37);
      }
  
      .page-container table th {
          background-color: #25282b;
      }
  
      .page-container table tr:hover td {
          background-color: #3b3b44;
      }
  
      .page-container table tr {
          background-color: rgb(28, 30, 34);
      }
  
      /* ---Searchbox on Rooms Admin--- */
      textarea,
      select,
      input[type='text'],
      input[type='number'],
      input[type='email'],
      input[type='url'],
      input[type='password'],
      input[type='time'] {
          border-color: #696969;
          background-color: #000000;
          color: white;
          border-radius: 0px;
      }
  
      /* ---Admin Intergrations Page--- */
      .admin-integrations-new-panel .admin-integrations-new-item:hover {
          background-color: #4c4c4c;
      }
  
      .admin-integrations-new-panel .admin-integrations-new-item {
          color: #fff;
      }
  
      .input-line > label {
          color: #fff;
      }
  
      .page-settings .section .section-content .input-line input {
          color: #fff;
          background-color: #000000 !important;
      }
  
      .page-settings .section .section-title {
          color: #a2a2a2;
      }
  
      .page-settings .content {
          color: #9a9a9a;
      }
  
      /* ---Disabled Input Boxes--- */
      input[readonly],
      input[disabled],
      textarea[readonly],
      textarea[disabled] {
          background-color: #757575 !important;
      }
  
      /* ---Alert--- */
      .page-settings .section .section-content .input-line .settings-alert {
          background-color: #000000;
          border: 1px solid #ff0000;
          color: red;
      }
  
      /* ---Permission Table--- */
      .permissions-manager .permission-grid thead tr {
          background-color: #4c4c4c;
      }
  
      .permissions-manager .permission-grid td * {
          color: #fff;
      }
  
      /* ---Buttons--- */
      .button,
      .button.secondary {
          background-color: #2b2e33;
          color: #adadad;
      }
  
      .button:hover,
      .button.secondary:hover {
          background-color: #1a1c1f;
      }
  
      .messages-container .message-form > .message-input > .file:hover,
      .messages-container .message-form > .message-input .message-buttons:hover {
          color: white;
          background-color: #000000;
      }
  
      /* ---Video Input Popup Box--- */
      .vrec-dialog {
          background-color: #000000;
      }
  
      /* ---Unread Message Bar---*/
      .container-bars .unread-bar {
          background-color: #333;
          color: #068fe4;
      }
  
      /* ---Emoji Picker--- */
      .emoji-picker {
          background-color: #000000;
      }
  
      .emoji-picker .filter > ul > li,
      .emoji-picker .filter > ul > li:hover {
          border-bottom: 2px solid #000000;
      }
  
      .emoji-picker .filter > ul > li.active {
          border-bottom: 2px solid #ffffff;
      }
  
      /* ---Emoji Suggestion Box--- */
      .content-background-color {
          background-color: #000000;
      }
  
      .secondary-background-color {
          background-color: #2b2c2f;
      }
  
      /* ---Avatar Selection--- */
      .avatar-suggestion-item {
          background-color: #000000;
          border-color: #696969;
      }
  
      /* ---Fix white login page text--- */
      #login-card .input-text input,
      #login-card .input-text select {
          color: black;
      }
  
      /* ---Sweet Alert--- */
      .sweet-alert {
          background-color: #292929;
      }
  
      .sweet-alert h2 {
          color: #ffffff;
      }
  
      input,
      select,
      textarea {
          color: #bfb9b9;
      }
  
      .sweet-alert button.confirm {
          background-color: #53c5f9 !important;
      }
  
      /* ---Late 2017 patches for Rocketchat Update--- */
      .flex-tab-bar .tab-button-icon {
          color: #a7a7a7 !important;
          fill: #a7a7a7 !important;
      }
  
      .rc-old .page-settings .section {
          background-color: #000000 !important;
      }
  
      .sidebar-light {
          background-color: #000000 !important;
      }
  
      .sidebar-light .sidebar-item,
      .sidebar-flex__title {
          color: #b7b7b7 !important;
      }
  
      .sidebar-flex__search .rc-input__element {
          background-color: #141619 !important;
      }
  
      .flex-tab .content,
      .flex-tab .user-view,
      .flex-tab .list-view {
          background-color: #000000;
      }
  
      .-autocomplete-container {
          background-color: #000000 !important;
          color: #ffffff !important;
      }
  
      .rc-popover__content {
          background-color: #1C1E22 !important;
      }
  
      .rc-popover__item,
      .rc-popover__title {
          color: white !important;
      }
  
      .alert-warning {
          color: #ff5656;
          background-color: #151515;
      }
  
      .pending-border {
          border-color: #666666;
      }
  
      .rc-switch__text,
      .rc-input__title {
          color: white !important;
      }
  
      .rc-old .popup-item,
      .rc-old .message-popup-title {
          color: #dadada !important;
      }
  
      .rc-old .popup-item.selected {
          color: #fff !important;
      }
  
      .popup-user-status-offline,
      .status-offline::after,
      .user-image.status-offline .avatar::after {
          background-color: rgba(148, 148, 148, 0.49) !important;
      }
  
      /* ---Member list counter--- */
      .rc-member-list__counter {
          color: #b9b9b9;
      }
  
      /* ---Table hover item--- */
      .rc-member-list__user.active,
      .rc-member-list__user:hover,
      .rc-table-body .rc-table-tr:hover {
          background-color: #000000;
      }
  
      /* ---User info details box--- */
      .rc-user-info-details {
          background-color: #000000;
      }
  
      .chip-container__item,
      .chip-container li {
          background-color: rgb(58, 97, 236) !important;
          color: white !important;
      }
  
      .rc-user-info-details__info {
          color: #a2a3a5 !important;
      }
  
      /* ---Table text colour--- */
      .rc-table {
          color: #bdbfc1 !important;
      }
  
      .content-background-color {
          background-color: #000;
      }
      
      /* --- SIDEBAR --- */
      .rcx-sidebar {
        background-color: #000;
      }
      code {
          font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
      }
}