Last active
December 19, 2017 23:03
-
-
Save xfalcox/d38c242339a591575a048dd35f70b8da to your computer and use it in GitHub Desktop.
Rocket Chat Dark Theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // From https://github.com/0x0049/Rocket.Chat.Dark/blob/master/dist/dark.css | |
| function css() {var css = ` | |
| .primary-background-color { | |
| background-color: transparent; | |
| } | |
| .side-nav .footer { | |
| display: none; | |
| } | |
| .side-nav .rooms-list, | |
| .account-box .options, | |
| .flex-nav .content { | |
| height: 100%; | |
| } | |
| .flex-nav .content { | |
| top: 0; | |
| padding-top: 70px; | |
| padding-bottom: 10px; | |
| } | |
| .formatting-tips { | |
| display: none !important; | |
| } | |
| .full-page .logo > img, | |
| .login-terms { | |
| display: none !important; | |
| } | |
| .role-tag[data-role="Admin"] { | |
| display: none !important; | |
| } | |
| body { | |
| color: #c2c3c5; | |
| background-color: #36393e; | |
| } | |
| .color-primary-font-color { | |
| color: #c2c3c5; | |
| } | |
| .secondary-font-color { | |
| color: #fff; | |
| } | |
| .color-tertiary-font-color { | |
| color: #c2c3c5; | |
| } | |
| #rocket-chat .main-content { | |
| background-color: #36393e; | |
| } | |
| .burger i { | |
| background-color: #c2c3c5; | |
| opacity: 1 !important; | |
| } | |
| .button { | |
| line-height: 100%; | |
| font-weight: 700; | |
| font-size: 12px; | |
| } | |
| .button, | |
| .button.clean, | |
| .side-nav .button, | |
| .button.primary, | |
| .sweet-alert button.confirm { | |
| background-color: #7289da; | |
| color: #e2e7f7; | |
| } | |
| .button[disabled], | |
| .button.clean[disabled], | |
| .side-nav .button[disabled], | |
| .button.primary[disabled], | |
| .sweet-alert button.confirm[disabled] { | |
| background-color: #54618c; | |
| color: #8c909a; | |
| } | |
| .button:hover, | |
| .button.clean:hover, | |
| .side-nav .button:hover, | |
| .button.primary:hover, | |
| .sweet-alert button.confirm:hover { | |
| color: #e2e7f7; | |
| background-color: #5873d3; | |
| } | |
| .sweet-alert button.confirm { | |
| background-color: #7289da !important; | |
| box-shadow: none !important; | |
| } | |
| .sweet-alert button.confirm:hover { | |
| background-color: #5873d3 !important; | |
| } | |
| .button.cancel-direct-message, | |
| .button.cancel-channel, | |
| .button.delete, | |
| .button.remove, | |
| .button.red, | |
| .button.danger, | |
| .sweet-alert button.cancel { | |
| background-color: #bc2031; | |
| color: #f1d2d5; | |
| } | |
| .button.cancel-direct-message[disabled], | |
| .button.cancel-channel[disabled], | |
| .button.delete[disabled], | |
| .button.remove[disabled], | |
| .button.red[disabled], | |
| .button.danger[disabled], | |
| .sweet-alert button.cancel[disabled] { | |
| background-color: #792c37; | |
| color: #938589; | |
| } | |
| .button.cancel-direct-message:hover, | |
| .button.cancel-channel:hover, | |
| .button.delete:hover, | |
| .button.remove:hover, | |
| .button.red:hover, | |
| .button.danger:hover, | |
| .sweet-alert button.cancel:hover { | |
| background-color: #a91d2c; | |
| color: #e2e7f7; | |
| } | |
| .color-error-contrast { | |
| color: #f1d2d5; | |
| } | |
| .button.lightblue { | |
| background-color: #02acec; | |
| } | |
| .button.lightblue:hover { | |
| background-color: #029bd4; | |
| } | |
| .button.secondary { | |
| background-color: #eee; | |
| color: #444; | |
| } | |
| .button.secondary:hover { | |
| background-color: #d6d6d6; | |
| } | |
| .button.button-fullscreen { | |
| background-color: transparent; | |
| color: #888; | |
| } | |
| .button.button-fullscreen:hover { | |
| background-color: transparent; | |
| color: #e2e7f7; | |
| } | |
| .loading > div { | |
| background-color: #888; | |
| } | |
| a { | |
| color: #7289da; | |
| } | |
| a:hover { | |
| color: #5873d3; | |
| } | |
| .avatar { | |
| box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.5); | |
| } | |
| .avatar .avatar-image { | |
| border-radius: 4px; | |
| } | |
| .side-nav .rooms-list, | |
| .flex-tab-bar { | |
| background-color: #2e3136; | |
| } | |
| .border-component-color { | |
| border-color: transparent; | |
| } | |
| .account-box .options { | |
| background-color: #292c31; | |
| } | |
| .account-box .options .status.online:after { | |
| background-color: #3bb5e5; | |
| border-color: #22abe2; | |
| } | |
| .account-box .options .status.away:after { | |
| background-color: #fcb316; | |
| border-color: #f3a703; | |
| } | |
| .account-box .options .status.busy:after { | |
| background-color: #f04747; | |
| border-color: #ee2a2a; | |
| } | |
| .account-box .options button, | |
| .account-box .options a { | |
| color: #aaa; | |
| background-color: transparent; | |
| } | |
| .account-box .options button:hover, | |
| .account-box .options a:hover { | |
| background-color: #25272b; | |
| color: #eee; | |
| } | |
| .account-box .info { | |
| background-color: #282b30; | |
| border-bottom: 1px solid #1c1e22; | |
| } | |
| .account-box .info h4 { | |
| color: #eaeaea; | |
| } | |
| .account-box .info.status-online .thumb:after, | |
| .popup-user-status-online { | |
| background-color: #3bb5e5; | |
| border-color: #22abe2; | |
| } | |
| .account-box .info.status-away .thumb:after, | |
| .popup-user-status-away { | |
| background-color: #fcb316; | |
| border-color: #f3a703; | |
| } | |
| .account-box .info.status-busy .thumb:after, | |
| .popup-user-status-busy { | |
| background-color: #f04747; | |
| border-color: #ee2a2a; | |
| } | |
| .status-offline, | |
| .icon-at.status-offline { | |
| color: #cccdce; | |
| } | |
| .status-online, | |
| .icon-at.status-online { | |
| color: #3bb5e5; | |
| } | |
| .user-image.status-online .avatar:after { | |
| background-color: #3bb5e5; | |
| border-color: #22abe2; | |
| } | |
| .user-image.status-away .avatar:after { | |
| background-color: #fcb316; | |
| border-color: #f3a703; | |
| } | |
| .user-image.status-busy .avatar:after { | |
| background-color: #d30230; | |
| border-color: #be022b; | |
| } | |
| .side-nav { | |
| border-right: 1px solid #313338; | |
| box-shadow: 1px 0 2px -1px rgba(0,0,0,0.5); | |
| } | |
| .side-nav a { | |
| transition: none; | |
| } | |
| .side-nav:before { | |
| display: none; | |
| } | |
| .side-nav .header { | |
| background-color: #292c31; | |
| } | |
| .side-nav .header.hover .account-box .info h4, | |
| .side-nav .header:hover .account-box .info h4 { | |
| color: #fff; | |
| } | |
| .side-nav > .arrow:before, | |
| .side-nav > .arrow:after { | |
| background-color: #888; | |
| } | |
| .side-nav > .arrow:hover:before, | |
| .side-nav > .arrow:hover:after, | |
| .side-nav > .arrow.hover:before, | |
| .side-nav > .arrow.hover:after { | |
| background-color: #acacac; | |
| } | |
| .side-nav h3 { | |
| font-weight: 700; | |
| color: #abacae; | |
| } | |
| .side-nav ul a { | |
| color: #a0a2a4; | |
| } | |
| .side-nav .status-offline { | |
| color: #a0a2a4; | |
| } | |
| .side-nav .status-online { | |
| color: #357996; | |
| } | |
| .side-nav .status-away { | |
| color: #9f7824; | |
| } | |
| .side-nav .status-busy { | |
| color: #983d3f; | |
| } | |
| .side-nav .more { | |
| color: #6c6e72; | |
| } | |
| .side-nav h3.active { | |
| color: #fff; | |
| } | |
| .side-nav ul a { | |
| padding-left: 10px; | |
| } | |
| .side-nav ul a:hover { | |
| background-color: #292c31; | |
| } | |
| .side-nav ul li.active { | |
| background-color: transparent !important; | |
| } | |
| .side-nav ul li.active a { | |
| background-color: #292c31; | |
| color: #fff; | |
| } | |
| .side-nav ul li.active .status-offline { | |
| color: #cacbcc; | |
| } | |
| .side-nav ul li.active .status-online { | |
| color: #3bb5e5; | |
| } | |
| .side-nav ul li.active .status-away { | |
| color: #fcb316; | |
| } | |
| .side-nav ul li.active .status-busy { | |
| color: #f04747; | |
| } | |
| .side-nav ul li.has-alert .name, | |
| .side-nav ul li.has-alert .icon-lock, | |
| .side-nav ul li.has-alert .icon-hash { | |
| color: #3bb5e5 !important; | |
| } | |
| .main-content .loading-animation > div { | |
| background-color: #c2c3c5; | |
| } | |
| .main-content header { | |
| border-bottom: 1px solid #313338; | |
| background-color: #36393e; | |
| } | |
| .button.join { | |
| margin-left: 10px; | |
| } | |
| .messages-container { | |
| border: none; | |
| } | |
| .messages-container .footer { | |
| background-color: #36393e; | |
| padding-top: 12px; | |
| } | |
| .messages-container .message-form .stream-info { | |
| color: #888; | |
| height: 23px; | |
| } | |
| .messages-container .message-form textarea { | |
| background-color: #424449; | |
| color: #bbb; | |
| border: 2px solid #4a4c51; | |
| border-right: none; | |
| } | |
| .messages-container .message-form textarea.editing { | |
| background-color: #1a5066; | |
| } | |
| .messages-container .message-form > .message-input { | |
| border: none; | |
| } | |
| .messages-container .message-form > .message-input > .file, | |
| .messages-container .message-form > .message-input > .share-items > .message-buttons, | |
| .messages-container .message-form > .message-input > .message-buttons { | |
| background-color: #2e3136; | |
| border: 1px solid #292c31; | |
| color: #888; | |
| height: auto; | |
| } | |
| .messages-container .message-form > .message-input > .file:hover, | |
| .messages-container .message-form > .message-input > .share-items > .message-buttons:hover, | |
| .messages-container .message-form > .message-input > .message-buttons:hover { | |
| background-color: #292c31; | |
| color: #949494; | |
| } | |
| .messages-container .message-form .users-typing { | |
| background-color: transparent; | |
| } | |
| .flex-nav .content { | |
| background-color: #2e3136; | |
| } | |
| .flex-nav .content h4 { | |
| font-weight: 700; | |
| margin-bottom: 15px; | |
| } | |
| .flex-nav footer { | |
| background-color: #292c31; | |
| } | |
| .flex-nav header { | |
| background-color: #292c31; | |
| } | |
| .side-nav .footer { | |
| background-color: #292c31; | |
| } | |
| textarea, | |
| select, | |
| input[type='text'], | |
| input[type='number'], | |
| input[type='email'], | |
| input[type='url'], | |
| input[type='password'], | |
| .flex-nav .input-line input[type='text'], | |
| .flex-nav .input-line input[type='password'], | |
| .flex-nav .input-line select { | |
| background-color: #424449; | |
| color: #bbb; | |
| border: 1px solid transparent; | |
| } | |
| textarea:focus, | |
| select:focus, | |
| input[type='text']:focus, | |
| input[type='number']:focus, | |
| input[type='email']:focus, | |
| input[type='url']:focus, | |
| input[type='password']:focus, | |
| .flex-nav .input-line input[type='text']:focus, | |
| .flex-nav .input-line input[type='password']:focus, | |
| .flex-nav .input-line select:focus { | |
| border-color: #1a5066; | |
| } | |
| input[type="button"] { | |
| border: none; | |
| } | |
| #rocket-chat { | |
| background-color: #36393e; | |
| } | |
| .user-view .info .role-tag { | |
| background-color: #7289da; | |
| } | |
| .message { | |
| border-top: 1px solid #3e4045; | |
| padding-top: 20px; | |
| margin-top: 16px; | |
| } | |
| .message a { | |
| color: #7289da; | |
| } | |
| .message a:hover { | |
| color: #5873d3; | |
| } | |
| .message .user { | |
| color: #fafafa; | |
| } | |
| .message .user:hover { | |
| color: #fff; | |
| } | |
| .message .body { | |
| color: #c2c3c5; | |
| } | |
| .message .info .is-bot, | |
| .message .info .role-tag { | |
| background-color: #7289da; | |
| color: #fff; | |
| } | |
| .message .info .role-tag { | |
| margin-right: 6px; | |
| } | |
| .message.sequential { | |
| border-top: none; | |
| padding-top: 0; | |
| margin-top: 0; | |
| } | |
| .message.editing .body { | |
| background-color: #1a5066; | |
| color: #bacad1; | |
| } | |
| .message.system .body { | |
| color: #9a9c9f; | |
| } | |
| .message:hover { | |
| background-color: transparent; | |
| } | |
| .message .message-dropdown { | |
| background-color: #2e3136; | |
| } | |
| .message .message-dropdown ul li { | |
| color: #999; | |
| } | |
| .message .message-dropdown ul li:first-child { | |
| background-color: #2e3136; | |
| border-right-color: #292c31; | |
| } | |
| .message .message-dropdown ul li:hover { | |
| background-color: #292c31; | |
| } | |
| .messages-box { | |
| border-bottom: 1px solid #303337; | |
| box-shadow: 0 1px 2px -1px #424449; | |
| } | |
| .messages-box .start { | |
| color: #888; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| font-size: 12px; | |
| margin: 12px 0 13px 0; | |
| } | |
| .message.new-day { | |
| padding-top: 50px; | |
| border-top: none; | |
| margin-top: 0; | |
| } | |
| .message.new-day:before { | |
| color: #54565a; | |
| background-color: #36393e; | |
| top: 13px; | |
| z-index: 2; | |
| } | |
| .message.new-day:after { | |
| border-color: #3e4045; | |
| top: 23px; | |
| } | |
| select { | |
| cursor: pointer; | |
| } | |
| .flex-tab-bar { | |
| border-left: 1px solid #313338; | |
| box-shadow: -1px 0 2px -1px rgba(0,0,0,0.5); | |
| } | |
| .flex-tab-bar .tab-button:hover, | |
| .flex-tab-bar .tab-button.active { | |
| background-color: #202226; | |
| } | |
| .flex-tab-container .flex-tab { | |
| background-color: #292c31; | |
| } | |
| .flex-tab-container .flex-tab .close-flex-tab > span { | |
| background-color: transparent; | |
| } | |
| .flex-tab-container .flex-tab .close-flex-tab > span > i { | |
| border: none; | |
| color: #c2c3c5; | |
| font-size: 15px; | |
| transition: color 100ms ease-in-out; | |
| } | |
| .flex-tab-container .flex-tab .close-flex-tab > span > i:hover { | |
| color: #fff; | |
| } | |
| .flex-tab-container .flex-tab .content { | |
| background-color: #292c31; | |
| box-shadow: -1px 0 3px 0 rgba(0,0,0,0.2); | |
| } | |
| .flex-tab-container .flex-tab .content > div { | |
| background-color: #292c31; | |
| } | |
| .flex-tab-container .flex-tab .control { | |
| background-color: transparent; | |
| } | |
| .flex-tab-container .flex-tab .message.new-day:before { | |
| background-color: #292c31; | |
| } | |
| .flex-tab-container .flex-tab .day-divider { | |
| color: #777; | |
| background-color: #292c31; | |
| } | |
| .flex-tab-container .flex-tab .day-divider:before { | |
| border-bottom-color: rgba(255,255,255,0.06); | |
| } | |
| .flex-tab-container .flex-tab .day-divider span { | |
| background-color: #292c31; | |
| } | |
| .message .day-divider { | |
| height: 40px; | |
| } | |
| .message .day-divider:before { | |
| top: 20px; | |
| } | |
| blockquote:before { | |
| background-color: #26282b; | |
| } | |
| .attachment .attachment-block .attachment-block-border { | |
| background-color: #26282b; | |
| } | |
| .attachment .attachment-title > a { | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| font-size: 12px; | |
| } | |
| .attachment .attachment-download-icon { | |
| background-color: #2e3136; | |
| color: #888; | |
| border-color: #2c2f33; | |
| } | |
| .attachment .attachment-download-icon:hover { | |
| background-color: #292c31; | |
| color: #949494; | |
| border-color: #292c31; | |
| } | |
| .message a[class^="icon-"] { | |
| color: #888; | |
| } | |
| .message a[class^="icon-"]:hover { | |
| color: #949494; | |
| } | |
| .emoji-picker { | |
| background-color: #2e3136; | |
| } | |
| .emoji-picker .emojis .emoji-list li:hover { | |
| background-color: #7a7a7a; | |
| } | |
| .emoji-picker .filter > ul > li { | |
| border-bottom-color: #2e3136; | |
| } | |
| .emoji-picker .filter > ul > li .category-link i { | |
| color: #888; | |
| } | |
| .emoji-picker .filter > ul > li:hover { | |
| border-bottom-color: #888; | |
| } | |
| .emoji-picker .filter > ul > li.active { | |
| border-bottom-color: #3bb5e5; | |
| } | |
| .emoji-picker .filter > ul > li.active .category-link i { | |
| color: #eee; | |
| } | |
| .emoji-picker .filter > ul > li.change-tone { | |
| padding-right: 4px; | |
| border-bottom-color: transparent; | |
| } | |
| .emoji-picker .filter > ul > li.change-tone .current-tone, | |
| .emoji-picker .filter > ul > li.change-tone .tone-selector span { | |
| width: 15px; | |
| height: 15px; | |
| } | |
| .emoji-picker .filter > ul > li.change-tone .tone-selector { | |
| background-color: #272a2e; | |
| } | |
| .input-line.search .icon-search, | |
| .input-line.search .icon-right-open-small, | |
| .input-line.search .icon-sort-alt-up, | |
| .input-line.search .icon-lock, | |
| .input-line.search .icon-comment { | |
| color: #888; | |
| } | |
| .emoji-picker-icon { | |
| color: #666; | |
| } | |
| code, | |
| .code-colors { | |
| background-color: #2e3136; | |
| border-color: #2c2f33; | |
| border-radius: 2px; | |
| color: #c2c3c5; | |
| font-weight: 400; | |
| } | |
| code.inline { | |
| padding: 0.15em 0.5em; | |
| } | |
| pre { | |
| display: block; | |
| } | |
| .list-view >.title .see-all { | |
| text-decoration: none; | |
| color: #888; | |
| } | |
| .list-view >.title .see-all:hover { | |
| color: #fff; | |
| } | |
| .list-view .list { | |
| color: #eee; | |
| } | |
| .list-view .list.lines { | |
| margin-left: 15px; | |
| } | |
| .control, | |
| .list input[type="text"].editing { | |
| margin-bottom: 15px; | |
| } | |
| .list-view.uploaded-files-list a.file-name { | |
| color: #7289da; | |
| border-bottom-color: #42454a; | |
| } | |
| .list-view.uploaded-files-list a.file-name:hover { | |
| color: #5873d3; | |
| text-decoration: none; | |
| } | |
| .list-view.uploaded-files-list i { | |
| color: #888; | |
| } | |
| .list-view.uploaded-files-list i.file-download:hover { | |
| color: #7289da; | |
| } | |
| .load-more-loading { | |
| margin-left: 15px; | |
| } | |
| .list-view .list.lines .load-more-loading { | |
| margin-left: 0; | |
| } | |
| .side-nav .unread { | |
| background-color: #387791; | |
| border: none; | |
| color: #fff; | |
| } | |
| .first-unread .body::before { | |
| height: 1px; | |
| margin-left: -20px; | |
| background-color: transparent; | |
| z-index: 1; | |
| top: -1px; | |
| } | |
| .first-unread .body::after { | |
| left: initial; | |
| top: -8px; | |
| right: 10px; | |
| color: transparent; | |
| background-color: transparent; | |
| z-index: 2; | |
| } | |
| .first-unread.first-unread-opaque .body::before { | |
| background-color: #387791; | |
| } | |
| .first-unread.first-unread-opaque .body::after, | |
| .first-unread.first-unread-opaque:before { | |
| color: #387791; | |
| background-color: #36393e; | |
| } | |
| .first-unread.sequential.message { | |
| padding-top: 0; | |
| } | |
| .new-day.first-unread .body::before { | |
| top: 23px; | |
| } | |
| .new-day.first-unread .body::after { | |
| top: 16px; | |
| } | |
| .container-bars .unread-bar { | |
| background-color: #1a5066; | |
| } | |
| .message-popup, | |
| .message-popup.search-results-list { | |
| background-color: #2e3136; | |
| color: #888; | |
| } | |
| .message-popup-title { | |
| background-color: #2c2f33; | |
| border-color: #292c31; | |
| color: #acacac; | |
| font-weight: 700; | |
| } | |
| .popup-item.selected { | |
| color: #fff; | |
| background-color: #1a5066; | |
| } | |
| .message-popup.search-results-list { | |
| height: 100vh; | |
| } | |
| .toolbar-search__input { | |
| padding: 2px 15px !important; | |
| } | |
| .toolbar-search__buttons i { | |
| color: #888; | |
| } | |
| .toolbar-search__buttons i:hover { | |
| color: #acacac; | |
| } | |
| .input-line > span, | |
| .input-line > label, | |
| .flex-nav .input-line label { | |
| display: block; | |
| margin-bottom: 7px; | |
| } | |
| .input.checkbox.toggle label:before { | |
| background-color: #bc2031; | |
| } | |
| .input.checkbox.toggle label:hover:before { | |
| background-color: #a91d2c; | |
| } | |
| .input.checkbox.toggle input:checked + label:before, | |
| .flex-nav .input.checkbox.toggle input:checked + label:before { | |
| background-color: #43b581; | |
| } | |
| .background-component-color, | |
| .upload-progress-progress { | |
| background-color: #1a5066; | |
| color: #d1dce0; | |
| } | |
| .background-component-color button, | |
| .upload-progress-progress button { | |
| color: #d1dce0; | |
| } | |
| .background-component-color button:hover, | |
| .upload-progress-progress button:hover { | |
| color: #fff; | |
| } | |
| .background-primary-action-color { | |
| background-color: #1a5066; | |
| color: #d1dce0; | |
| } | |
| .sweet-alert { | |
| background-color: #2e3136; | |
| } | |
| .sweet-alert p { | |
| color: #888; | |
| } | |
| .sweet-alert h2 { | |
| color: #fff; | |
| } | |
| .sweet-alert input { | |
| border-color: #3e4045; | |
| color: #888; | |
| } | |
| .sweet-alert input:focus { | |
| border-color: #1a5066; | |
| box-shadow: none; | |
| color: #eee; | |
| } | |
| .sweet-alert .sa-icon.sa-success::before, | |
| .sweet-alert .sa-icon.sa-success::after { | |
| background-color: #2e3136; | |
| } | |
| .sweet-alert .sa-icon.sa-success .sa-fix { | |
| background-color: #2e3136; | |
| } | |
| .alert-warning { | |
| background-color: #faa61a; | |
| border: none; | |
| color: #7d530d; | |
| } | |
| input[readonly], | |
| input[disabled], | |
| textarea[readonly], | |
| textarea[disabled], | |
| select[disabled] { | |
| background-color: #303337 !important; | |
| } | |
| ::-webkit-input-placeholder { | |
| color: #888 !important; | |
| } | |
| :-moz-placeholder { | |
| color: #888 !important; | |
| } | |
| ::-moz-placeholder { | |
| color: #888 !important; | |
| } | |
| :-ms-input-placeholder { | |
| color: #888 !important; | |
| } | |
| .CodeMirror-scrollbar-filler, | |
| .CodeMirror-gutter-filler { | |
| background-color: rgba(0,0,0,0.05) !important; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background-color: #2e3136; | |
| } | |
| .-autocomplete-container, | |
| .flex-nav .-autocomplete-container { | |
| background-color: #2e3136; | |
| border-color: #292c31; | |
| border-radius: 3px; | |
| overflow: auto; | |
| } | |
| .-autocomplete-item, | |
| .flex-nav .-autocomplete-item { | |
| border-color: #292c31; | |
| } | |
| .-autocomplete-item.selected, | |
| .flex-nav .-autocomplete-item.selected { | |
| background-color: #1a5066; | |
| } | |
| .full-page { | |
| background-color: #36393e; | |
| background-image: none; | |
| } | |
| .login-terms { | |
| color: #c2c3c5; | |
| } | |
| #login-card { | |
| background-color: #2e3136; | |
| color: #888; | |
| } | |
| #login-card .input-line label { | |
| margin-left: 0; | |
| } | |
| #login-card .input-line input, | |
| #login-card .input-line select { | |
| border-color: #3e4146; | |
| color: #888; | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| #login-card .input-line input.error, | |
| #login-card .input-line select.error { | |
| border-color: #bc2031; | |
| } | |
| #login-card .input-line .input-error { | |
| color: #bc2031; | |
| padding: 0; | |
| margin-top: 7px; | |
| } | |
| #login-card .submit:hover, | |
| #login-card .register:hover, | |
| #login-card .forgot-password:hover, | |
| #login-card .back-to-login:hover { | |
| color: #eee; | |
| } | |
| .register-link-replacement { | |
| margin-top: 15px; | |
| } | |
| .hljs-keyword, | |
| .css .rule .hljs-keyword, | |
| .hljs-winutils, | |
| .javascript .hljs-title, | |
| .nginx .hljs-title, | |
| .hljs-subst, | |
| .hljs-request, | |
| .hljs-status { | |
| color: #abb2bf; | |
| } | |
| .settings-description { | |
| color: #c2c3c5; | |
| } | |
| .logoutOthers, | |
| .select-service { | |
| margin-top: 15px; | |
| } | |
| .avatar-suggestion-item, | |
| .page-static .content .section .section-content, | |
| .page-settings .content .section { | |
| border-color: #2c2f33; | |
| background-color: #2e3136; | |
| color: #aaa; | |
| } | |
| .avatar-suggestion-item .avatar, | |
| .page-static .content .section .section-content .avatar, | |
| .page-settings .content .section .avatar { | |
| background-color: #272a2e; | |
| } | |
| .permissions-manager .permission-grid tbody tr, | |
| .statistics-table tr, | |
| .page-list .list table tbody tr { | |
| background-color: #373b41 !important; | |
| } | |
| .permissions-manager .permission-grid tbody tr th, | |
| .statistics-table tr th, | |
| .page-list .list table tbody tr th { | |
| border: none; | |
| background-color: transparent !important; | |
| color: #c2c3c5; | |
| font-weight: 400; | |
| } | |
| .permissions-manager .permission-grid tbody tr td, | |
| .statistics-table tr td, | |
| .page-list .list table tbody tr td { | |
| border: none; | |
| padding: 10px; | |
| background-color: transparent !important; | |
| color: #c2c3c5; | |
| } | |
| .permissions-manager .permission-grid tbody tr:nth-of-type(even), | |
| .statistics-table tr:nth-of-type(even), | |
| .page-list .list table tbody tr:nth-of-type(even) { | |
| background-color: #2c2f33 !important; | |
| } | |
| .permissions-manager .permission-grid tbody tr:hover, | |
| .statistics-table tr:hover, | |
| .page-list .list table tbody tr:hover { | |
| background-color: #1a5066 !important; | |
| } | |
| .permissions-manager .permission-grid, | |
| .statistics-table, | |
| .page-list .list table { | |
| background-color: #292c31; | |
| border: 1px solid #292c31; | |
| } | |
| .permissions-manager .permission-grid thead, | |
| .statistics-table thead, | |
| .page-list .list table thead { | |
| font-weight: 700; | |
| padding: 10px; | |
| } | |
| .permissions-manager .permission-grid thead .icon-edit, | |
| .statistics-table thead .icon-edit, | |
| .page-list .list table thead .icon-edit { | |
| display: none; | |
| } | |
| .permissions-manager .permission-grid thead a, | |
| .statistics-table thead a, | |
| .page-list .list table thead a { | |
| color: #c2c3c5; | |
| } | |
| .permissions-manager .permission-grid thead tr, | |
| .statistics-table thead tr, | |
| .page-list .list table thead tr { | |
| background-color: #292c31; | |
| } | |
| .permissions-manager .permission-grid thead td, | |
| .statistics-table thead td, | |
| .page-list .list table thead td, | |
| .permissions-manager .permission-grid thead th, | |
| .statistics-table thead th, | |
| .page-list .list table thead th { | |
| border: none; | |
| padding: 10px; | |
| background-color: transparent; | |
| } | |
| .permissions-manager .form-role .form-buttons { | |
| margin-top: 15px; | |
| padding: 0; | |
| } | |
| .permissions-manager .form-role label { | |
| width: 88px; | |
| text-align: left; | |
| } | |
| .permissions-manager h2 { | |
| border: none; | |
| } | |
| form.inline input[type='text'], | |
| form.inline input[type='number'], | |
| form.inline input[type='email'], | |
| form.inline input[type='url'], | |
| form.inline input[type='password'], | |
| form.inline input[type='time'], | |
| form.inline select { | |
| margin-top: 10px; | |
| width: 194px; | |
| } | |
| .page-list .results { | |
| border: none; | |
| color: #c2c3c5; | |
| margin-bottom: 0; | |
| padding: 20px 0; | |
| } | |
| .page-list .list .user-image { | |
| background-color: transparent; | |
| margin: 0; | |
| margin-left: 15px; | |
| } | |
| .page-list .list .user-image .avatar:after { | |
| left: -16px; | |
| } | |
| .page-settings a { | |
| color: #7289da; | |
| } | |
| .page-settings a:hover { | |
| color: #5873d3; | |
| } | |
| .page-settings .content .section h1 { | |
| margin: 0; | |
| padding: 0; | |
| color: #eee; | |
| } | |
| .page-settings .start-import { | |
| margin-top: 15px; | |
| } | |
| .page-settings .content { | |
| background-color: #36393e; | |
| } | |
| .page-settings .settings-file-preview .preview.no-file { | |
| background-color: #272a2e; | |
| margin-right: 15px; | |
| } | |
| .page-settings .section { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| margin-bottom: 20px; | |
| } | |
| .page-settings .section .section-title .section-title-text { | |
| color: #eee; | |
| } | |
| .page-settings .section .section-content { | |
| background-color: transparent; | |
| } | |
| .page-settings .section .section-content .input-line { | |
| border-color: #3e4045; | |
| } | |
| .page-settings .section .section-content .input-line input { | |
| background-color: #424449; | |
| color: #bbb; | |
| border: none; | |
| } | |
| .page-settings .section .section-content .input-line > label { | |
| color: #aaa; | |
| } | |
| .code-mirror-box .CodeMirror, | |
| .code-mirror-box.code-mirror-box-fullscreen .title { | |
| border-color: #292c31; | |
| } | |
| .code-mirror-box .buttons { | |
| border-color: #292c31; | |
| background-color: #292c31; | |
| } | |
| .minicolors-theme-rocketchat .minicolors-swatch { | |
| background-color: #292c31; | |
| top: 0; | |
| left: 0; | |
| height: 35px; | |
| border: none; | |
| } | |
| .admin-integrations-new-panel .admin-integrations-new-item { | |
| color: #c2c3c5; | |
| border-color: #42454a; | |
| } | |
| .admin-integrations-new-panel .admin-integrations-new-item:hover { | |
| background-color: #292c31; | |
| } | |
| .page-container { | |
| background-color: transparent; | |
| } | |
| .page-container .content { | |
| padding: 25px 25px; | |
| } | |
| .page-container h3 { | |
| margin-bottom: 10px; | |
| } | |
| .pending-background { | |
| background-color: #fbc05e; | |
| border-color: #fbb747; | |
| color: #7f5f2a; | |
| } | |
| .pending-background > .icon-attention { | |
| color: #7f5f2a; | |
| } | |
| .range-slider-range { | |
| background-color: #3a3d42; | |
| border-color: #3a3d42; | |
| } | |
| .range-slider-range::-webkit-slider-thumb { | |
| background-color: #1a5066; | |
| } | |
| .range-slider-range::-webkit-slider-thumb:hover, | |
| .range-slider-range::-webkit-slider-thumb:active { | |
| background-color: #17485c; | |
| } | |
| .range-slider-range::-moz-range-thumb { | |
| background-color: #1a5066; | |
| } | |
| .range-slider-range::-moz-range-thumb:hover, | |
| .range-slider-range::-moz-range-thumb:active { | |
| background-color: #17485c; | |
| } | |
| .range-slider-value { | |
| background-color: #1a5066; | |
| } | |
| .range-slider-value:after { | |
| border-right-color: #1a5066; | |
| } | |
| .cm-s-default.CodeMirror { | |
| background: #151515; | |
| color: #e0e0e0; | |
| } | |
| .cm-s-default div.CodeMirror-selected { | |
| background: #303030; | |
| } | |
| .cm-s-default .CodeMirror-line::-moz-selection, | |
| .cm-s-default .CodeMirror-line > span::-moz-selection, | |
| .cm-s-default .CodeMirror-line > span > span::-moz-selection { | |
| background: rgba(48,48,48,0.99); | |
| } | |
| .cm-s-default .CodeMirror-line::selection, | |
| .cm-s-default .CodeMirror-line > span::selection, | |
| .cm-s-default .CodeMirror-line > span > span::selection { | |
| background: rgba(48,48,48,0.99); | |
| } | |
| .cm-s-default .CodeMirror-line::-moz-selection, | |
| .cm-s-default .CodeMirror-line > span::-moz-selection, | |
| .cm-s-default .CodeMirror-line > span > span::-moz-selection { | |
| background: rgba(48,48,48,0.99); | |
| } | |
| .cm-s-default .CodeMirror-gutters { | |
| background: #151515; | |
| border-right: 0px; | |
| } | |
| .cm-s-default .CodeMirror-guttermarker { | |
| color: #ac4142; | |
| } | |
| .cm-s-default .CodeMirror-guttermarker-subtle { | |
| color: #505050; | |
| } | |
| .cm-s-default .CodeMirror-linenumber { | |
| color: #505050; | |
| } | |
| .cm-s-default .CodeMirror-cursor { | |
| border-left: 1px solid #b0b0b0 !important; | |
| } | |
| .cm-s-default span.cm-comment { | |
| color: #8f5536; | |
| } | |
| .cm-s-default span.cm-atom { | |
| color: #aa759f; | |
| } | |
| .cm-s-default span.cm-number { | |
| color: #aa759f; | |
| } | |
| .cm-s-default span.cm-property, | |
| .cm-s-default span.cm-attribute { | |
| color: #90a959; | |
| } | |
| .cm-s-default span.cm-keyword { | |
| color: #ac4142; | |
| } | |
| .cm-s-default span.cm-string { | |
| color: #f4bf75; | |
| } | |
| .cm-s-default span.cm-variable { | |
| color: #90a959; | |
| } | |
| .cm-s-default span.cm-variable-2 { | |
| color: #6a9fb5; | |
| } | |
| .cm-s-default span.cm-def { | |
| color: #d28445; | |
| } | |
| .cm-s-default span.cm-bracket { | |
| color: #e0e0e0; | |
| } | |
| .cm-s-default span.cm-tag { | |
| color: #ac4142; | |
| } | |
| .cm-s-default span.cm-link { | |
| color: #aa759f; | |
| } | |
| .cm-s-default span.cm-error { | |
| background: #ac4142; | |
| color: #b0b0b0; | |
| } | |
| .cm-s-default .CodeMirror-activeline-background { | |
| background: #202020; | |
| } | |
| .cm-s-default .CodeMirror-matchingbracket { | |
| text-decoration: underline; | |
| color: #fff !important; | |
| } | |
| .cm-s-default span.cm-qualifier { | |
| color: #d28445; | |
| } | |
| #code-mirror-textarea, | |
| .cm-s-default.CodeMirror, | |
| .cm-s-default .CodeMirror-gutters { | |
| background: #25272b; | |
| } | |
| .hljs, | |
| .code-colors.hljs { | |
| display: block; | |
| overflow-x: auto; | |
| padding: 0.5em; | |
| color: #abb2bf; | |
| background: #282c34; | |
| } | |
| .hljs .hljs-comment, | |
| .hljs .hljs-quote { | |
| color: #5c6370; | |
| font-style: italic; | |
| } | |
| .hljs .hljs-doctag, | |
| .hljs .hljs-keyword, | |
| .hljs .hljs-formula { | |
| color: #c678dd; | |
| } | |
| .hljs .hljs-section, | |
| .hljs .hljs-name, | |
| .hljs .hljs-selector-tag, | |
| .hljs .hljs-deletion, | |
| .hljs .hljs-subst { | |
| color: #e06c75; | |
| } | |
| .hljs .hljs-literal { | |
| color: #56b6c2; | |
| } | |
| .hljs .hljs-string, | |
| .hljs .hljs-regexp, | |
| .hljs .hljs-addition, | |
| .hljs .hljs-attribute, | |
| .hljs .hljs-meta-string { | |
| color: #98c379; | |
| } | |
| .hljs .hljs-built_in, | |
| .hljs .hljs-class .hljs-title { | |
| color: #e6c07b; | |
| } | |
| .hljs .hljs-attr, | |
| .hljs .hljs-variable, | |
| .hljs .hljs-template-variable, | |
| .hljs .hljs-type, | |
| .hljs .hljs-selector-class, | |
| .hljs .hljs-selector-attr, | |
| .hljs .hljs-selector-pseudo, | |
| .hljs .hljs-number { | |
| color: #d19a66; | |
| } | |
| .hljs .hljs-symbol, | |
| .hljs .hljs-bullet, | |
| .hljs .hljs-link, | |
| .hljs .hljs-meta, | |
| .hljs .hljs-selector-id, | |
| .hljs .hljs-title { | |
| color: #61aeee; | |
| } | |
| .hljs .hljs-emphasis { | |
| font-style: italic; | |
| } | |
| .hljs .hljs-strong { | |
| font-weight: bold; | |
| } | |
| .hljs .hljs-link { | |
| text-decoration: underline; | |
| } | |
| @-moz-keyframes highlight { | |
| 0% { | |
| background: #1a5066; | |
| } | |
| 100% { | |
| background: none; | |
| } | |
| } | |
| @-webkit-keyframes highlight { | |
| 0% { | |
| background: #1a5066; | |
| } | |
| 100% { | |
| background: none; | |
| } | |
| } | |
| @-o-keyframes highlight { | |
| 0% { | |
| background: #1a5066; | |
| } | |
| 100% { | |
| background: none; | |
| } | |
| } | |
| @keyframes highlight { | |
| 0% { | |
| background: #1a5066; | |
| } | |
| 100% { | |
| background: none; | |
| } | |
| } | |
| li.message ul.reactions li.selected { | |
| background: rgba(255,255,255,0.5); | |
| border: 0; | |
| } | |
| .message .reactions>li .reaction-count { | |
| color: #9c27b0; | |
| } | |
| div.rc-message-box__typing b { | |
| color: #c2c3c5; | |
| } | |
| .body { | |
| font-size: 16px; | |
| } | |
| label.rc-message-box__container { | |
| background-color: hsla(218,5%,47%,.3); | |
| border: 0; | |
| border-radius: 5px; | |
| } | |
| .emojione { | |
| image-rendering: auto !important; | |
| } | |
| ` | |
| ; | |
| if (typeof GM_addStyle != "undefined") { | |
| GM_addStyle(css); | |
| } else if (typeof PRO_addStyle != "undefined") { | |
| PRO_addStyle(css); | |
| } else if (typeof addStyle != "undefined") { | |
| addStyle(css); | |
| } else { | |
| var node = document.createElement("style"); | |
| node.type = "text/css"; | |
| node.appendChild(document.createTextNode(css)); | |
| var heads = document.getElementsByTagName("head"); | |
| if (heads.length > 0) { | |
| heads[0].appendChild(node); | |
| } else { | |
| // no head yet, stick it whereever | |
| document.documentElement.appendChild(node); | |
| } | |
| } | |
| }; | |
| window.addEventListener('load', css()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment