☰

RocketChat | Discord Theme

Changes RocketChat to a dark Discord theme. WARNING: YOU MAY HAVE TO ADD DOMAINS DEPENDING ON WHICH SERVERS YOU'RE USING!

目前为 2020-07-23 提交的版本。查看 最新版本。

  1. /* ==UserStyle==
  2. @name           RocketChat | Discord Theme
  3. @namespace      github.com/openstyles/stylus
  4. @version        1.0.3
  5. @description    Changes RocketChat to a dark Discord theme. WARNING: YOU MAY HAVE TO ADD DOMAINS DEPENDING ON WHICH SERVERS YOU'RE USING!
  6. @author         Freeplay (https://pages.codeberg.org/freeplay/)
  7. ==/UserStyle== */
  8.  
  9. /* July, 23 / 20
  10. - Fixes some more issues due to the update, Not everything is fixed but it's back to being usable
  11. - https://gf.qytechs.cn/en/scripts/402919-rocketchat-discord-theme/discussions/54393
  12. /* July, 12 / 20
  13. - Some fixes
  14. */
  15. /* May, 14 / 20
  16. - Fixed Message Dividers
  17. */
  18. @-moz-document domain("stux.chat"), domain("open.rocket.chat") {
  19. 	/* Yes, I realize this may be a bit messy. Feedback is appreciated!*/
  20. 	
  21. 	/* Frames */
  22. 	* {
  23. 		transition: background 0s !important;
  24. 		border-color: hsla(0,0%,100%,0.06);
  25. 	}
  26. 	.wrapper {
  27. 		scrollbar-color: #202225 #36393f;
  28. 	}
  29. 	.section {
  30. 		border-color: hsla(0,0%,100%,0.06) !important;
  31. 	}
  32. 	.rc-old {
  33. 		border: none !important;
  34. 	}
  35. 	.rcx-box {
  36. 		color: white;
  37. 		border: none !important;
  38. 		/*background-color: #36393f !important;*/
  39. 	}
  40. 	.rcx-box:after {
  41. 		border: none !important;
  42. 	}
  43. 	.rcx-tile--elevation-0, .rcx-tile--elevation-1 {
  44. 		background-color: #202225;
  45. 		color: white;
  46. 	}
  47.  
  48. 	/* Text */
  49. 	.global-font-family {
  50. 		font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif !important;
  51. 	}
  52. 	.color-primary-font-color, .rc-form-label, .rc-switch__text {
  53. 		color: #dcddde;
  54. 	}
  55. 	
  56. 	.rcx-box--text-style-h1 {
  57. 		color: white;
  58. 	}
  59. 	.rc-switch-double {
  60. 		color: #7289DA;
  61. 	}
  62. 	
  63. 	a {
  64. 		color: #7289DA;
  65. 	}
  66. 	label {
  67. 		color: white;
  68. 	}
  69.  
  70. 	/* Alerts */
  71. 	.alert {
  72. 		background-color: #1f2124;
  73. 		color: white;
  74. 		border: none;
  75. 	}
  76. 	.rcx-callout--type-warning {
  77. 		background-color: #1f2124;
  78. 	}
  79. 	
  80. 	/* Other */
  81. 	.role-tag, .message-alias, .rc-apps-category, .remove-role, .is-bot {
  82. 		background-color: #7289DA !important; 
  83. 		border: none !important;
  84. 		color: white !important;
  85. 		font-size: 10px !important;
  86. 		line-height: 15px !important;
  87. 		border-radius: 3px !important;
  88. 		font-weight: 500 !important;
  89. 		padding: 0 4px !important;
  90. 		text-transform: uppercase;
  91. 		display: inline-block;
  92. 		height: 15px !important;
  93. 	}
  94. 		
  95. 	.mention-link { /* Mention Tags */
  96. 		border-radius: 3px !important;
  97. 		padding: 0 2px !important;
  98. 		color: #7289da !important;
  99. 		background: rgba(114,137,218,.1) !important;
  100. 		font-weight: 500 !important;
  101. 	}
  102. 	.mention-link:hover {
  103. 		background: #7289da !important;
  104. 		color: white !important;
  105. 		opacity: 1 !important;
  106. 	}
  107. 	.mention-link--user:before {
  108. 		content: "@";
  109. 	}
  110. 	.reactions > li { /* Emoji Reactions */
  111. 			background-color: rgba(114,137,218,.3) !important;
  112. 			border: none !important;
  113. 			border-radius: .25rem;
  114. 			margin-right: .125rem;
  115. 			margin-bottom: .125rem;
  116. 		}
  117. 		.reactions > li.add-reaction {
  118. 			background-color: transparent !important;
  119. 		}
  120.  
  121. 	/* TextBoxes */
  122. 	.rc-input__element, .rcx-input-box__wrapper, .rcx-input-box, .rc-tags__input/*, .rcx-select*/ { 
  123. 		background-color: #202225 !important;
  124. 		border: none !important;
  125. 		border-radius: 4px !important;
  126. 		color: white !important;
  127. 		box-shadow: none !important;
  128. 	}
  129. 		.rc-input__icon {
  130. 			color: #dcddde;
  131. 		}
  132. 	
  133. 	/* CodeBlocks */
  134. 	.CodeMirror-gutters {
  135. 		background-color: #202225;
  136. 	}
  137. 	.code-colors, code, .CodeMirror-scroll {
  138. 		color: white !important;
  139. 		background-color: #2f3136 !important;
  140. 		border: 1px solid #202225 !important;
  141. 		border-radius: 4px !important;
  142. 	}
  143. 		.hljs-keyword, .hljs-string, .cm-string {
  144. 			color: #dc3233;
  145. 		}
  146. 	
  147. 	/* Buttons */
  148. 	.rc-button, .rcx-button {
  149. 		background-color: #7289da;
  150. 		color: white;
  151. 		border: none;
  152. 		border-radius: 3px;
  153. 		font-weight: 500;
  154. 		line-height: 16px;
  155. 		font-size: 14px;
  156. 		/*padding: 2px 16px;*/
  157. 	}
  158. 	.rc-button:hover, .rcx-button:hover {
  159. 		background-color: #677bc4 !important;
  160. 		opacity: 1 !important;
  161. 	}
  162. 	.rc-button--cancel {
  163. 		background-color: transparent !important;
  164. 		border: 1px solid rgba(240,71,71,.3) !important;
  165. 		color: #f04747;
  166. 	}
  167. 	.rc-button:disabled, .rcx-button--primary:disabled {
  168. 		background-color: #7289da;
  169. 		color: white;
  170. 		opacity: 0.7;
  171. 	}
  172. 	.rc-select, select.rc-input { /* DropDown */
  173. 		background-color: rgb(79, 84, 92) !important;
  174. 		color: white !important;
  175. 		box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px 0px !important;
  176. 		border: none !important;
  177. 	}
  178. 		.rc-select__element {
  179. 			color: white !important;
  180. 		}
  181. 			option {
  182. 				background-color: rgb(79, 84, 92);
  183. 				color: white;
  184. 				border: none;
  185. 				border-radius: 4px;
  186. 			}
  187. 	/* Files */
  188. 	.attachments__item:hover {
  189. 		background-color: rgba(79,84,92,0.32) !important;
  190. 	}
  191. 	.attachments__name {
  192. 		color: white !important;
  193. 	}
  194. 	
  195. 	i {
  196. 		color: white !important;
  197. 	}
  198. 	
  199. 	/*** SIDEBAR ***/
  200. 	
  201. 	.sidebar {
  202. 		max-width: 240px;
  203. 		min-width: 240px;
  204. 		background-color: #2f3136;
  205. 	}
  206. 		.rooms-list {
  207. 			margin-top: 48px;
  208. 			scrollbar-color: #202225 transparent;
  209. 			scrollbar-width: thin;
  210. 		}
  211. 			.rooms-list__list:not(:last-child) {
  212. 				margin: 0 !important;
  213. 			}
  214. 			h3.rooms-list__type {
  215. 				height: 40px !important;
  216. 				padding: 16px 16px 0 16px;
  217. 			}
  218. 				.sidebar-item { /* Sidebar Buttons */
  219. 					height: 34px !important;
  220. 					font-size: 16px !important;
  221. 					font-weight: 500 !important;
  222. 					color: #8e9297 !important;
  223. 					margin: 0 8px !important;
  224. 					padding: 0 !important;
  225. 				}
  226. 					.sidebar-item__picture {
  227. 						display: none;
  228. 					}
  229. 					.sidebar-item__body {
  230. 						font-size: 16px !important;
  231. 						font-weight: 500 !important;
  232. 						padding: 0 8px;
  233. 					}
  234. 				.sidebar-item:hover {
  235. 					background-color: rgba(79, 84, 92, 0.16) !important;
  236. 				}
  237. 				.sidebar-item--active {
  238. 					background-color: rgba(79, 84, 92, 0.32) !important;
  239. 					color: white !important;
  240. 				}
  241. 				.sidebar-item--unread {
  242. 					color: white !important;
  243. 				}
  244.  
  245. 		.sidebar__header {
  246. 			position: fixed;
  247. 			top: 0;
  248. 			background-color: #2f3136;
  249. 			width: 240px;
  250. 			min-width: 240px;
  251. 			max-width: 240px;
  252. 			margin: 0;
  253. 			padding: 12px;
  254. 			z-index: 1;
  255. 			box-shadow: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
  256. 		}
  257. 			.sidebar__header-thumb {
  258. 				margin: 0;
  259. 				margin-right: 10px;
  260. 			}
  261. 			.sidebar__toolbar {
  262. 				margin: 0 !important;
  263. 				padding: 0 !important;
  264. 				justify-content: space-evenly;
  265. 				/*display: grid !important;
  266. 				grid-template-columns: repeat(auto-fill,minmax(25px, 1fr))*/
  267. 			}
  268. 				.sidebar__toolbar-button {
  269. 					margin: 0;
  270. 					width: 25px;
  271. 				}
  272. 	
  273. 	/*** CONTENT ***/
  274. 	
  275. 	.content-background-color {
  276. 		background-color: #36393f;
  277. 	}
  278. 		/* HEADER */
  279. 		.rc-header--room {
  280. 			/*background-color: #36393f;*/
  281. 			height: 48px;
  282. 			padding: 0;
  283. 			padding-left: 8px;
  284. 			box-shadow: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
  285. 			border: none !important;
  286. 		}
  287. 			.rc-header__wrap {
  288. 				background-color: transparent;
  289. 				height: 100%;
  290. 			}
  291. 				.rc-header__data {
  292. 					display: contents;
  293. 				}
  294. 					.rc-header__name {
  295. 						width: min-content;
  296. 						padding-right: 16px;
  297. 						border-right: 1px solid #ffffff0f;
  298. 						color: white;
  299. 						font-weight: 600;
  300. 						font-size: 16px !important;
  301. 					}
  302. 					.rc-header__topic {
  303. 						padding-left: 16px;
  304. 					}
  305. 				.rc-old .fixed-title {
  306. 					border: none !important;
  307. 				}
  308. 		/* MEssages */
  309. 		.messages-box ul {
  310. 			padding: 21px 0 25px;
  311. 		}
  312. 			.message {
  313. 				padding: 0;
  314. 				padding-left: 72px;
  315. 				padding-right: 48px;
  316. 				margin-top: 1.0625rem;
  317. 				line-height: 1.375rem;
  318. 				font-size: 100%;
  319. 				font-weight: 400;
  320. 			}
  321. 				.message .thumb {
  322. 					left: 16px;
  323. 					width: 40px;
  324. 					height: 40px;
  325. 				}
  326. 					.message .thumb:not(.thumb-small) .avatar {
  327. 						width: 40px;
  328. 						height: 40px;
  329. 					}
  330. 				.message-oembed, .attachment {
  331. 					background-color: #2f3136;
  332. 					border-radius: 4px;
  333. 					overflow: hidden;
  334. 					width: max-content;
  335. 					max-width: 100%;
  336. 					padding-right: 10px;
  337. 				}
  338. 					.rc-old blockquote::before, .attachment-block-border {
  339. 						display: flex;
  340. 						width: 4px !important;
  341. 						border-radius: 0px !important;
  342. 						margin-top: -5px;
  343. 						height: calc(100% + 10px)
  344. 					}
  345. 				.message-oembed > iframe {
  346. 					width: 100%;
  347. 				}
  348. 			.message-actions {
  349. 				color: white;
  350. 				background-color: #36393f;
  351. 				box-shadow: 0 0 0 1px rgba(4,4,5,0.15);
  352. 				border: none;
  353. 			}
  354. 				.message-actions__button:hover, .message-actions__menu:hover {
  355. 					background-color: #3e4249;
  356. 				}
  357. 			.message:hover, .message.active {
  358. 				background-color: rgba(4,4,5,0.07);
  359. 			}
  360. 			.message a {
  361. 				color: #7289DA;
  362. 			}
  363. 			.message.editing {
  364. 				background-color: rgba(250,166,26,0.08);
  365. 			}
  366. 			.message.new-day::before {
  367. 				background-color: #36393f;
  368. 				color: #72767d;
  369. 				border-radius: 50px;
  370. 			}
  371. 			.message.new-day::after {
  372. 				border-color: hsla(0,0%,100%,0.06) !important;
  373. 				border-width: thin !important;
  374. 			}
  375. 		
  376. 		/* TextBox */
  377. 		.rc-old .messages-container {
  378. 			overflow: hidden;
  379. 		}
  380. 		.rc-old .messages-container .footer {
  381. 			min-height: 68px;
  382. 			padding-bottom: 24px;
  383. 			background-color: #36393f;
  384. 		}
  385. 			.rc-message-box {
  386. 				background-color: #36393f !important;
  387. 				padding: 0;
  388. 				padding-left: 16px;
  389. 				padding-right: 16px;
  390. 			}
  391. 				
  392. 				/*.message-popup-results {
  393. 					bottom: 0;
  394. 					position: absolute;
  395. 				}*/
  396. 					.rc-message-box .reply-preview {
  397. 						background-color: #2e3035 !important;
  398. 					}
  399. 				.rc-message-box__container {
  400. 					border: none;
  401. 					background-color: #40444b;
  402. 					border-radius: 8px;
  403. 					padding: 9px 0;
  404. 					/*margin-bottom: 24px;*/
  405. 				}
  406. 					.rc-message-box__textarea {
  407. 						color: white;
  408. 					}
  409. 				.rc-message-box__container.editing {
  410. 					background-color: rgba(250,166,26,0.08);
  411. 				}
  412. 				.rc-message-box__toolbar-formatting {
  413. 					position: absolute;
  414. 					bottom: -24px;
  415. 				}
  416. 			.rc-message-box__typing {
  417. 				bottom: 0;
  418. 				margin-top: auto;
  419. 				position: fixed;
  420. 				height: 20px;
  421. 				color: white;
  422. 			}
  423. 				.rc-message-box__typing-user {
  424. 					color: white !important;
  425. 				}
  426. 		
  427. 		/* DropZone */
  428. 		.dropzone-overlay {
  429. 			background: rgba(0,0,0,0.8) !important;
  430. 		}
  431. 	
  432. 		/* Context SideBar */
  433. 		.rc-user-info-container {
  434. 			background-color: transparent !important;
  435. 		}
  436. 		.contextual-bar {
  437. 			background-color: #2f3136;
  438. 			box-shadow: none !important;
  439. 			border-inline-start: none !important;
  440. 		}
  441. 			.contextual-bar__header, .rcx-\@9jfjls {
  442. 				background-color: #2f3136;
  443. 				height: 48px;
  444. 				box-shadow: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
  445. 				border: none;
  446. 				z-index: 2;
  447. 			}
  448. 			.contextual-bar__content, .rcx-\@10ikbhr {
  449. 				background-color: #2f3136;
  450. 				border-radius: 0 !important;
  451. 			}
  452. 				.contextual-bar__content > .rc-message-box {
  453. 					background-color: #2f3136 !important;
  454. 				}
  455. 				.rc-user-info__row--separator {
  456. 					border: none;
  457. 				}
  458. 				.rc-member-list__counter { /* Member list count text */
  459. 					color: white;
  460. 				}
  461. 				.rc-user-info-details {
  462. 					background-color: #202225;
  463. 					border-radius: 4px;
  464. 					color: white;
  465. 				}
  466. 					.rc-user-info-details__info {
  467. 						color: white;
  468. 					}
  469. 				.rc-member-list__user, .rcx-table__row {
  470. 					border-radius: 4px !important;
  471. 					height: 42px !important;
  472. 					padding: 0 8px !important;
  473. 					align-items: center !important;
  474. 				}
  475. 					
  476. 				.rc-member-list__user:hover, .rcx-table__row:hover {
  477. 					background-color: rgba(79,84,92,0.16);
  478. 				}
  479. 				.rc-member-list__user.active {
  480. 					background-color: rgba(79,84,92,0.32);
  481. 					color: white;
  482. 				}
  483. 	
  484. 				/* Discussions */
  485. 				.rcx-\@1usu1xd:hover, .rcx-\@1usu1xd:focus, .rcx-\@2xn2yo:hover, .rcx-\@2xn2yo:focus {
  486. 					background-color: rgba(79,84,92,0.16);
  487. 				}
  488. 					.rcx-\@16ef2pm {
  489. 						color: white !important;
  490. 					}
  491. 	
  492. 			.rc-old .list-view > .title:not(:last-child) { /* Search W/ Regex text */
  493. 				margin: 0;
  494. 			}
  495. 			.rocket-search-tab {
  496. 				padding: 8px;
  497. 				scrollbar-color: #202225 #2f3136;
  498. 			}
  499. 				.thread {
  500. 					padding: 8px;
  501. 				}
  502. 					.list > .message, .thread > .message {
  503. 						background-color: #36393f;
  504. 						border: 1px solid #202225;
  505. 						border-radius: 4px;
  506. 						padding-top: 8px;
  507. 						padding-bottom: 8px;
  508. 					}
  509. 	
  510. 	
  511. 	
  512. 	/*** SETTINGS ***/
  513. 	.flex-nav {
  514. 		background-color: #2f3136;
  515. 	}
  516. 	.rcx-\@197qq4o {
  517. 		color: white !important; 
  518. 	}
  519. 	.flex-nav a:hover, .rcx-\@1l00c5f.active {
  520. 		background-color: #393c43 !important;
  521. 	}
  522. 	.rcx-\@txktj6 {
  523. 		background-color: #36393f !important;
  524. 	}
  525. 	
  526. 	/** Admin Settings */
  527. 	
  528. 	.rc-old .flex-tab-container.opened, .flex-tab-bar {
  529. 		box-shadow: none !important;
  530. 	}
  531. 	.flex-tab-bar .tab-button:hover {
  532. 		background-color: transparent;
  533. 		border-right: 1px solid white;
  534. 	}
  535. 	.tab-button.active {
  536. 		background-color: transparent !important;
  537. 	} 
  538. 	.page-settings a:not(.rc-button) {
  539. 		color: #b9bbbe;
  540. 	}
  541. 	
  542. 	/* Tables */
  543. 	tr:not(.table-no-click):not(.table-no-pointer):hover {
  544. 		background-color: #2f3136 !important;
  545. 	}
  546. 		.statistics-table, .admin-table-row {
  547. 			background-color: #36393f !important;
  548. 		}
  549. 		.statistics-table:hover, .admin-table-row:hover {
  550. 			background-color: #2f3136 !important;
  551. 		}
  552. 		.rc-table-title {
  553. 			color: lightgray;
  554. 		}
  555. 		.table-fake-th {
  556. 			color: lightgray !important;
  557. 		}
  558. 		.permissions-manager .permission-grid .role-name {
  559. 			background-color: #36393f !important;
  560. 			color: white !important;
  561. 		}
  562. 			.page-list a:not(.rc-button) {
  563. 				color: lightgrey;
  564. 			}
  565. 		
  566. 	
  567. 	/* Integrations */
  568. 	.admin-integrations-new-item {
  569. 		border: none !important;
  570. 		color: white !important;
  571. 	}
  572. 	.admin-integrations-new-item:hover {
  573. 		background-color: rgba(79,84,92,0.32) !important;
  574. 	} 
  575. 	
  576. 	/* Federation Dash */
  577. 	.overview-item > .value {
  578. 		color: white;
  579. 	}
  580. 	
  581. 	/* Accounts */
  582. 	.rcx-accordion-item__bar[tabindex]:hover {
  583. 		background-color: transparent !important;
  584. 	}
  585. 	
  586. 	/*** POPUPS ***/
  587. 	.rc-modal-wrapper {
  588. 		background: rgba(0,0,0,0.85)
  589. 	}
  590. 		.rc-modal {
  591. 			background-color: #36393f;
  592. 			color: white;
  593. 			box-shadow: 0 0 0 1px rgba(32,34,37,.6),0 2px 10px 0 rgba(0,0,0,.2);
  594. 			border-radius: 5px;
  595. 			width: 440px;
  596. 			max-height: 660px;
  597. 			min-height: 200px;
  598. 			padding: 0;
  599. 			overflow: hidden;
  600. 		}
  601. 			.rc-modal__header {
  602. 				padding: 20px;
  603. 			}
  604. 				.rc-modal__title {
  605. 					font-weight: 600;
  606. 					font-size: 16px;
  607. 					line-height: 20px;
  608. 					letter-spacing: .3px;
  609. 					text-transform: uppercase;
  610. 				}
  611. 		.rc-modal__content {
  612. 			padding: 20px;
  613. 			padding-top: 10px;
  614. 		}
  615. 			.rc-modal__content-icon {
  616. 				display: none;
  617. 			}
  618. 			.rc-modal__content-text {
  619. 				text-align: left;
  620. 				font-size: 16px;
  621. 				line-height: 20px;
  622. 				color: #dcddde;
  623. 			}
  624. 		.rc-modal__footer {
  625. 			background-color: #2f3136;
  626. 			bottom: 0;
  627. 			margin-top: auto;
  628. 		}
  629. 	
  630. 	/* Emoji Picker */
  631. 	.emoji-picker {
  632. 		background-color: #2f3136 !important;
  633. 		border-radius: 8px;
  634. 		box-shadow: 0 0 0 1px rgba(4,4,5,0.15), 0 8px 16px rgba(0,0,0,0.24);
  635. 		padding: 0;
  636. 	}
  637. 		.filter-item {
  638. 			border: none !important;
  639. 		}
  640. 			.filter-item.active {
  641. 				border-bottom: solid !important;
  642. 			}
  643. 		.emoji-footer {
  644. 			display: none;
  645. 		}
  646. 	
  647. 	/* Context Menu */
  648. 	.rc-popover__content { 
  649. 		background-color: #202225;
  650. 		padding: 6px 8px;
  651. 		min-width: 188px;
  652. 		max-width: 320px;
  653. 		border-radius: 4px;
  654. 		box-shadow: 0 8px 16px rgba(0,0,0,0.24);
  655. 	}
  656. 		.rc-popover__title {
  657. 			color: #7289da;
  658. 			padding-top: 8px;
  659. 		}
  660. 			.rc-popover__list {
  661. 				margin-bottom: 8px;
  662. 			}
  663. 				.rc-popover__item {
  664. 					color: #b9bbbe;
  665. 					height: 35px;
  666. 					font-size: 14px;
  667. 					font-weight: 500;
  668. 					line-height: 18px;
  669. 				}
  670. 				.rc-popover__item:hover {
  671. 					background-color: rgba(79,84,92,0.16);
  672. 				}
  673. 		.rc-popover__divider {
  674. 			height: 1px;
  675. 			margin: 0;
  676. 			margin-top: -4px;
  677. 			background-color: hsla(0,0%,100%,0.06);
  678. 		}
  679. 	
  680. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址