/* ==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; } }