Advertisement
Guest User

Untitled

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