Advertisement
Guest User

Untitled

a guest
Dec 10th, 2018
76
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 61.08 KB | None | 0 0
  1. @import url("https://raw.githack.com/Ruben7173/Ruben7173.github.io/master/BetterDiscord-Themes/Fixed-Themes-Misc/Dark-Matter-Remastered/fork.css");
  2. @import url("https://raw.githack.com/Ruben7173/Ruben7173.github.io/master/BetterDiscord-Themes/Modules/status.css");
  3. @import url('https://fonts.googleapis.com/css?family=Karla');
  4.  
  5. /*
  6. _ _ _
  7. __ _ _ __ _ __ | |__ __ _ ___| | ____ _ _ __ ___ _ _ _ __ __| |
  8. / _` | '_ \| '_ \ | '_ \ / _` |/ __| |/ / _` | '__/ _ \| | | | '_ \ / _` |
  9. | (_| | |_) | |_) | | |_) | (_| | (__| < (_| | | | (_) | |_| | | | | (_| |
  10. \__,_| .__/| .__/ |_.__/ \__,_|\___|_|\_\__, |_| \___/ \__,_|_| |_|\__,_|
  11. |_| |_| |___/
  12. */
  13.  
  14. /* Main background and settings background */
  15. .app,
  16. .callout-backdrop {
  17. background: var(--background-image) !important;
  18. background-size: cover !important;
  19. }
  20.  
  21. /*
  22. _ _
  23. ___ ___ _ __ ___ ___| | ___ _ __ ___ ___ _ __ | |_ ___
  24. / __/ _ \| '__/ _ \ / _ \ |/ _ \ '_ ` _ \ / _ \ '_ \| __/ __|
  25. | (_| (_) | | | __/ | __/ | __/ | | | | | __/ | | | |_\__ \
  26. \___\___/|_| \___| \___|_|\___|_| |_| |_|\___|_| |_|\__|___/
  27.  
  28. */
  29.  
  30. #app-mount {
  31. font-family: 'Karla',Whitney,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif !important;
  32. }
  33.  
  34. textarea {
  35. background: transparent !important;
  36. }
  37.  
  38. .scroller-wrap .scroller::-webkit-scrollbar-thumb,
  39. .scrollerWrap-2lJEkd .scroller-2FKFPG::-webkit-scrollbar-thumb {
  40. border: 3px solid rgba(255,255,255,0) !important;
  41. background-color: var(--accent-color) !important;
  42. }
  43.  
  44. .scroller-wrap .scroller::-webkit-scrollbar-track-piece,
  45. .scrollerWrap-2lJEkd .scroller-2FKFPG::-webkit-scrollbar-track-piece {
  46. border: 3px solid rgba(255,255,255,0) !important;
  47. background-color: rgba(0,0,0,0.3) !important;
  48. }
  49.  
  50. /* The dark background for the channel list scrollbar looks ugly since it breaks the even line
  51. between channels and content. The scrollbar is visible enough without a background so we
  52. just remove it there. */
  53. .channels-Ie2l6A .scrollerWrap-2lJEkd .scroller-2FKFPG::-webkit-scrollbar-track-piece {
  54. background: transparent !important;
  55. }
  56.  
  57.  
  58. /*
  59. _ _ _
  60. | |__ (_) __| | ___
  61. | '_ \| |/ _` |/ _ \
  62. | | | | | (_| | __/
  63. |_| |_|_|\__,_|\___|
  64.  
  65. */
  66.  
  67. .links,
  68. .help-container {
  69. display: none;
  70. }
  71.  
  72. .layers,
  73. .container-PNkimc,
  74. .container-2lgZY8,
  75. .theme-dark .layers-3iHuyZ,
  76. .theme-dark .chat-3bRxxu form {
  77. background: transparent !important;
  78. }
  79.  
  80. /*
  81. _ _ _ _
  82. _ __ ___ __ _(_)_ __ | |__ __ _ ___| | ____ _ _ __ ___ _ _ _ __ __| |___
  83. | '_ ` _ \ / _` | | '_ \ | '_ \ / _` |/ __| |/ / _` | '__/ _ \| | | | '_ \ / _` / __|
  84. | | | | | | (_| | | | | | | |_) | (_| | (__| < (_| | | | (_) | |_| | | | | (_| \__ \
  85. |_| |_| |_|\__,_|_|_| |_| |_.__/ \__,_|\___|_|\_\__, |_| \___/ \__,_|_| |_|\__,_|___/
  86. |___/
  87. */
  88.  
  89. .links,
  90. .chat-3bRxxu,
  91. .typing-2GQL18,
  92. .content-yTz4x3,
  93. .channels-Ie2l6A,
  94. .private-channels,
  95. .header-2o-2hj header,
  96. .dividerRed-MKoLlr span,
  97. .messagesWrapper-3lZDfY,
  98. #rtc-connection,
  99. #voice-connection {
  100. background: transparent !important;
  101. }
  102.  
  103. /* Server list area */
  104. .guildsWrapper-5TJh6A { background:rgba(0,0,0,0.6) !important }
  105.  
  106. /* Channels list area */
  107. .channels-Ie2l6A { background:rgba(0,0,0,0.7) !important }
  108.  
  109. /* Chat area */
  110. .content-yTz4x3 .flex-spacer { background:rgba(0,0,0,0.8) }
  111.  
  112. /* User list area */
  113. .members-1998pB { background:rgba(0,0,0,0.9) !important }
  114.  
  115. /* Game area */
  116. .activityFeed-28jde9 { background:rgba(0,0,0,0.8) !important }
  117.  
  118. /* Store */
  119. .applicationStore-1pNvnv { background:rgba(0,0,0,0.8) !important }
  120.  
  121. /*
  122. _ _ _ _
  123. | |_ ___ ___ | | |_(_)_ __ ___
  124. | __/ _ \ / _ \| | __| | '_ \/ __|
  125. | || (_) | (_) | | |_| | |_) \__ \
  126. \__\___/ \___/|_|\__|_| .__/|___/
  127. |_|
  128. */
  129.  
  130. .tooltip {
  131. background: var(--accent-color);
  132. color: #e0e0e0;
  133. }
  134.  
  135. .tooltip.tooltip-right:after {
  136. border-right-color:var(--accent-color);
  137. }
  138.  
  139. .tooltip.tooltip-top:after {
  140. border-top-color:var(--accent-color);
  141. }
  142.  
  143. .tooltip.tooltip-bottom:after {
  144. border-bottom-color:var(--accent-color);
  145. }
  146.  
  147. /*
  148. _ _ _ _ _
  149. ___ ___ _ ____ _____ _ __ | (_)___| |_ ___ ___ ___| |_(_) ___ _ __
  150. / __|/ _ \ '__\ \ / / _ \ '__| | | / __| __| / __|/ _ \/ __| __| |/ _ \| '_ \
  151. \__ \ __/ | \ V / __/ | | | \__ \ |_ \__ \ __/ (__| |_| | (_) | | | |
  152. |___/\___|_| \_/ \___|_| |_|_|___/\__| |___/\___|\___|\__|_|\___/|_| |_|
  153.  
  154. */
  155.  
  156. .typeMacOS-3EmCyP {
  157. background: rgba(0,0,0,0.6);
  158. width: 71px;
  159. box-shadow: inset -10px 0px 20px -10px rgba(0,0,0,0.3);
  160. }
  161.  
  162. .name-3M0b8v {
  163. font-size: 14px;
  164. }
  165.  
  166. .icon-sxakjD {
  167. width: 14px;
  168. height: 14px;
  169. }
  170.  
  171. .unread-1Dp-OI {
  172. background-color: var(--main-color) !important;
  173. }
  174.  
  175. .container-2Thooq {
  176. height: 75px;
  177. background: rgba(0,0,0,0.8);
  178. padding: 0 10px 0 15px;
  179. }
  180.  
  181. .contentSelectedText-3wUhMi,
  182. .contentHoveredText-2D9B-x {
  183. background: rgba(0,0,0,0.8) !important;
  184. }
  185.  
  186. .contentHoveredVoice-3p_NEO,
  187. .contentSelectedVoice-1WDIBM {
  188. background: rgba(0,0,0,0.5) !important;
  189. }
  190.  
  191. .create-guild-container {
  192. background: none !important;
  193. }
  194.  
  195. .create-guild-container .action {
  196. background: rgba(0,0,0,0.7);
  197. }
  198.  
  199. .create-guild-container .create-or-join .actions .or {
  200. -webkit-filter: opacity(0.9) invert();
  201. color: #000;
  202. }
  203.  
  204. .create-guild-container .action.create .action-icon,
  205. .create-guild-container .action.join .action-icon {
  206. -webkit-filter:invert() hue-rotate(150deg);
  207. }
  208.  
  209. .create-guild-container.deprecated .action {
  210. background: transparent !important;
  211. border: none !important;
  212. box-shadow: none !important;
  213. }
  214.  
  215. .create-guild-container h5,
  216. .create-guild-container .action.create .action-header {
  217. color:var(--main-color);
  218. }
  219.  
  220. .create-guild-container .action.create .btn-primary {
  221. background-color:var(--main-color) !important;
  222. }
  223.  
  224. .create-guild-container .action.create:hover .btn-primary {
  225. background-color:var(--accent-color) !important;
  226. }
  227.  
  228. .create-guild-container .form-actions .btn-default {
  229. background: rgba(255,255,255,0.1);
  230. border: 0;
  231. }
  232.  
  233. .create-guild-container .create-guild .guild-1EfMGQ-form .region-select {
  234. background: rgba(255,255,255,0.1);
  235. }
  236.  
  237. .create-guild-container .create-guild .guild-1EfMGQ-form .region-select button {
  238. color:#000;
  239. }
  240.  
  241. .create-guild-container .create-guild .guild-1EfMGQ-form .region-select:hover button {
  242. background-color:var(--main-color);
  243. border-color:var(--main-color);
  244. color:#fff;
  245. }
  246.  
  247. .create-guild-container .create-guild .guild-1EfMGQ-form .region-select:hover .region-select-inner {
  248. border-color:var(--main-color);
  249. }
  250.  
  251. .create-guild-container .create-guild .guild-1EfMGQ-form .region-select-name {
  252. color:#fff;
  253. }
  254.  
  255. .avatar-uploader .avatar-uploader-inner {
  256. background-color: var(--main-color);
  257. }
  258.  
  259. .region-select-modal {
  260. background:rgba(0,0,0,0.8);
  261. }
  262.  
  263. .region-select-modal .region-select-modal-header {
  264. color:var(--main-color);
  265. }
  266.  
  267. .region-select-modal .region-select-modal-option {
  268. background:rgba(255,255,255,0.1);
  269. border:2px solid rgba(255,255,255,0.1);
  270. }
  271.  
  272. .region-select-modal .region-select-modal-option:hover {
  273. border-color: var(--main-color);
  274. }
  275.  
  276. .region-select-modal .region-select-modal-option .region-select-name {
  277. color:#fff;
  278. }
  279.  
  280. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ:first-of-type {
  281. /*transform: scale(0.85);*/
  282. margin-top: 1px;
  283. margin-left: -5px;
  284. border: 5px solid rgba(0,0,0,0);
  285. border-radius: 100% !important;
  286. transition: 200ms all ease-in-out;
  287. }
  288.  
  289. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ:first-of-type:hover {
  290. border-radius: 100% !important;
  291. }
  292.  
  293. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ.active {
  294. border-radius: 100% !important;
  295. }
  296.  
  297. .header-2o-2hj-open ul {
  298. opacity:1 !important;
  299. }
  300.  
  301. .guildsAdd-21_IdK {
  302. opacity:0.5;
  303. font-size:22px !important;
  304. border: 1px dashed rgba(255,255,255,0.3) !important;
  305. margin-left: 0 !important;
  306. margin-top: 10px !important;
  307. }
  308.  
  309. .platform-osx .guildsWrapper-5TJh6A {
  310. padding-top: 15px;
  311. }
  312.  
  313. .guildsWrapper-5TJh6A {
  314. border-right:1px solid rgba(0,0,0,0.2);
  315. box-shadow:inset -10px 0px 20px -10px rgba(0,0,0,0.3);
  316. }
  317.  
  318. .guildsWrapper-5TJh6A .guild-1EfMGQ-separator {
  319. margin-top:5px;
  320. margin-bottom:5px;
  321. margin-left:-5px;
  322. display:none;
  323. }
  324.  
  325. .guildsWrapper-5TJh6A .guild-1EfMGQ-separator:after {
  326. background:transparent;
  327. }
  328.  
  329. .header-2o-2hj header span {
  330. margin-left:-7px;
  331. }
  332.  
  333. .header-2o-2hj header {
  334. box-shadow:none !important;
  335. color:#ddd;
  336. }
  337.  
  338. .channels-Ie2l6A header h2 {
  339. padding:0 18px;
  340. }
  341.  
  342. .channels-Ie2l6A .nameSelectedText-sp_EUw {
  343. color: #fff;
  344. }
  345.  
  346. .channels-Ie2l6A .content-20Aix8 {
  347. border-radius: 2px;
  348. }
  349.  
  350. .channels-Ie2l6A .horizontal-2EEEnY,
  351. .channels-Ie2l6A .content-20Aix8 div,
  352. .channels-Ie2l6A .name-3M0b8v {
  353. font-size:0.9em;
  354. }
  355.  
  356. .guildsWrapper-5TJh6A .guilds-1q_RqH {
  357. padding: 18px 20px 85px 15px;
  358. }
  359.  
  360. .guildsAdd-21_IdK {
  361. font-size: 30px;
  362. background: #000;
  363. }
  364.  
  365. .guildsWrapper-5TJh6A .guilds-1q_RqH .friendsOnline-_wi_fM {
  366. margin-top: 10px !important;
  367. }
  368.  
  369. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ .guildInner-3DSoA4 {
  370. background: #151515 !important;
  371. }
  372.  
  373. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ.active:first-of-type .guildInner-3DSoA4 {
  374. background: var(--main-color) !important;
  375. }
  376.  
  377. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ .guildInner-3DSoA4 a,
  378. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ .guildInner-3DSoA4 .guildIcon-CT-ZDq,
  379. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ,
  380. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ .avatar-small {
  381. width:40px;
  382. height:40px;
  383. }
  384.  
  385. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ .avatar-small {
  386. width:40px;
  387. height:40px;
  388. background-size: 40px 40px;
  389. }
  390.  
  391. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ .guildInner-3DSoA4 {
  392. line-height:40px;
  393. }
  394.  
  395. .guildsWrapper-5TJh6A .guilds-1q_RqH .friends-icon {
  396. width:40px;
  397. height:40px;
  398. background-size:25px 19px;
  399. }
  400.  
  401. .guildsWrapper-5TJh6A .guilds-1q_RqH .friends-icon {
  402. background-color: rgba(0,0,0,0.3) !important;
  403. background-image: none !important;
  404. padding-top:0px;
  405. }
  406.  
  407. .guildsWrapper-5TJh6A .guilds-1q_RqH .homeIcon-1FoKUJ {
  408. display:block;
  409. width:40px;
  410. height:40px;
  411. content:'';
  412. background-image: url(https://media.giphy.com/media/l4pTfx2qLszoacZRS/giphy.gif) !important;
  413. background-size:110%;
  414. background-repeat:no-repeat;
  415. background-position:top center;
  416. }
  417.  
  418. .guildsWrapper-5TJh6A .guilds-1q_RqH .homeIcon-1FoKUJ g {
  419. display: none;
  420. }
  421.  
  422. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ.audio .guildInner-3DSoA4:after {
  423. background-size:12px;
  424. background-color:rgba(0,0,0,0.8);
  425. }
  426.  
  427. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ:before,
  428. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ.unread-qLkInr:before,
  429. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ.selected:before {
  430. left:-19px;
  431. transition:0.2s ease-in-out all;
  432. }
  433.  
  434. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ.unread-qLkInr:not(.selected):before,
  435. .channels-Ie2l6A .channel-text.unread:not(.selected):not(.channel-muted):before {
  436. background:var(--main-color);
  437. }
  438.  
  439. .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ.active .guildInner-3DSoA4:before {
  440. background:#fff !important;
  441. }
  442.  
  443. .guildsWrapper-5TJh6A .guilds-1q_RqH .friendsOnline-_wi_fM {
  444. color: #ccc;
  445. font-size: 9px;
  446. margin: 15px 0 15px -7px;
  447. line-height: 20px;
  448. width: 55px;
  449. height: 20px;
  450. border-radius: 25px;
  451. overflow: hidden;
  452. background: rgba(0,0,0,0.3);
  453. }
  454.  
  455. .guildsWrapper-5TJh6A .guilds-1q_RqH-error {
  456. width:40px;
  457. height:40px;
  458. line-height:36px;
  459. }
  460.  
  461. .channels-Ie2l6A header h2,
  462. .private-channels header {
  463. opacity:.6;
  464. }
  465.  
  466. .channels-Ie2l6A .channel:hover {
  467. background:rgba(0,0,0,0.3) !important;
  468. }
  469.  
  470. .private-channels {
  471. overflow: visible !important;
  472. }
  473.  
  474. .private-channels .search-bar {
  475. background: rgba(0,0,0,0) !important;
  476. box-shadow: none !important;
  477. border-radius: 0 !important;
  478. border-bottom: 1px solid rgba(0,0,0,.1);
  479. }
  480.  
  481. .private-channels .search-bar .search-bar-inner {
  482. background: rgba(0,0,0,1) !important;
  483. }
  484.  
  485. .private-channels .search-bar input {
  486. background: rgba(0,0,0,0.8) !important;
  487. }
  488.  
  489. .channels-Ie2l6A .channel.selected,
  490. .private-channels .channel.selected a,
  491. .private-channels .search-result.selected,
  492. .private-channels .search-result:hover {
  493. background: rgba(0,0,0,0.6) !important;
  494. }
  495.  
  496. .channels-Ie2l6A ul .channel:not(.selected):hover,
  497. .private-channels .channel:not(.selected) a:hover,
  498. .private-channels .channel:not(.selected):hover a {
  499. background: rgba(0,0,0,0.3) !important;
  500. }
  501.  
  502. .channels-Ie2l6A .channel:not(.selected):before,
  503. .channels-Ie2l6A .channel.selected:before,
  504. .channels-Ie2l6A .channel.selected:hover:before,
  505. .private-channels .channel:not(.selected):before,
  506. .private-channels .channel.selected:before,
  507. .private-channels .channel.selected:hover:before,
  508. .private-channels .search-result.selected:before,
  509. .private-channels .search-result:hover:before {
  510. border-left: 2px solid var(--accent-color) !important;
  511. }
  512.  
  513. .channels-Ie2l6A .channel-text.unread:not(.selected):not(.channel-muted):before {
  514. left:-8px;
  515. }
  516.  
  517. /*
  518. _ _ _ _
  519. ___| |__ __ _ _ __ _ __ ___| |___ ___ ___ ___| |_(_) ___ _ __
  520. / __| '_ \ / _` | '_ \| '_ \ / _ \ / __| / __|/ _ \/ __| __| |/ _ \| '_ \
  521. | (__| | | | (_| | | | | | | | __/ \__ \ \__ \ __/ (__| |_| | (_) | | | |
  522. \___|_| |_|\__,_|_| |_|_| |_|\___|_|___/ |___/\___|\___|\__|_|\___/|_| |_|
  523.  
  524. */
  525.  
  526. .base-3dtUhz {
  527. border-radius: 0 !important;
  528. }
  529.  
  530. .menu-Sp6bN1 {
  531. background: var(--dark-color);
  532. }
  533.  
  534. .item-1GzJrl:hover {
  535. background: var(--accent-color);
  536. color: #fff;
  537. }
  538.  
  539. .item-1GzJrl.invite-271nFU {
  540. color: var(--main-color);
  541. }
  542.  
  543. .separator-2zcjq8 {
  544. border-bottom: 1px solid rgba(255,255,255,0.1);
  545. }
  546.  
  547. .iconCollapsed-3hFp_8, .iconDefault-3Gr8d2, .nameCollapsed-34uFWo, .nameDefault-2DI02H {
  548. color: #fff;
  549. }
  550.  
  551. .nameDefaultText-24KCy5, .nameDefaultVoice-3WUH7s, .nameLockedText-3pqQcL, .nameLockedVoice-26MhB1 {
  552. color: rgba(255, 255, 255, 0.35);
  553. }
  554.  
  555. .containerDefault-3GGEv_ {
  556. padding-top: 15px;
  557. }
  558.  
  559. .unread-1xRYoj {
  560. background-color: var(--main-color);
  561. }
  562.  
  563. .unread-mentions-indicator-bottom .unread-mentions-bar, .unread-mentions-indicator-top .unread-mentions-bar {
  564. box-shadow: none !important;
  565. }
  566.  
  567. .icon-2aINcz {
  568. margin-left: 0;
  569. }
  570.  
  571. .bar-30k2ka {
  572. width: 70%;
  573. margin: 0 auto;
  574. }
  575.  
  576. .channel-notices .channel-notice.quickswitcher-notice {
  577. background-color: rgba(0,0,0,0.7);
  578. }
  579.  
  580. .channel-notices .channel-notice .message .btn {
  581. border: none;
  582. background-color: var(--accent-color);
  583. transition: all 100ms ease-in-out;
  584. }
  585.  
  586. .channel-notices .channel-notice .message .btn:hover {
  587. color: #000;
  588. font-weight: bold;
  589. background-color: var(--main-color);
  590. }
  591.  
  592. .btn-hamburger {
  593. margin-right:-30px;
  594. }
  595.  
  596. .btn-hamburger span {
  597. background:#fff;
  598. }
  599.  
  600. .account {
  601. z-index:9;
  602. border-top:none !important;
  603. width:320px;
  604. margin-left:-80px;
  605. padding:0 15px !important;
  606. background:rgba(0,0,0,0.95);
  607. height:77px;
  608. box-sizing:border-box;
  609. }
  610.  
  611. .account .status {
  612. border:2px solid rgba(0,0,0,1);
  613. }
  614.  
  615. .account .btn {
  616. background:transparent;/*#000;*/
  617. box-shadow:none !important;
  618. }
  619.  
  620. .account .btn:active {
  621. background:#000;
  622. }
  623.  
  624. .account .btn-settings:after {
  625. opacity:0.3;
  626. }
  627.  
  628. .account .btn-deafen,
  629. .account .btn-mute {
  630. border-right:none;/*1px solid #101010;*/
  631. }
  632.  
  633. #rtc-connection,
  634. #voice-connection {
  635. z-index:9;
  636. border-top:none !important;
  637. /*width:285px;
  638. margin-left:-83px;*/
  639. padding:15px 20px 15px 18px !important;
  640. }
  641.  
  642. #rtc-connection .btn,
  643. #voice-connection .btn {
  644. background:#000;
  645. box-shadow:none !important;
  646. }
  647.  
  648. .account .btn-deafen, .account .btn-settings {
  649. box-shadow:none !important;
  650. }
  651.  
  652. .account .btn-group,
  653. #rtc-connection .btn-group,
  654. #voice-connection .btn-group {
  655. border:none;
  656. }
  657.  
  658. .account .avatar-small {
  659. margin:0 0 0 10px;
  660. }
  661.  
  662. .message-group .comment {
  663. background:transparent !important;
  664. border:none !important;
  665. }
  666.  
  667. /*
  668. _ _ _ _
  669. ___| |__ __ _| |_ ___ ___ ___| |_(_) ___ _ __
  670. / __| '_ \ / _` | __| / __|/ _ \/ __| __| |/ _ \| '_ \
  671. | (__| | | | (_| | |_ \__ \ __/ (__| |_| | (_) | | | |
  672. \___|_| |_|\__,_|\__| |___/\___|\___|\__|_|\___/|_| |_|
  673.  
  674. */
  675.  
  676. .channel-text-area-default {
  677. margin: 10px 0 17px;
  678. }
  679.  
  680. .inner-zqa7da {
  681. background: transparent !important;
  682. padding: 0 10px;
  683. }
  684.  
  685. .search-answer,
  686. .search-filter {
  687. background-color: var(--accent-color) !important;
  688. }
  689.  
  690. .search-popout {
  691. background-color: var(--dark-color);
  692. /*position: absolute !important;
  693. top: 55px !important;
  694. right: 162px !important;
  695. left: auto !important;*/
  696. }
  697.  
  698. .search-popout .option:after {
  699. background: transparent;
  700. }
  701.  
  702. .search-popout .option.selected {
  703. background-color: rgba(5, 5, 6, 0.9) !important;
  704. box-shadow: 0 0 5px rgba(0,0,0,0.8);
  705. }
  706.  
  707. .search-popout .option.selected:after {
  708. background: transparent !important;
  709. }
  710.  
  711. .search-results-wrap {
  712. background-color: rgba(0, 0, 0, 0.9) !important;
  713. }
  714.  
  715. .search-results-wrap .search-header {
  716. background: transparent !important;
  717. }
  718.  
  719. .search-results-wrap .channel-separator:before {
  720. border: none;
  721. }
  722.  
  723. .search-results-wrap .channel-separator .channel-name {
  724. background-color: transparent !important;
  725. }
  726.  
  727. .search-results-wrap .search-result:before {
  728. background: transparent !important;
  729. border-top: 1px solid rgba(0,0,0,0.3);
  730. }
  731.  
  732. .search-results-wrap .search-result:after {
  733. background: transparent !important;
  734. }
  735.  
  736. .search-results-wrap .search-result:not(.expanded) .search-result-message.hit,
  737. .search-results-wrap .search-result.expanded {
  738. border: 2px solid rgba(17, 21, 25, 0.6) !important;
  739. }
  740.  
  741. .search-results-wrap .search-result .hit {
  742. background-color: rgba(0, 0, 0, 0.9) !important;
  743. box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.45) !important;
  744. }
  745.  
  746. .theme-dark .search-results-wrap .action-buttons .jump-button {
  747. background-color: rgba(240, 240, 240, 0.07);
  748. }
  749.  
  750. .search-popout .date-picker .date-picker-hint .hint-value {
  751. background: var(--main-color) !important;
  752. }
  753.  
  754. .search-popout .date-picker .date-picker-hint {
  755. border-top: none !important;
  756. }
  757.  
  758. .theme-dark .search-results-wrap .scroller-wrap .scroller::-webkit-scrollbar-track-piece {
  759. border:3px solid rgba(255,255,255,0) !important;
  760. background-color:rgba(0,0,0,0.3) !important;
  761. }
  762.  
  763. .theme-dark .search-results-wrap .scroller-wrap .scroller::-webkit-scrollbar-thumb {
  764. border:3px solid rgba(255,255,255,0) !important;
  765. background-color:var(--accent-color) !important;
  766. }
  767.  
  768. .search-popout .date-picker {
  769. border-top: none !important;
  770. }
  771.  
  772. .react-datepicker {
  773. background-color: rgba(0,0,0,0.6) !important;
  774. color: rgba(255, 255, 255, 0.6) !important;
  775. }
  776.  
  777. .react-datepicker .react-datepicker__header {
  778. background-color: transparent !important;
  779. }
  780.  
  781. .react-datepicker .react-datepicker__day--disabled,
  782. .react-datepicker .react-datepicker__day--outside-month {
  783. background-color: rgba(255, 255, 255, 0.07) !important;
  784. color: rgba(167, 167, 167, 0.6) !important;
  785. }
  786.  
  787. .react-datepicker .react-datepicker__day {
  788. color: #fff;
  789. border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  790. border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
  791. }
  792.  
  793. .react-datepicker .react-datepicker__month>.react-datepicker__week:last-of-type .react-datepicker__day {
  794. border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  795. }
  796.  
  797. .react-datepicker .react-datepicker__month .react-datepicker__week>.react-datepicker__day:last-of-type {
  798. border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  799. }
  800.  
  801. .react-datepicker .react-datepicker__day.react-datepicker__day--today:after {
  802. background-color: var(--main-color) !important;
  803. }
  804.  
  805. .react-datepicker .react-datepicker__day.react-datepicker__day--selected:hover, .react-datepicker .react-datepicker__day:hover {
  806. background-color: var(--main-color) !important;
  807. }
  808.  
  809. .header-2BwW8b-toolbar button span {
  810. background-size: 22px;
  811. }
  812.  
  813. .header-2BwW8b-toolbar button.popout-open {
  814. background:var(--main-color);
  815. }
  816.  
  817. .channel-pins-wrap {
  818. background: rgba(0,0,0,0.9) !important;
  819. }
  820.  
  821. .channel-pins-wrap .header-2BwW8b,
  822. .channel-pins-wrap .footer {
  823. background-color: rgba(0,0,0,0.95) !important;
  824. box-shadow: none !important;
  825. }
  826.  
  827. .channel-pins .message-group {
  828. background-color: rgba(0,0,0,0.7) !important;
  829. }
  830.  
  831. .channel-pins .message-group:hover {
  832. box-shadow: 0 0 4px 5px rgba(37, 172, 232, 0.1);
  833. border-color: rgba(37, 172, 232, 0.47) !important;
  834. }
  835.  
  836. .channel-pins .message-group .action-buttons {
  837. box-shadow: none !important;
  838. background: none !important;
  839. }
  840.  
  841. .channel-pins .message-group .action-buttons .jump-button {
  842. background-color: rgba(255,255,255,0.15) !important;
  843. }
  844.  
  845. .spinner-wandering-cubes .spinner-item {
  846. background-color:var(--main-color);
  847. width:15px;
  848. height:15px;
  849. border-radius:4px;
  850. }
  851.  
  852. .chat-3bRxxu .has-more button {
  853. color:var(--main-color) !important;
  854. background:rgba(255,255,255,0.1) !important;
  855. border:none !important;
  856. box-shadow:none !important;
  857. }
  858.  
  859. .highlight {
  860. color:var(--main-color);
  861. }
  862.  
  863. .emoji-picker {
  864. background:rgba(0,0,0,0.85) !important;
  865. }
  866.  
  867. .emoji-picker .search-bar input {
  868. color:rgba(255,255,255,0.7);
  869. background:rgba(255,255,255,0.1);
  870. }
  871.  
  872. .emoji-picker .search-bar-clear {
  873. background:rgba(0,0,0,0.7);
  874. }
  875.  
  876. .emoji-picker .sticky-header,
  877. .emoji-picker .search-bar {
  878. background:rgba(0,0,0,0.95) !important;
  879. }
  880.  
  881. .emoji-picker .categories .item.selected {
  882. border-bottom-color:var(--main-color);
  883. }
  884.  
  885. .chat-3bRxxu .title-3qD0b- {
  886. border-bottom: 1px solid rgba(0,0,0,0.3) !important;
  887. background: rgba(0,0,0,0.95) !important;
  888. box-shadow: none !important;
  889. }
  890.  
  891. .header-2BwW8b-2o-2hj {
  892. border-bottom: 0px solid rgba(0,0,0,0.3) !important;
  893. background: rgba(0,0,0,0.15) !important;
  894. box-shadow: none !important;
  895. height: 49px !important;
  896. }
  897.  
  898. .header-2BwW8b-toolbar button.active {
  899. background-color:rgba(255,255,255,0.1);
  900. }
  901.  
  902. .botTagRegular-2HEhHi,
  903. .need-help-modal .header-2BwW8b {
  904. background:var(--main-color);
  905. padding: 2px 3px;
  906. font-size: 9px;
  907. }
  908.  
  909. .form header {
  910. color:var(--main-color);
  911. }
  912.  
  913. .markdown-modal,
  914. .form .form-inner,
  915. .form .form-header,
  916. .form .form-actions,
  917. .need-help-modal .footer,
  918. .markdown-modal .markdown-modal-footer {
  919. background:rgba(0,0,0,0.85) !important;
  920. color: #fff;
  921. }
  922.  
  923. .alert.form .form-inner .btn {
  924. padding: 0 !important;
  925. border: none !important;
  926. }
  927.  
  928. .channel-notification-settings .content-yTz4x3 label,
  929. .notification-settings-modal .mute-server .checkbox .label span {
  930. color:#fff;
  931. }
  932.  
  933. .notification-settings-modal .notification-settings-modal-channel-settings-list {
  934. box-shadow:none !important;
  935. }
  936.  
  937. .markdown-modal .markdown-modal-header {
  938. color:#fff;
  939. }
  940.  
  941. .form .form-header,
  942. .form .form-actions,
  943. .need-help-modal .footer,
  944. .channel-notification-settings,
  945. .markdown-modal .markdown-modal-header,
  946. .markdown-modal .markdown-modal-footer {
  947. border-color:rgba(255,255,255,0.2);
  948. }
  949.  
  950. .modal-content {
  951. background: transparent !important;
  952. }
  953.  
  954. .modal-content .user-name {
  955. color:#fff;
  956. }
  957.  
  958. .modal-content .form-inner p {
  959. color:rgba(255,255,255,0.7);
  960. }
  961.  
  962. .chat-3bRxxu .new-messages-bar {
  963. background-color:rgba(29,101,134,.9);
  964. }
  965.  
  966. .chat-3bRxxu .new-messages-bar:hover {
  967. background-color:rgba(29,101,134,1);
  968. }
  969.  
  970. .chat-3bRxxu .new-messages-bar button:last-child {
  971. color:rgba(255,255,255,0.5);
  972. }
  973.  
  974. .chat-3bRxxu .empty-message {
  975. border: 0 !important;
  976. background: transparent !important;
  977. height: 40px;
  978. }
  979.  
  980. .chat-3bRxxu-empty {
  981. background:rgba(20,23,27,0.95);
  982. }
  983.  
  984. .chat-3bRxxu>.title-wrap>.title .channel-name {
  985. color:rgba(255,255,255,0.8);
  986. }
  987.  
  988. .chat-3bRxxu>.title-wrap>.topic {
  989. font-size:12px;
  990. margin-top:5px;
  991. color:#656565 !important;
  992. }
  993.  
  994. .markdown-modal .highlight,
  995. .chat-3bRxxu .title-wrap .topic .highlight {
  996. background-color:rgba(255,255,255,.1) !important;
  997. }
  998.  
  999. .markdown-modal .highlight:hover,
  1000. .chat-3bRxxu .title-wrap .topic .highlight:hover {
  1001. background-color:rgba(255,255,255,.2) !important;
  1002. color:var(--main-color) !important;
  1003. }
  1004.  
  1005. .chat-3bRxxu .divider-3gKybi {
  1006. height:25px;
  1007. background:none;
  1008. }
  1009.  
  1010. .chat-3bRxxu .divider-3gKybi>span:before, .chat-3bRxxu .divider-3gKybi>span:after {
  1011. border: 0px;
  1012. }
  1013.  
  1014. .chat-3bRxxu .divider-3gKybi.dividerRed-MKoLlr>span {
  1015. background: rgba(240,71,71,.8) !important;
  1016. }
  1017.  
  1018. .chat-3bRxxu .divider-3gKybi>span {
  1019. /* border: 1px solid rgba(255,255,255,0.2) !important; */
  1020. background:rgba(255,255,255,0.06) !important;
  1021. font-size:12px;
  1022. text-transform:uppercase;
  1023. margin:10px 0px;
  1024. border-radius: 3px;
  1025. opacity: 1;
  1026. padding: 8px 15px;
  1027. line-height: 10px;
  1028. text-align: center;
  1029. }
  1030.  
  1031. .chat-3bRxxu .divider-3gKybi.dividerRed-MKoLlr>span {
  1032. color: rgba(255,255,255,0.9) !important;
  1033. }
  1034.  
  1035. .chat-3bRxxu .divider-3gKybi:not(.dividerRed-MKoLlr)>span {
  1036. color:rgba(255,255,255,1) !important;
  1037. }
  1038.  
  1039. .chat-3bRxxu form {
  1040. border-top: none !important;
  1041. }
  1042.  
  1043. .messages-3amgkR .message-group:not(.has-divider) {
  1044. border-bottom-color:hsla(0,0%,100%,.04) !important;
  1045. }
  1046.  
  1047. .messages-3amgkR .message-group {
  1048. border-bottom: none !important;
  1049. }
  1050.  
  1051. .friends-table .messages-3amgkR .message-group .message-send-failed .markup-2BOw-j,
  1052. .friends-table .messages-3amgkR .message-group .message-send-failed .markup-2BOw-j a,
  1053. .messages-3amgkR .message-group .message-send-failed .markup-2BOw-j,
  1054. .messages-3amgkR .message-group .message-send-failed .markup-2BOw-j a {
  1055. color:rgba(240,71,71,0.5) !important;
  1056. font-style:italic;
  1057. }
  1058.  
  1059. .mentioned .message-text {
  1060. border-radius: 0 !important;
  1061. background: rgba(37,172,232,0.2) !important;
  1062. }
  1063.  
  1064. .mentioned .message-text:after {
  1065. border-radius: 0 !important;
  1066. border-color:var(--main-color) !important;
  1067. background:rgba(37,172,232,0.2) !important;
  1068. }
  1069.  
  1070. .mention {
  1071. color: var(--main-color) !important;
  1072. background-color: var(--main-color-faded) !important;
  1073. padding: 3px 5px;
  1074. border-radius: 5px;
  1075. }
  1076.  
  1077. .messages-3amgkR a {
  1078. color:var(--main-color) !important;
  1079. }
  1080.  
  1081. /*.messages-3amgkR h2 .username-_4ZSMR {
  1082. font-size:0.85em;
  1083. color:rgba(255,255,255,0.8);
  1084. }
  1085.  
  1086. .messages-3amgkR h2 span {
  1087. color:rgba(255,255,255,0.2) !important;
  1088. }*/
  1089.  
  1090. .messages-3amgkR h2 .botTag-2WPJ74 {
  1091. color:rgba(255,255,255,0.8) !important;
  1092. }
  1093.  
  1094. .messages-3amgkR .markup-2BOw-j {
  1095. font-size:0.85em !important;
  1096. line-height:1.4em !important;
  1097. }
  1098.  
  1099. /*.messages-3amgkR .markup-2BOw-j:not([data-colour="true"]) {
  1100. color:rgba(255,255,255,0.5) !important;
  1101. }*/
  1102.  
  1103. .markup-2BOw-j pre {
  1104. border-radius:0 !important;
  1105. background:transparent !important;
  1106. border-color:rgba(255,255,255,0.1) !important;
  1107. }
  1108.  
  1109. .markup-2BOw-j pre code.hljs {
  1110. background:rgba(255,255,255,0.1) !important;
  1111. color:rgba(255,255,255,0.7) !important;
  1112. padding:1em !important;
  1113. }
  1114.  
  1115. .modal-content .markup-2BOw-j code.inline,
  1116. .markup-2BOw-j code.inline {
  1117. background:rgba(255,255,255,0.1) !important;
  1118. color:rgba(255,255,255,0.7) !important;
  1119. padding:0.3em 0.6em !important;
  1120. border-radius:3px !important;
  1121. }
  1122.  
  1123. .messages-3amgkR .markup-2BOw-j .highlight {
  1124. background-color:rgba(29,101,134,.5) !important;
  1125. color:#ddd !important;
  1126. padding: 1px 4px;
  1127. border-radius: 0;
  1128. }
  1129.  
  1130. .messages-3amgkR .markup-2BOw-j .highlight:hover {
  1131. background-color:rgba(29,101,134,1) !important;
  1132. color:#fff !important;
  1133. }
  1134.  
  1135. .messages-3amgkR .invite-button {
  1136. background: rgba(255,255,255,0.07) !important;
  1137. border-color: rgba(255,255,255,0.1) !important;
  1138. }
  1139.  
  1140. .emotewrapper img {
  1141. position: relative;
  1142. top: 7px;
  1143. }
  1144.  
  1145. .textArea-2Spzkt {
  1146. font-size: 0.85rem;
  1147. }
  1148.  
  1149. .channel-textarea-upload {
  1150. border-right-color: hsla(0,0%,100%,.1) !important;
  1151. }
  1152.  
  1153. .channel-textarea-inner {
  1154. border: 2px solid rgba(255,255,255,0.1) !important;
  1155. background:rgba(0,0,0,0.6) !important;
  1156. }
  1157.  
  1158. .channel-textarea-autocomplete-inner {
  1159. border:none !important;
  1160. background:rgba(0,0,0,0.95) !important;
  1161. }
  1162.  
  1163. .channel-textarea-autocomplete-inner header {
  1164. border:none !important;
  1165. background: rgba(37,172,232,0.5) !important;
  1166. color: rgba(255,255,255,0.9) !important;
  1167. }
  1168.  
  1169. .channel-textarea-autocomplete-inner ul li.active {
  1170. background:rgba(255,255,255,0.1) !important;
  1171. }
  1172.  
  1173. .channel-textarea-guard button {
  1174. background:var(--accent-color) !important;
  1175. }
  1176.  
  1177. .channel-textarea-guard button:hover {
  1178. background:var(--main-color) !important;
  1179. }
  1180.  
  1181. .typing-2GQL18 {
  1182. font-size:11px;
  1183. }
  1184.  
  1185. .spoiler span {display:none;}
  1186. .spoiler:before {
  1187. min-height:18px;
  1188. padding-top:2px;
  1189. border-radius:5px;
  1190. background:rgba(25,25,25,0.7);
  1191. }
  1192.  
  1193. #twitchcord-button {
  1194. background-size: 24px;
  1195. background-position: 20px;
  1196. background-color: transparent;
  1197. opacity:0.4;
  1198. }
  1199.  
  1200. #twitchcord-button:hover,
  1201. #twitchcord-button.twitchcord-button-open {
  1202. opacity:1;
  1203. }
  1204.  
  1205. #twitchcord-button-container {
  1206. right:30px !important;
  1207. }
  1208.  
  1209. /*** COMPACT MODE ***/
  1210.  
  1211. .message-group.compact {
  1212. margin-left:0;
  1213. }
  1214.  
  1215. .message-group.compact .timestamp {
  1216. color:rgba(255,255,255,0.3) !important;
  1217. position:relative;
  1218. top:-1px;
  1219. }
  1220.  
  1221. .message-group.compact .message .markup-2BOw-j .user-name {
  1222. margin-right:8px;
  1223. font-size:14px;
  1224. }
  1225.  
  1226. .container-3-pyIM {
  1227. padding-left: 5px;
  1228. }
  1229.  
  1230. /*
  1231. __ _ _ _ _ _
  1232. / _|_ __(_) ___ _ __ __| |___ | (_)___| |_
  1233. | |_| '__| |/ _ \ '_ \ / _` / __| | | / __| __|
  1234. | _| | | | __/ | | | (_| \__ \ | | \__ \ |_
  1235. |_| |_| |_|\___|_| |_|\__,_|___/ |_|_|___/\__|
  1236.  
  1237. */
  1238.  
  1239. #friends .btn,
  1240. .add-friend-popout .btn {
  1241. background-color: var(--main-color) !important;
  1242. }
  1243.  
  1244. .add-friend-popout .btn:disabled {
  1245. background-color: var(--accent-color) !important;
  1246. opacity: 0.4;
  1247. }
  1248.  
  1249. .private-channels .channel.btn-friends .badge {
  1250. margin-right: 10px;
  1251. }
  1252.  
  1253. .private-channels .channel .close {
  1254. margin-right: 5px;
  1255. }
  1256.  
  1257. .activityFeed-28jde9 .headerBar-UHpsPw,
  1258. .applicationStore-1pNvnv .headerBar-UHpsPw {
  1259. background: rgba(0,0,0,0.95) !important;
  1260. }
  1261.  
  1262. .friends-table {
  1263. background:rgba(0,0,0,0.85) !important;
  1264. margin-top:0 !important;
  1265. }
  1266.  
  1267. .friends-header,
  1268. .friends-table .friends-table-header {
  1269. border-bottom: 1px solid hsla(0,0%,100%,.1) !important;
  1270. }
  1271.  
  1272. .friends-header .tab-bar .tab-bar-separator,
  1273. .friends-table .friends-table-header .friends-column-separator {
  1274. background-color:hsla(0,0%,100%,.1) !important;
  1275. }
  1276.  
  1277. .friends-table .friends-table-body {
  1278. padding-top:20px !important;
  1279. }
  1280.  
  1281. .friends-table .friends-row:hover {
  1282. background: rgba(0,0,0,0.7) !important;
  1283. }
  1284.  
  1285. /*
  1286. _ _
  1287. ___| |_ ___ _ __ ___ __ _(_) _____ __
  1288. / __| __/ _ \| '__/ _ \ \ \ / / |/ _ \ \ /\ / /
  1289. \__ \ || (_) | | | __/ \ V /| | __/\ V V /
  1290. |___/\__\___/|_| \___| \_/ |_|\___| \_/\_/
  1291.  
  1292. */
  1293.  
  1294. .searchBox-3Y2Vi7 {
  1295. background: rgba(255,255,255,0.1) !important;
  1296. }
  1297.  
  1298.  
  1299. .itemBackground-1jfD8p:before {
  1300. background: radial-gradient(ellipse at top,transparent,#111),
  1301. -webkit-gradient(linear,left top,right top,from(#111),color-stop(40%,transparent),color-stop(60%,transparent),to(#111)),
  1302. -webkit-gradient(linear,left bottom,left top,from(#111),color-stop(25%,transparent)) !important;
  1303. }
  1304.  
  1305. /*
  1306. _ _ _ _ _
  1307. _ _ ___ ___ _ __ | (_)___| |_ ___ ___ ___| |_(_) ___ _ __
  1308. | | | / __|/ _ \ '__| | | / __| __| / __|/ _ \/ __| __| |/ _ \| '_ \
  1309. | |_| \__ \ __/ | | | \__ \ |_ \__ \ __/ (__| |_| | (_) | | | |
  1310. \__,_|___/\___|_| |_|_|___/\__| |___/\___|\___|\__|_|\___/|_| |_|
  1311.  
  1312. */
  1313.  
  1314. .members-1998pB .member-3W1lQa.popout-open,
  1315. .members-1998pB .member-3W1lQa:hover {
  1316. background: rgba(255,255,255,0.07) !important;
  1317. }
  1318.  
  1319. .members-1998pB .invite-btn {
  1320. background:var(--accent-color);
  1321. }
  1322.  
  1323. .members-1998pB .invite-btn:hover {
  1324. background:var(--main-color);
  1325. }
  1326.  
  1327. .members-1998pB .botTag-2WPJ74 {
  1328. padding: 0px 3px;
  1329. }
  1330.  
  1331. .members-1998pB .member-3W1lQa {
  1332. border-radius: 0 5px 5px 0;
  1333. }
  1334.  
  1335. .members-1998pB .member-3W1lQa:hover {
  1336. background:rgba(255,255,255,0.07) !important;
  1337. }
  1338.  
  1339. .members-1998pB .member-3W1lQa .username-1cB_5E {
  1340. font-size:12px;
  1341. }
  1342.  
  1343. .members-1998pB .member-3W1lQa .activityText-sLG0UL {
  1344. font-size:10px;
  1345. }
  1346.  
  1347. .members-1998pB .avatar-small .status {
  1348. border-color:rgba(0,0,0,0.7) !important;
  1349. }
  1350.  
  1351. .members-1998pB h2 {
  1352. background: rgba(0,0,0,0);
  1353. padding-top: 10px;
  1354. padding-bottom: 10px;
  1355. }
  1356.  
  1357. .members-1998pB .member-3W1lQa+h2 {
  1358. margin-top:12px;
  1359. }
  1360.  
  1361. .members-1998pB h2:first-of-type {
  1362. margin-top:0px !important;
  1363. }
  1364.  
  1365. /*
  1366. _ __ _
  1367. _ _ ___ ___ _ __ (_)_ __ / _| ___ _ __ ___ _ __ ___ _ _| |_
  1368. | | | / __|/ _ \ '__| | | '_ \| |_ / _ \ | '_ \ / _ \| '_ \ / _ \| | | | __|
  1369. | |_| \__ \ __/ | | | | | | _| (_) | | |_) | (_) | |_) | (_) | |_| | |_
  1370. \__,_|___/\___|_| |_|_| |_|_| \___/ | .__/ \___/| .__/ \___/ \__,_|\__|
  1371. |_| |_|
  1372. */
  1373.  
  1374. .headerPlaying-2eYqm9,
  1375. .topSectionPlaying-1J5E4n,
  1376. .topSectionNormal-2-vo2m {
  1377. background: var(--main-color) !important;
  1378. }
  1379.  
  1380. .body-3ND3kc,
  1381. .body-3rkFrF,
  1382. .footer-2J5zqP {
  1383. background-color: var(--dark-color) !important;
  1384. }
  1385.  
  1386. .headerNormal-1cioxU {
  1387. background: var(--main-color) !important;
  1388. position: relative;
  1389. z-index: 1;
  1390. }
  1391.  
  1392. .buttonDefault-2OLW-v,
  1393. .buttonBrandInverted-VFL7Yc {
  1394. background-color: var(--accent-color);
  1395. color: #fff;
  1396. }
  1397.  
  1398. .buttonDefault-2OLW-v:hover,
  1399. .buttonBrandInverted-VFL7Yc:hover {
  1400. background-color: #161921;
  1401. }
  1402.  
  1403. .tab-bar.TOP .tab-bar-item.selected {
  1404. border-bottom: 2px solid #fff !important;
  1405. color: #fff !important;
  1406. }
  1407.  
  1408. .userPopout-3XzG_A .header-2BwW8b:after {
  1409. z-index: 2;
  1410. position: absolute;
  1411. top: 0;
  1412. left: 0;
  1413. width: 100%;
  1414. height: 100%;
  1415. background: rgba(0,0,0,0.5);
  1416. content: '';
  1417. }
  1418.  
  1419. .userPopout-3XzG_A .avatarWrapper-3H_478,
  1420. .userPopout-3XzG_A .nameTag-m8r81H {
  1421. z-index: 10;
  1422. }
  1423.  
  1424. .userPopout-3XzG_A .activity-11LB_k,
  1425. .userPopout-3XzG_A .body-3iLsc4,
  1426. .userPopout-3XzG_A .footer-1fjuF6 {
  1427. position: relative;
  1428. z-index: 10;
  1429. }
  1430.  
  1431. .userPopout-3XzG_A .avatarWrapper-3H_478 .avatar-popout {
  1432. border: none !important;
  1433. background-color:rgba(0,0,0,0.9);
  1434. box-shadow: 0 10px 40px -8px rgba(0,0,0,1);
  1435. }
  1436.  
  1437. .userPopout-3XzG_A .body-3iLsc4 {
  1438. background:rgba(0,0,0,0.8);
  1439. border-left:1px solid rgba(255,255,255,0.2);
  1440. border-right:1px solid rgba(255,255,255,0.2);
  1441. }
  1442.  
  1443. .userPopout-3XzG_A .footer-1fjuF6 {
  1444. background:rgba(0,0,0,0.8);
  1445. border-top:1px solid rgba(255,255,255,0.2);
  1446. border-left:1px solid rgba(255,255,255,0.2);
  1447. border-right:1px solid rgba(255,255,255,0.2);
  1448. border-bottom:1px solid rgba(255,255,255,0.2);
  1449. }
  1450.  
  1451. .quick-message {
  1452. color: #fff;
  1453. border: 1px solid rgba(224, 229, 232, 0.26);
  1454. background: rgb(0, 0, 0);
  1455. }
  1456.  
  1457. .userPopout-3XzG_A .nameTag-m8r81H .game,
  1458. .userPopout-3XzG_A .nameTag-m8r81H:not(.headerTagNoNickname-ENx6no) .discriminator,
  1459. .userPopout-3XzG_A .nameTag-m8r81H:not(.headerTagNoNickname-ENx6no) .username {
  1460. color:rgba(0,0,0,0.7);
  1461. }
  1462.  
  1463. .popout-3sVMXz header,
  1464. .slider-bar-fill {
  1465. background-color:var(--main-color);
  1466. border:1px solid var(--main-color);
  1467. }
  1468.  
  1469. .userPopout-3XzG_A .userPopout-3XzG_A-options .btn {
  1470. background-color:var(--accent-color);
  1471. border:1px solid var(--accent-color);
  1472. }
  1473.  
  1474. .userPopout-3XzG_A .userPopout-3XzG_A-options .btn:hover {
  1475. background-color:var(--main-color);
  1476. border:1px solid var(--main-color);
  1477. }
  1478.  
  1479. /* Admin buttons */
  1480. .userPopout-3XzG_A .userPopout-3XzG_A-options .btn.btn-server {
  1481. color: rgba(255,255,255,0.7);
  1482. background: rgba(240,71,71,0.4);
  1483. border: none !important;
  1484. }
  1485.  
  1486. .userPopout-3XzG_A .userPopout-3XzG_A-options .btn.btn-server:hover {
  1487. color: rgba(255,255,255,1);
  1488. background: rgba(240,71,71,1);
  1489. border: none !important;
  1490. }
  1491.  
  1492. .markdown-modal, .form .form-inner, .form .form-header, .form .form-actions, .need-help-modal .footer, .markdown-modal .markdown-modal-footer {
  1493. background: #161921 !important;
  1494. }
  1495.  
  1496. .need-help-modal.deprecated .header-2BwW8b input[type=text]:focus {
  1497. border: none !important;
  1498. }
  1499.  
  1500. .need-help-modal.deprecated .header-2BwW8b input[type=text] {
  1501. box-shadow: none !important;
  1502. }
  1503.  
  1504. /*
  1505. _ _ _ _
  1506. _ __ ___ (_)_ __ (_)_ __ ___ __ _| | _ __ ___ ___ __| | ___
  1507. | '_ ` _ \| | '_ \| | '_ ` _ \ / _` | | | '_ ` _ \ / _ \ / _` |/ _ \
  1508. | | | | | | | | | | | | | | | | (_| | | | | | | | | (_) | (_| | __/
  1509. |_| |_| |_|_|_| |_|_|_| |_| |_|\__,_|_| |_| |_| |_|\___/ \__,_|\___|
  1510.  
  1511. */
  1512.  
  1513. /* SERVER LIST */
  1514. .bd-minimal a,
  1515. .bd-minimal .channels-Ie2l6A ul {
  1516. padding:5px 5px 5px 10px !important;
  1517. }
  1518.  
  1519. .bd-minimal .guildsWrapper-5TJh6A .guilds-1q_RqH {
  1520. padding-left:10px !important;
  1521. }
  1522.  
  1523. .bd-minimal .guildsWrapper-5TJh6A .guilds-1q_RqH .friends-icon {
  1524. background-size:60% !important;
  1525. }
  1526.  
  1527. .bd-minimal .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ:before {
  1528. width:10px;
  1529. height:25px;
  1530. border-radius:5px;
  1531. margin-top:-13px;
  1532. left:-16px;
  1533. }
  1534.  
  1535. .bd-minimal .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ.unread-qLkInr:before {
  1536. height:10px;
  1537. margin-top:-5px;
  1538. }
  1539.  
  1540. .bd-minimal .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ.selected:before {
  1541. border-radius:5px;
  1542. height:25px;
  1543. margin-top:-13px;
  1544. }
  1545.  
  1546. .bd-minimal .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ,
  1547. .bd-minimal .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ .guildInner-3DSoA4,
  1548. .bd-minimal .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ .guildInner-3DSoA4 .avatar-small,
  1549. .bd-minimal .guildsWrapper-5TJh6A .guilds-1q_RqH .guild-1EfMGQ .guildInner-3DSoA4 .friends-icon {
  1550. width:25px;
  1551. height:25px;
  1552. line-height:25px;
  1553. background-size:25px 25px;
  1554. font-size:10px !important;
  1555. }
  1556.  
  1557. .bd-minimal .guildsWrapper-5TJh6A .guilds-1q_RqH .friendsOnline-_wi_fM {
  1558. font-size: 10px;
  1559. word-spacing: 50px;
  1560. line-height: 20px;
  1561. margin-left: 0px;
  1562. width: 25px;
  1563. height: 20px;
  1564. border-radius: 20px;
  1565. overflow: hidden;
  1566. background: rgba(0,0,0,0.5);
  1567. }
  1568.  
  1569. .bd-minimal .guildsWrapper-5TJh6A .guildSeparator-1X4GQ1 {
  1570. width:25px;
  1571. margin-left:0;
  1572. }
  1573.  
  1574. /* CHAT */
  1575. .bd-minimal .chat-3bRxxu>.title-wrap>.title {
  1576. font-size: 16px;
  1577. }
  1578.  
  1579. .bd-minimal .theme-dark .comment {
  1580. border-left:none !important;
  1581. padding-left:10px;
  1582. }
  1583.  
  1584. .bd-minimal .message-group {
  1585. padding:10px 5px;
  1586. }
  1587.  
  1588. .bd-minimal .avatar-large {
  1589. border-radius:100%;
  1590. }
  1591.  
  1592. .bd-minimal .message-group .edit-message .edit-container-outer {
  1593. margin-left:50px;
  1594. }
  1595.  
  1596. .bd-minimal .message-group .edit-message .edit-container-inner {
  1597. margin-left:10px;
  1598. }
  1599.  
  1600. /* MEMBERS */
  1601. .bd-minimal .members-1998pB h2 {
  1602. margin-top:10px;
  1603. margin-bottom:3px;
  1604. padding-left:20px;
  1605. }
  1606.  
  1607. .bd-minimal .members-1998pB h2:first-of-type {
  1608. margin-top:0px;
  1609. margin-bottom:3px;
  1610. }
  1611.  
  1612. .bd-minimal .members-1998pB .member-3W1lQa {
  1613. padding:5px 15px 8px 20px;
  1614. }
  1615.  
  1616. /* CHANNELS */
  1617. .bd-minimal .header-2o-2hj header span {
  1618. margin-left:-7px;
  1619. font-size:14px;
  1620. }
  1621.  
  1622. .bd-minimal .channels-Ie2l6A .channel-name {
  1623. padding-left:5px;
  1624. }
  1625.  
  1626. .bd-minimal .channels-Ie2l6A header:first-of-type {
  1627. margin-top:5px;
  1628. }
  1629.  
  1630. .bd-minimal .channels-Ie2l6A .channel-text.unread:not(.selected):not(.channel-muted):before {
  1631. top:9px;
  1632. width:10px;
  1633. height:10px;
  1634. }
  1635.  
  1636. .bd-minimal .channels-Ie2l6A h2 {
  1637. margin-left:15px;
  1638. }
  1639.  
  1640. /* ACCOUNT BAR */
  1641. .bd-minimal #rtc-connection,
  1642. .bd-minimal #voice-connection {
  1643. width:176px;
  1644. margin-left:-46px;
  1645. }
  1646.  
  1647. .bd-minimal .account {
  1648. width:206px;
  1649. margin-left:-46px;
  1650. }
  1651.  
  1652. .bd-minimal .account .avatar-small {
  1653. display:block !important;
  1654. margin-left:2px;
  1655. }
  1656.  
  1657. .bd-minimal .account .username {
  1658. display:none;
  1659. }
  1660.  
  1661. .bd-minimal .account .btn-group {
  1662. margin-left:10px;
  1663. }
  1664.  
  1665. .bd-minimal .account .btn-group .btn {
  1666. width:30px;
  1667. }
  1668.  
  1669. /* BD Settings */
  1670.  
  1671. #bd-settingspane-container .content-yTz4x3-column {
  1672. color: rgba(255,255,255,0.9);
  1673. }
  1674.  
  1675. #bd-settingspane-container .content-yTz4x3-column h2 {
  1676. font-size: 22px;
  1677. text-transform: uppercase;
  1678. font-weight: bold;
  1679. }
  1680.  
  1681. #bd-settingspane-container .content-yTz4x3-column .ui-switch-item,
  1682. #bd-settingspane-container .content-yTz4x3-column .ui-switch-item div {
  1683. justify-content: space-between !important;
  1684. }
  1685.  
  1686. #bd-settingspane-container .content-yTz4x3-column .ui-switch-item {
  1687. background: var(--dark-color) !important;
  1688. margin-bottom: 20px;
  1689. border-radius: 5px;
  1690. padding: 15px 15px 0 15px;
  1691. }
  1692.  
  1693. #bd-settingspane-container .content-yTz4x3-column .ui-switch-item .ui-form-text {
  1694. font-size: 14px;
  1695. font-weight: 500;
  1696. color: rgba(255,255,255,0.35);
  1697. }
  1698.  
  1699. #bd-settingspane-container .ui-switch-item .style-description {
  1700. border: none;
  1701. }
  1702.  
  1703. .ace_editor,
  1704. .ace_gutter {
  1705. background: var(--dark-color) !important;
  1706. }
  1707.  
  1708. .ace_gutter {
  1709. border-right: 1px solid rgba(255,255,255,0.1);
  1710. }
  1711.  
  1712. .ace_gutter-cell,
  1713. .ace_gutter-cell,
  1714. .ace-line,
  1715. .ace_text-input {
  1716. height: 25px;
  1717. }
  1718.  
  1719.  
  1720.  
  1721. }
  1722.  
  1723. #emoteBlistTa {
  1724. color: #fff;
  1725. padding: 10px 10px 0 10px;
  1726. margin: 10px 0;
  1727. border-radius: 3px;
  1728. background: rgba(0,0,0,0.4) !important;
  1729. border-color: rgba(255,255,255,0.2);
  1730. outline: none;
  1731. }
  1732.  
  1733. .contentRegion-3nDuYy .CodeMirror,
  1734. .contentRegion-3nDuYy .cm-s-material .CodeMirror-gutters,
  1735. #bd-customcss-detach-container .CodeMirror,
  1736. #bd-customcss-detach-container .cm-s-material .CodeMirror-gutters {
  1737. background: rgba(0, 0, 0, 0.5)!important;
  1738. border-radius: 5px;
  1739. }
  1740.  
  1741. .contentRegion-3nDuYy #bd-customcss-attach-controls,
  1742. #bd-customcss-detach-container #bd-customcss-attach-controls {
  1743. box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
  1744. }
  1745.  
  1746. #bd-customcss-attach-controls {
  1747. padding: 10px 15px 10px 25px;
  1748. height: 75px;
  1749. display: flex;
  1750. justify-content: space-between;
  1751. align-items: center;
  1752. }
  1753.  
  1754. .standardSidebarView-3F1I7i #bd-customcss-attach-controls button,
  1755. .bd-detached-css-editor #bd-customcss-attach-controls button {
  1756. width: auto !important;
  1757. border-radius: 3px !important;
  1758. border: none !important;
  1759. margin-left: 7px;
  1760. padding: 5px 15px;
  1761. }
  1762.  
  1763. #bd-customcss-attach-controls button {
  1764.  
  1765. background: var(--accent-color) !important;
  1766. transition: background 100ms ease-in-out;
  1767. }
  1768.  
  1769. #bd-customcss-attach-controls button:hover {
  1770. background: var(--main-color) !important;
  1771. }
  1772.  
  1773. #bd-customcss-detach-controls-button {
  1774. text-align: right;
  1775. }
  1776.  
  1777. #bd-customcss-detach-controls-button span {
  1778. display: block;
  1779. text-align: right;
  1780. padding-top: 10px;
  1781. color: rgba(255,255,255,0.5);
  1782. }
  1783.  
  1784. #bd-customcss-detach-container {
  1785. background-color: rgba(0,0,0,1);
  1786. }
  1787.  
  1788. #bd-customcss-detach-container .standardSidebarView-3F1I7i #bd-customcss-attach-controls button,
  1789. #bd-customcss-detach-container .bd-detached-css-editor #bd-customcss-attach-controls button {
  1790. padding: 5px 7px;
  1791. }
  1792.  
  1793. #bd-customcss-detach-container #bd-customcss-attach-controls {
  1794. padding: 10px 15px 10px 15px;
  1795. }
  1796.  
  1797. .contentRegion-3nDuYy .CodeMirror-scroll {
  1798. padding-top: 10px;
  1799. }
  1800.  
  1801. .CodeMirror-lines {
  1802. padding: 4px 10px;
  1803. }
  1804.  
  1805. .CodeMirror pre {
  1806. padding: 0 5px;
  1807. }
  1808.  
  1809. .CodeMirror-gutter {
  1810. margin-right: 20px;
  1811. }
  1812.  
  1813. /*
  1814. _ _ _
  1815. ___ ___| |_| |_(_)_ __ __ _ ___
  1816. / __|/ _ \ __| __| | '_ \ / _` / __|
  1817. \__ \ __/ |_| |_| | | | | (_| \__ \
  1818. |___/\___|\__|\__|_|_| |_|\__, |___/
  1819. |___/
  1820. */
  1821.  
  1822. .wrapper-O5i5-0,
  1823. .modal-3HD5ck,
  1824. .footer-2yfCgX,
  1825. .form-deprecated .form-header,
  1826. .form-deprecated .form-inner,
  1827. .wrapper-O5i5-0 .instantInviteModal-3vhcvC .form-actions,
  1828. .wrapper-O5i5-0 .instantInviteModalAdvanced-3qJETM .form-actions {
  1829. background: var(--dark-color) !important;
  1830. }
  1831.  
  1832. .form-deprecated .Select-control .Select-arrow {
  1833. top: 0;
  1834. }
  1835.  
  1836. .form-deprecated .Select-option.is-focused {
  1837. background: #050505;
  1838. color: #dcddde;
  1839. }
  1840.  
  1841. .form-deprecated .btn-primary, .form.deprecated .btn-primary {
  1842. background: var(--main-color) !important;
  1843. }
  1844.  
  1845. .Select-option {
  1846. background: rgba(0,0,0,0.85);
  1847. }
  1848.  
  1849. .Select-option.is-selected {
  1850. background: rgba(0,0,0,1);
  1851. }
  1852.  
  1853. .button-38aScr {
  1854. margin-left: 10px;
  1855. }
  1856.  
  1857. .clipboardInputInner-1EXMA3,
  1858. .Select-control {
  1859. border: none !important;
  1860. background: rgba(0,0,0,0.8) !important;
  1861. }
  1862.  
  1863. .wrapper-O5i5-0 .instantInviteModal-3vhcvC .clipboardInputInner-RLx2hK input {
  1864. color: rgba(255,255,255,0.7);
  1865. background: rgba(0,0,0,0.85);
  1866. font-size: 20px;
  1867. padding-left: 15px;
  1868. }
  1869.  
  1870. .wrapper-O5i5-0 .instantInviteModal-3vhcvC .copy-3nFbq8 {
  1871. border: none !important;
  1872. background: var(--main-color) !important;
  1873. }
  1874.  
  1875. .clipboardInputInner-1EXMA3 button:first-of-type:before {
  1876. background: none !important;
  1877. }
  1878.  
  1879. .side-8zPYf6 .itemSelected-1qLhcL {
  1880. background-color: var(--main-color);
  1881. }
  1882.  
  1883. .layer-3QrUeG {
  1884. background: rgba(0,0,0,0.4) !important;
  1885. }
  1886.  
  1887. .ui-text-input .input.editable:focus:focus,
  1888. .ui-text-input .input.editable:hover:focus,
  1889. .ui-text-input .input:focus {
  1890. border-color: var(--main-color) !important;
  1891. }
  1892.  
  1893. .description-3_Ncsb,
  1894. .labelDescriptor-1PqHgD {
  1895. color: rgba(255,255,255,0.35);
  1896. }
  1897.  
  1898. .buttonBrandFilled-3Mv0Ra {
  1899. background: var(--accent-color);
  1900. box-shadow: 0 10px 30px -8px rgba(0,0,0,0);
  1901. transition: all 100ms ease-in-out;
  1902. transform: translate3d(0,0,0);
  1903. }
  1904.  
  1905. .buttonBrandFilledDefault-2Rs6u5:hover {
  1906. color: rgba(0,0,0,0.8);
  1907. font-weight: bold;
  1908. background: var(--main-color);
  1909. box-shadow: 0 10px 30px -8px rgba(0,0,0,0.8);
  1910. transform: translate3d(0,-3px,0);
  1911. }
  1912.  
  1913. .ui-slider .slider-bar-fill {
  1914. background: var(--main-color);
  1915. }
  1916.  
  1917. .standardSidebarView-3F1I7i {
  1918. background: transparent !important;
  1919. }
  1920.  
  1921. .standardSidebarView-3F1I7i .sidebarRegion-VFTUkN,
  1922. .standardSidebarView-3F1I7i .sidebarRegion-VFTUkN .scrollbar {
  1923. background: rgba(0,0,0,0.7) !important;
  1924. }
  1925.  
  1926. .standardSidebarView-3F1I7i .contentRegion-3nDuYy,
  1927. .standardSidebarView-3F1I7i .contentRegion-3nDuYy .scrollbar {
  1928. background: rgba(0,0,0,0.8) !important;
  1929. }
  1930.  
  1931. .ui-tab-bar.SIDE .ui-tab-bar-item {
  1932. font-size: 14px;
  1933. line-height: 17px;
  1934. }
  1935.  
  1936. .ui-tab-bar.SIDE .ui-tab-bar-item.selected {
  1937. color: rgba(255,255,255,1) !important;
  1938. background: var(--short-gradient) !important;
  1939. }
  1940.  
  1941. .ui-tab-bar-item:hover {
  1942. background: var(--short-gradient-faded) !important;
  1943. }
  1944.  
  1945. .ui-radiogroup .checked {
  1946. border-color: rgba(0,0,0,1) !important;
  1947. background: var(--short-gradient) !important;
  1948. }
  1949.  
  1950. .ui-tab-bar-item,
  1951. .ui-tab-bar.SIDE .ui-tab-bar-item.brand {
  1952. color: rgba(255,255,255,0.6) !important;
  1953. }
  1954.  
  1955. .ui-button.brand.filled {
  1956. color: rgba(255,255,255,0.6);
  1957. box-shadow: 0 0px 20px 0px rgba(0,0,0,0);
  1958. transform: translate3d(0,0,0);
  1959. background: var(--short-gradient) !important;
  1960. -webkit-transition: 200ms all cubic-bezier(0.13, 0.28, 0.19, 0.89);
  1961. }
  1962.  
  1963. .ui-button.brand.filled:hover {
  1964. color: rgba(255,255,255,1);
  1965. box-shadow: 0 10px 20px 0px rgba(0,0,0,0.5);
  1966. transform: translate3d(0,-3px,0);
  1967. background: var(--short-gradient) !important;
  1968. }
  1969.  
  1970. .ui-radiogroup .checked svg g polyline {
  1971. stroke: #fff !important;
  1972. }
  1973.  
  1974. .avatar-xxlarge {
  1975. box-shadow: 0 10px 20px 2px rgba(0,0,0,0.5);
  1976. }
  1977.  
  1978. /* OLD SETTINGS */
  1979.  
  1980. .context-menu {
  1981. background: rgba(0,0,0,0.95) !important;
  1982. }
  1983.  
  1984. .context-menu .item:hover,
  1985. .context-menu .item-subMenu {
  1986. background-color:rgba(255,255,255,0.05) !important;
  1987. }
  1988.  
  1989. .avatar-uploader a {
  1990. color:var(--main-color);
  1991. }
  1992.  
  1993. .avatar-uploader a:hover {
  1994. color:var(--accent-color);
  1995. }
  1996.  
  1997. .settings .settings-header {
  1998. background:#1a1d20 !important;
  1999. }
  2000.  
  2001. .form .btn-primary {
  2002. background-color:var(--accent-color);
  2003. }
  2004.  
  2005. .form .btn-primary:hover {
  2006. background-color:var(--main-color);
  2007. }
  2008.  
  2009. .user-settings-modal a {
  2010. color:var(--accent-color);
  2011. }
  2012.  
  2013. .user-settings-modal a:hover {
  2014. color:var(--main-color);
  2015. }
  2016.  
  2017. .channel-notification-settings .content-yTz4x3 .content-yTz4x3-inner {
  2018. background:transparent !important;
  2019. }
  2020.  
  2021. .callout-backdrop {
  2022. opacity:0.55;
  2023. }
  2024.  
  2025. .tab-bar.SIDE {
  2026. margin-right: -17px;
  2027. }
  2028.  
  2029. .tab-bar.SIDE .tab-bar-item.selected {
  2030. background: rgba(0,0,0,0.7) !important;
  2031. }
  2032.  
  2033. .tab-bar.SIDE .tab-bar-item.selected:before {
  2034. border-color:var(--main-color);
  2035. }
  2036.  
  2037. .tab-bar.SIDE .tab-bar-item:before {
  2038. border-color:var(--accent-color);
  2039. }
  2040.  
  2041. .popout header,
  2042. .slider-bar-fill {
  2043. border:none !important;
  2044. }
  2045.  
  2046. .slider-handle,
  2047. .Select-control {
  2048. border:none !important;
  2049. }
  2050.  
  2051. .slider-bar {
  2052. background: rgba(255,255,255,0.5);
  2053. }
  2054.  
  2055. .settings .settings-header {
  2056. background:rgba(0,0,0,0.88) !important;
  2057. }
  2058.  
  2059. .settings .settings-inner,
  2060. .settings .settings-actions,
  2061. .deprecated-settings-modal .settings-inner,
  2062. .deprecated-settings-modal .settings-actions {
  2063. background:rgba(0,0,0,0.75);
  2064. }
  2065.  
  2066. .settings .settings-actions {
  2067. border-top:none !important;
  2068. }
  2069.  
  2070. .form .radio-group .radio,
  2071. .form .checkbox-group .checkbox,
  2072. .checkbox .checkbox-inner+span {
  2073. color:rgba(255,255,255,0.7) !important;
  2074. font-size: 0.95em;
  2075. }
  2076.  
  2077. .form .control-group input[type=email],
  2078. .form .control-group input[type=password],
  2079. .form .control-group input[type=text],
  2080. .form .control-group textarea {
  2081. padding:5px 10px 5px 10px;
  2082. border-radius:5px;
  2083. box-sizing:border-box;
  2084. border:1px solid rgba(255,255,255,0.1);
  2085. background:rgba(0,0,0,0.5);
  2086. color:rgba(255,255,255,0.5);
  2087. font-size:14px;
  2088. }
  2089.  
  2090. .form .control-group input[type=email]:focus,
  2091. .form .control-group input[type=password]:focus,
  2092. .form .control-group input[type=text]:focus,
  2093. .form .control-group textarea:focus {
  2094. border-color:rgba(255,255,255,0.3);
  2095. background:rgba(0,0,0,0.7);
  2096. color:rgba(255,255,255,1);
  2097. font-size:14px;
  2098. }
  2099.  
  2100. .form .Select-control,
  2101. .form .Select-option {
  2102. border:1px solid rgba(255,255,255,0.1) !important;
  2103. background:rgba(0,0,0,0.5);
  2104. color:rgba(255,255,255,0.5);
  2105. font-size:14px;
  2106. }
  2107.  
  2108. .form .Select-option {
  2109. border-top:none !important;
  2110. background:rgba(0,0,0,0.7);
  2111. color:rgba(255,255,255,0.4);
  2112. }
  2113.  
  2114. .form .Select-option.is-focused {
  2115. border-top:none !important;
  2116. background:rgba(0,0,0,1);
  2117. color:rgba(255,255,255,1);
  2118. }
  2119.  
  2120. .Select-menu-outer {
  2121. background:rgba(0,0,0,0.5);
  2122. border:none !important;
  2123. }
  2124.  
  2125. .has-value>.Select-control>.Select-placeholder {
  2126. color:rgba(255,255,255,0.8);
  2127. }
  2128.  
  2129. .form .btn-default {
  2130. padding:10px 0 !important;
  2131. width: 75px;
  2132. height: 35.5px;
  2133. border-radius: 3px;
  2134. }
  2135.  
  2136. .form hr,
  2137. .form .control-groups.control-separator,
  2138. .instant-invites .instant-invites-header,
  2139. .guild-1EfMGQ-settings-modal-integrations .guild-1EfMGQ-settings-modal-integrations-header,
  2140. .guild-1EfMGQ-settings-modal-members .guild-1EfMGQ-settings-modal-members-header,
  2141. .guild-1EfMGQ-settings-modal-members .guild-1EfMGQ-settings-modal-list .member-3W1lQa+.member-3W1lQa,
  2142. .guild-1EfMGQ-settings-modal-members .guild-1EfMGQ-settings-modal-members-footer,
  2143. #settings-roles .roles header,
  2144. .modal-1UGdnR .tab-bar {
  2145. border-color:rgba(255,255,255,0.2);
  2146. box-shadow:none;
  2147. }
  2148.  
  2149. .form .control-group input[type=email]:disabled,
  2150. .form .control-group input[type=password]:disabled,
  2151. .form .control-group input[type=text]:disabled,
  2152. .form .control-group textarea:disabled {
  2153. background:rgba(255,255,255,0.2) !important;
  2154. }
  2155.  
  2156. .guild-1EfMGQ-settings-modal-members {
  2157. background:none !important;
  2158. }
  2159.  
  2160. #settings-roles .roles {
  2161. border-right:1px solid rgba(255,255,255,0.2);
  2162. }
  2163.  
  2164. #settings-roles .roles li:hover:before {
  2165. background:var(--accent-color);
  2166. }
  2167.  
  2168. #settings-roles .roles li:hover:not(.selected) {
  2169. background:rgba(0,0,0,0.9) !important;
  2170. }
  2171.  
  2172. #settings-roles .roles li.selected {
  2173. background:rgba(0,0,0,0.5) !important;
  2174. }
  2175.  
  2176. #settings-roles .roles li.selected:before {
  2177. background:var(--main-color);
  2178. }
  2179.  
  2180. .btn-help {
  2181. font-size: 11px;
  2182. background: rgba(255,255,255,0.3);
  2183. }
  2184.  
  2185. .btn-help:hover,
  2186. .radio:hover span:after {
  2187. background:var(--accent-color);
  2188. }
  2189.  
  2190. .radio .radio-inner span:after {
  2191. background:var(--main-color);
  2192. }
  2193.  
  2194. .user-settings-modal-keybinds .user-settings-modal-keybinds-header {
  2195. border-bottom:1px solid rgba(255,255,255,0.2);
  2196. }
  2197.  
  2198. .user-settings-modal .voice-settings .reset-voice-settings {
  2199. color:var(--accent-color);
  2200. }
  2201.  
  2202. .user-settings-modal .voice-settings .reset-voice-settings:hover {
  2203. color:var(--accent-color);
  2204. opacity:0.6;
  2205. }
  2206.  
  2207. .checkbox .checkbox-inner input[type=checkbox]:checked+span {
  2208. background:var(--main-color);
  2209. border-color:var(--main-color);
  2210. }
  2211.  
  2212. .user-settings-modal-connections .user-settings-modal-accounts-list .connect-container .name {
  2213. color:rgba(255,255,255,0.8);
  2214. }
  2215.  
  2216. .user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations.no-integrations {
  2217. color:rgba(255,255,255,0.8);
  2218. }
  2219.  
  2220. .user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations {
  2221. border-color:#643DA7 !important;
  2222. }
  2223.  
  2224. .user-settings-modal-connections .user-settings-modal-connections-list {
  2225. box-shadow: 0 -1px rgba(255,255,255,0.2);
  2226. }
  2227.  
  2228. .tab-bar.TOP {
  2229. border-color:rgba(255,255,255,0.2);
  2230. }
  2231.  
  2232. .tab-bar.TOP .tab-bar-item.selected {
  2233. border-color:var(--main-color);
  2234. color:var(--main-color);
  2235. }
  2236.  
  2237. .user-settings-streamer-mode {
  2238. background:none;
  2239. }
  2240.  
  2241. .user-settings-modal-games {
  2242. background:rgba(255,255,255,0.05) !important;
  2243. border:none !important;
  2244. }
  2245.  
  2246. .user-settings-modal-games .games-table .games-row .item-game,
  2247. .user-settings-modal-games .games-table .games-row .item-overlay {
  2248. border-color:rgba(255,255,255,0.2) !important;
  2249. }
  2250.  
  2251. .user-settings-modal-games .games-table .games-row .item-game .game-input,
  2252. .user-settings-modal-games .games-table .games-row .item-game .game-name {
  2253. color:#fff;
  2254. }
  2255.  
  2256. .user-settings-modal-games .games-table .games-row .item-game .last-played {
  2257. color:rgba(255,255,255,0.5);
  2258. }
  2259.  
  2260. .user-settings-games .now-playing {
  2261. background:var(--main-color) !important;
  2262. }
  2263.  
  2264. .user-settings-games .not-detected {
  2265. background: rgba(0,0,0,0.8);
  2266. }
  2267.  
  2268. .bd-g-table tbody tr,
  2269. .bd-g-table thead th,
  2270. .bd-g-table tbody tr:nth-child(odd) {
  2271. background:transparent !important;
  2272. }
  2273.  
  2274. .bd-g-table textarea {
  2275. color: rgba(255,255,255,0.4) !important;
  2276. background: rgba(255,255,255,0.2) !important;
  2277. padding: 8px 10px !important;
  2278. box-sizing:border-box;
  2279. }
  2280.  
  2281. #bd-pane .scroller-wrap div[style*="background:#2E3136; color:#ADADAD; height:30px; position:absolute; bottom:0; left:0; right:0;"] {
  2282. background:rgba(0,0,0,0.95) !important;
  2283. }
  2284.  
  2285. .CodeMirror {
  2286. background: rgba(255,255,255,0.15) !important;
  2287. border-radius: 0px;
  2288. color: rgba(255,255,255,0.8) !important;
  2289. }
  2290.  
  2291. .CodeMirror-gutters {
  2292. background: rgba(255,255,255,0.25) !important;
  2293. border:none !important;
  2294. }
  2295.  
  2296. .CodeMirror-linenumber {
  2297. color: #fff !important;
  2298. }
  2299.  
  2300. .cm-s-neat span.cm-builtin {
  2301. color:var(--main-color);
  2302. }
  2303.  
  2304. .cm-s-neat span.cm-atom,
  2305. .cm-s-neat span.cm-number {
  2306. color:var(--main-color);
  2307. }
  2308.  
  2309. .member-3W1lQa-roles .member-3W1lQa-role {
  2310. background-color: rgba(255,255,255,0.1);
  2311. border:none;
  2312. padding: 6px 8px;
  2313. color: #fff;
  2314. }
  2315.  
  2316. .popout section {
  2317. background:rgba(0,0,0,0.95) !important;
  2318. }
  2319.  
  2320. .popout.popout-bottom header:before {
  2321. border-bottom-color:var(--accent-color);
  2322. }
  2323.  
  2324. #autocomplete-popout .row.selected,
  2325. #autocomplete-popout .row:hover {
  2326. background:rgba(255,255,255,0.2) !important;
  2327. }
  2328.  
  2329. #permissions .permission-actions {
  2330. color:rgba(255,255,255,0.7) !important;
  2331. }
  2332.  
  2333. #autocomplete-popout .empty h4,
  2334. #permissions .permissions-helpdesk,
  2335. .guild-1EfMGQ-settings-modal-members .guild-1EfMGQ-settings-modal-members-footer a {
  2336. color:var(--main-color);
  2337. }
  2338.  
  2339. #permissions .permissions-helpdesk:hover,
  2340. .guild-1EfMGQ-settings-modal-members .guild-1EfMGQ-settings-modal-members-footer a:hover {
  2341. color:var(--accent-color);
  2342. }
  2343.  
  2344. .modal-1UGdnR {
  2345. border-radius: 5px;
  2346. }
  2347.  
  2348. .modal-1UGdnR .header-QKLPzZ {
  2349. border-radius: 5px 5px 0 0;
  2350. background: var(--main-color-faded);
  2351. /* background-image: none !important; */
  2352. }
  2353.  
  2354. .modal-1UGdnR .header-QKLPzZ:after {
  2355. background-image: none !important;
  2356. background-color: rgba(0, 0, 0, 0.6);
  2357. }
  2358.  
  2359. .modal-1UGdnR .btn {
  2360. background: var(--main-color);
  2361. }
  2362.  
  2363. .modal-1UGdnR .guilds-1q_RqH .section .connected-accounts .connected-account {
  2364. border: 1px solid rgba(255, 255, 255, 0.15);
  2365. background: rgba(0, 0, 0, 0.65);
  2366. }
  2367.  
  2368. .modal-1UGdnR .sub-header,
  2369. .modal-1UGdnR .tab-bar-container,
  2370. .modal-1UGdnR .scroller,
  2371. .modal-1UGdnR .empty,
  2372. .modal-1UGdnR footer {
  2373. background:rgba(0,0,0,0.85) !important;
  2374. }
  2375.  
  2376. .modal-1UGdnR .tab-bar-container {
  2377. border-bottom: 1px solid rgba(240, 240, 240, 0.15) !important;
  2378. }
  2379.  
  2380. .modal-1UGdnR .guilds-1q_RqH .section+.section {
  2381. border-top: 1px solid rgba(240, 240, 240, 0.15) !important;
  2382. }
  2383.  
  2384. .modal-1UGdnR .guilds-1q_RqH .guild-1EfMGQ:hover {
  2385. background:rgba(255,255,255,0.2) !important;
  2386. color:rgba(255,255,255,0.7);
  2387. }
  2388.  
  2389. .modal-1UGdnR .avatar-profile {
  2390. width: 126px !important;
  2391. height: 126px !important;
  2392. }
  2393.  
  2394. .modal-1UGdnR .header-2BwW8b .header-2BwW8b-info .header-2BwW8b-info-inner .discord-tag {
  2395. font-size: 22px !important;
  2396. font-weight: bold !important;
  2397. color: #fff;
  2398. }
  2399.  
  2400. .modal-1UGdnR .header-2BwW8b .header-2BwW8b-info .header-2BwW8b-info-inner .discord-tag .discriminator {
  2401. color: rgba(255, 255, 255, 0.5);
  2402. padding-left: 3px;
  2403. }
  2404.  
  2405. .modal-1UGdnR .header-2BwW8b .header-2BwW8b-info .header-2BwW8b-info-inner .activity {
  2406. color: rgba(255, 255, 255, 0.5);
  2407. }
  2408.  
  2409. .modal-1UGdnR .avatarWrapper-3H_478 {
  2410. background-color: transparent;
  2411. box-shadow: 0 8px 40px -5px rgba(0,0,0,1);
  2412. border-radius: 100%;
  2413. }
  2414.  
  2415.  
  2416. #bd-themes-pane .bda-plugin-reload {
  2417. margin-top:60px;
  2418. }
  2419.  
  2420. #bda-qem-favourite-container,
  2421. #bda-qem-twitch-container,
  2422. .emoji-picker {
  2423. background-color: rgba(0,0,0,0.95) !important;
  2424. border: 0px solid rgba(255,255,255,0.1) !important;
  2425. border-top: none !important;
  2426. }
  2427.  
  2428. .emoji-picker .category {
  2429. background-color: rgba(0,0,0,0.7) !important;
  2430. border: 0px solid rgba(255,255,255,0.2) !important;
  2431. border-top: none !important;
  2432. }
  2433.  
  2434. #bda-qem {
  2435. padding-right: 0px !important;
  2436. border-bottom: 0px solid rgba(0,0,0,0.5) !important;
  2437. background: rgba(0,0,0,0.95) !important;
  2438. }
  2439.  
  2440. #bda-qem button {
  2441. background: rgba(255,255,255,0.1) !important;
  2442. box-shadow: rgba(0,0,0,0.5) 1px 0 0 0 !important;
  2443. }
  2444.  
  2445. #bda-qem button:hover {
  2446. background: rgba(0,0,0,0.6) !important;
  2447. }
  2448.  
  2449. #bda-qem button.active {
  2450. background: rgba(0,0,0,1) !important;
  2451. }
  2452.  
  2453. /* Scrollbar drag bar */
  2454. .emoji-picker .scroller::-webkit-scrollbar-thumb,
  2455. #bda-qem-twitch-container .scroller::-webkit-scrollbar-thumb,
  2456. #bda-qem-favourite-container .scroller::-webkit-scrollbar-thumb {
  2457. background:rgba(255,255,255,0.4) !important;
  2458. border-color:rgba(255,255,255,0) !important;
  2459. }
  2460.  
  2461. /* Scrollbar background */
  2462. .emoji-picker .scroller::-webkit-scrollbar,
  2463. .emoji-picker .scroller::-webkit-scrollbar-track,
  2464. .emoji-picker .scroller::-webkit-scrollbar-track-piece,
  2465. #bda-qem-favourite-container .scroller::-webkit-scrollbar,
  2466. #bda-qem-favourite-container .scroller::-webkit-scrollbar-track,
  2467. #bda-qem-favourite-container .scroller::-webkit-scrollbar-track-piece,
  2468. #bda-qem-twitch-container .scroller::-webkit-scrollbar,
  2469. #bda-qem-twitch-container .scroller::-webkit-scrollbar-track,
  2470. #bda-qem-twitch-container .scroller::-webkit-scrollbar-track-piece {
  2471. background:rgba(255,255,255,0.1) !important;
  2472. border-color:rgba(255,255,255,0) !important;
  2473. }
  2474.  
  2475. .instant-invite-modal {
  2476. background: none;
  2477. }
  2478.  
  2479. #instant-invite-modal .copy {
  2480. background-color: var(--main-color);
  2481. }
  2482.  
  2483. #instant-invite-modal .clipboard-input-inner input {
  2484. color: var(--main-color);
  2485. }
  2486.  
  2487. .popout-menu {
  2488. background: transparent !important;
  2489. }
  2490.  
  2491. .popout-menu.status-picker {
  2492. background: transparent;
  2493. width: 322px !important;
  2494. margin-left: 0px !important;
  2495. margin-bottom: 0 !important;
  2496. }
  2497.  
  2498. .popout-menu .popout-menu-separator {
  2499. border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  2500. }
  2501.  
  2502. .popout-menu .popout-menu-item {
  2503. background: rgba(0,0,0,0.95) !important;
  2504. }
  2505.  
  2506. .popout-top .popout-menu .popout-menu-item {
  2507. color: rgba(255,255,255,0.8) !important;
  2508. }
  2509.  
  2510. .popout-menu .popout-menu-item:hover {
  2511. background-color: var(--accent-color) !important;
  2512. color: rgba(255,255,255,0.8) !important;
  2513. }
  2514.  
  2515. .popout-top {
  2516. top: auto !important;
  2517. bottom: -126px !important;
  2518. }
  2519.  
  2520. .popout-bottom:not(.no-arrow):not(.search-popout) {
  2521. /*left: 191px !important;*/
  2522. }
  2523.  
  2524. .themed-popout {
  2525. background-color: #161921 !important;
  2526. border: 1px solid rgba(255,255,255,0) !important;
  2527. }
  2528.  
  2529. .themed-popout .header-2BwW8b, .themed-popout .footer {
  2530. background-color: rgba(0, 0, 0, 0.4) !important;
  2531. }
  2532.  
  2533. .themed-popout .messages-popout .message-group {
  2534. border-color: rgba(28,36,43,0.6) !important;
  2535. background-color: rgba(0, 0, 0, 0) !important;
  2536. box-shadow: none !important;
  2537. }
  2538.  
  2539. .themed-popout .messages-popout .message-group .comment .markup-2BOw-j {
  2540. font-size: 13px;
  2541. line-height: 1.3;
  2542. }
  2543.  
  2544. .themed-popout .messages-popout .message-group:hover .action-buttons {
  2545. box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.7) !important;
  2546. background-color: rgba(0, 0, 0, 0.8) !important;
  2547. }
  2548.  
  2549. .themed-popout .messages-popout .message-group:hover .action-buttons .jump-button {
  2550. background-color: rgba(240, 240, 240, 0.07) !important;
  2551. }
  2552.  
  2553. /*
  2554. _ _ _ _ _ _
  2555. _ __ _ _| |__ | (_) ___ | | (_)___| |_
  2556. | '_ \| | | | '_ \| | |/ __| | | | / __| __|
  2557. | |_) | |_| | |_) | | | (__ | |___| \__ \ |_
  2558. | .__/ \__,_|_.__/|_|_|\___| |_____|_|___/\__|
  2559. |_|
  2560.  
  2561. */
  2562.  
  2563. #slist,
  2564. #pubs-container {
  2565. background-color:rgba(0,0,0,0.7) !important;
  2566. border-radius:5px 5px 0 0;
  2567. }
  2568.  
  2569. #pubs-header {
  2570. padding:10px;
  2571. background-color:var(--main-color) !important;
  2572. border-radius:5px 5px 0 0;
  2573. }
  2574.  
  2575. #pubs-header input {
  2576. padding-left:10px;
  2577. }
  2578.  
  2579. #pubs-footer {
  2580. padding:10px;
  2581. font-size:12px;
  2582. background:rgba(0,0,0,0.8) !important;
  2583. border-radius:0 0 5px 5px;
  2584. }
  2585.  
  2586. .server-icon {
  2587. width:50px;
  2588. height:50px;
  2589. border-radius:100%;
  2590. }
  2591.  
  2592. .server-row {
  2593. padding:10px 10px 8px 10px;
  2594. }
  2595.  
  2596. .server-info {
  2597. line-height:50px;
  2598. }
  2599.  
  2600. .server-info button {
  2601. background-color:var(--accent-color) !important;
  2602. width:70px;
  2603. height:40px;
  2604. margin-top:4px;
  2605. margin-right:4px;
  2606. }
  2607.  
  2608. .server-info button:hover {
  2609. background-color:var(--main-color) !important;
  2610. }
  2611.  
  2612. #slist span {
  2613. color:white !important;
  2614. }
  2615.  
  2616. .server-row:nth-child(2n+1) {
  2617. background-color:rgba(255,255,255,0.06) !important;
  2618. }
  2619.  
  2620. .server-row:nth-child(2n+2) {
  2621. background-color:rgba(0,0,0,0) !important;
  2622. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement