API tools faq
paste
Wolfgaming

Better Discord Code

Wolfgaming
May 25th, 2017
159
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 155.11 KB | None | 0 0
raw download clone embed print report
  1. /* Version Displayed */
  2. :root {--version-content: "6.5";}
  3.  
  4. body:after {
  5. content: "Current Version: v" var(--version-content);
  6. z-index: 10000000000000000000000000;
  7. color: #fff;
  8. background: var(--main-color);
  9. top: 0;
  10. left: 50%;
  11. position: absolute;
  12. border-radius: 5px;
  13. padding: 5px 15px;
  14. -webkit-transform: translate(-50%, -100%);
  15. transform: translate(-50%, -100%);
  16. -webkit-animation: version 3s ease;
  17. animation: version 3s ease;
  18. -webkit-animation-delay: 1s;
  19. animation-delay: 1s;
  20. }
  21.  
  22. body:before {
  23. content: "Bedankt voor het gebruiken van Discord Reborn!";
  24. z-index: 1000000000000000000000000;
  25. color: #fff;
  26. background: var(--main-color);
  27. top: 0px;
  28. left: 50%;
  29. position: absolute;
  30. border-radius: 5px;
  31. padding: 5px 15px;
  32. -webkit-transform: translate(-50%, -100%);
  33. transform: translate(-50%, -100%);
  34. -webkit-animation: version 3s ease;
  35. animation: version 3s ease;
  36. -webkit-animation-delay: 4s;
  37. animation-delay: 4s;
  38. }
  39.  
  40. @-webkit-keyframes version {
  41. from {
  42. -webkit-transform: translate(-50%, -100%);
  43. transform: translate(-50%, -100%);
  44. }
  45. 20% {
  46. -webkit-transform: translate(-50%, 20%);
  47. transform: translate(-50%, 20%)
  48. }
  49. 80% {
  50. -webkit-transform: translate(-50%, 20%);
  51. transform: translate(-50%, 20%)
  52. }
  53. to {
  54. -webkit-transform: translate(-50%, -100%);
  55. transform: translate(-50%, -100%);
  56. }
  57. }
  58.  
  59. @keyframes version {
  60. from {
  61. -webkit-transform: translate(-50%, -100%);
  62. transform: translate(-50%, -100%);
  63. }
  64. 20% {
  65. -webkit-transform: translate(-50%, 20%);
  66. transform: translate(-50%, 20%)
  67. }
  68. 80% {
  69. -webkit-transform: translate(-50%, 20%);
  70. transform: translate(-50%, 20%)
  71. }
  72. to {
  73. -webkit-transform: translate(-50%, -100%);
  74. transform: translate(-50%, -100%);
  75. }
  76. }
  77.  
  78. .account:after {content: var(--version-content); color: rgba(255,255,255,0.2); font-size: 11px; font-weight: bold; position: absolute; bottom: 0; left: 149px; right: 0; opacity: 1;}
  79.  
  80. .rversion {display: inline-block;margin: 0px 0px 0px 0px;}
  81.  
  82. .rversion:after {content: var(--version-content);display: block;font-size: 14px;font-weight: 700;color: #43B581;}
  83.  
  84. .rthemedescription {display: block;width: 100%;margin-right: 5px;}
  85.  
  86. .rthemedescription:before {display: block;font-size: 14px;height: 15px;color: #3ddcb1;font-weight: 700;content: "Updates are automatic. Just restart Discord to get the latest version.";}
  87.  
  88. .user-popout .header {background: rgba(0, 0, 0, .3);}
  89.  
  90. .user-popout {background: transparent !important;opacity: 1;}
  91.  
  92. #user-profile-modal .header {background: transparent !important;overflow: hidden;height: 182px;}
  93.  
  94. .user-popout .body {background: rgba(0, 0, 0, .8);}
  95.  
  96. .user-popout .footer {background: rgba(0, 0, 0, .8);}
  97.  
  98. .user-popout .avatar-wrapper .avatar-popout {border: none;background-color: transparent;}
  99.  
  100. .user-popout .avatar-wrapper {box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);border-radius: 50%;}
  101.  
  102. #user-profile-modal .avatar-profile {box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);border: none !important;margin-top: 4px;margin-left: 4px;background-color: transparent;}
  103.  
  104. #user-profile-modal .guilds .avatar-large {background-color: transparent;}
  105.  
  106. .user-popout .header.streaming{background-color: rgba(89, 54, 149, 0.69);}
  107.  
  108. .Select-control { background: rgba(0, 0, 0, 0.62); border: var(--main-color); border-color: var(--main-color) var(--main-color) var(--main-color); }
  109.  
  110. .form .control-group .Select-control { border: 1px solid var(--main-color); }
  111.  
  112. .form .control-group .Select-control:hover { border: 1px solid var(--main-color); }
  113.  
  114. .form .control-group .is-focused:not(.is-open) > .Select-control { border: 1px solid var(--main-color); }
  115.  
  116. .slider-bar { background: rgba(0, 0, 0, 0.44); }
  117.  
  118. .slider-handle, .slider-handle span { background-color: #151515; }
  119.  
  120. .form .control-group .Select-control .Select-placeholder { color: #787A7B; }
  121.  
  122. .tab-bar.SIDE { overflow-y: scroll; background-color: rgba(0, 0, 0, 0.8); }
  123.  
  124. .tab-bar.SIDE::-webkit-scrollbar { width: 0px; }
  125.  
  126. .create-guild-container .join-server .link-container input { border: 1px solid var(--main-color); }
  127.  
  128. .create-guild-container .join-server .sample-link { color: var(--main-color); }
  129.  
  130. .theme-dark .chat > .content .messages .message-group a { color: var(--main-color); }
  131.  
  132. .need-help-modal .footer { background-color: rgba(0, 0, 0, 0.88); border-top: 1px solid #000; }
  133.  
  134. .need-help-modal .header { background-color: var(--main-color); }
  135.  
  136. .need-help-button:hover { border-color: var(--main-color); color: var(--main-color); }
  137.  
  138. .need-help-button:hover .btn-help { color: var(--main-color); }
  139.  
  140. .settings .settings-inner { background-color: rgba(0, 0, 0, 0.7) !important; }
  141.  
  142. .notification-settings-modal .mute-server .checkbox .label { color: #fff; }
  143.  
  144. .notification-settings-modal .settings-section { color: #fff; }
  145.  
  146. .channel-notification-settings .content label { color: #ABAAAA; }
  147.  
  148. .scroller-wrap .scroller { overflow-y: scroll; }
  149.  
  150. .channel-notification-settings { border-bottom: 1px solid var(--main-color); }
  151.  
  152. .notification-settings-modal .notification-settings-modal-channel-settings-list { box-shadow: 0 -1px var(--main-color); }
  153.  
  154. .chat .new-messages-bar button { border-radius: 5px; }
  155.  
  156. .chat .new-messages-bar button:last-child { color: #fff; }
  157.  
  158. .download-apps .platforms .platform.active .download-button, .change-log .changelog-fixed, .modal-new-user .steps-wrap .steps li.on, .modal-new-user .steps-wrap .steps li.on + .divider, .modal-new-user .steps-wrap .steps li.on:before, .chat .new-messages-bar:hover { background-color: var(--main-color); }
  159.  
  160. .radio-image .radio-inner span:after { opacity: 0; filter: alpha(opacity=0); content: ''; position: absolute; width: 100%; height: 100%; border: 2px solid var(--main-color); border-radius: 3px; -webkit-transition: .3s ease; transition: .3s ease; left: -2px; top: -2px; }
  161.  
  162. .radio-image:hover span:after { opacity: .5; filter: alpha(opacity=50); border-color: var(--main-color); }
  163.  
  164. .guilds li.active .guild-inner, .guilds li:hover .guild-inner { border-radius: 15px; background: var(--main-color); animation: FColorPulse 2s infinite alternate; }
  165.  
  166. @-webkit-keyframes FColorPulse { 0% { background: var(--hover-color); }
  167. 100% { background: var(--main-color); } }
  168.  
  169. ld-channels ul .channel-voice-states li.speaking .avatar-small { background-color: var(--main-color); cursor: pointer; border: 2px solid var(--main-color); box-shadow: inset 0 0 0 2px #2e3136; }
  170.  
  171. #unsupported-browser li:hover { -webkit-transform: scale(1.04); transform: scale(1.04); border-color: var(--main-color); }
  172.  
  173. #unsupported-browser li:hover .browser { background-position-y: 100px; }
  174.  
  175. #unsupported-browser li:hover .btn { background-color: var(--main-color); color: #fff; border-color: var(--main-color); }
  176.  
  177. .mentioned .highlight:hover { color: var(--main-color); text-decoration: underline; }
  178.  
  179. .highlight:hover { cursor: pointer; color: #fff; background-color: var(--main-color); }
  180.  
  181. .tooltip.tooltip-left:after { position: absolute; left: 100%; top: 50%; border-left-color: var(--main-color); margin-top: -5px; }
  182.  
  183. .tooltip.tooltip-right:after { position: absolute; right: 100%; top: 50%; border-right-color: var(--main-color); margin-top: -5px; }
  184.  
  185. .tooltip { position: absolute; background-color: var(--main-color); box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.1); border-radius: 3px; font-weight: 600; font-size: 12px; color: #fff; z-index: 1002; max-width: 160px; box-sizing: border-box; word-wrap: break-word; padding: 5px 10px; }
  186.  
  187. .tooltip.tooltip-bottom:after { position: absolute; bottom: 100%; left: 50%; border-bottom-color: var(--main-color); margin-left: -5px; }
  188.  
  189. .tooltip.tooltip-top:after { position: absolute; top: 100%; left: 50%; margin-left: -5px; border-top-color: var(--main-color); }
  190.  
  191. .region-select-modal { background: rgba(0, 0, 0, 0.75); }
  192.  
  193. .region-select-modal .region-select-modal-header { color: var(--main-color); }
  194.  
  195. .region-select-modal .region-select-modal-option { background-color: rgba(0, 0, 0, 0.48); border: 2px solid rgba(0, 0, 0, 0.35); }
  196.  
  197. .region-select-modal .region-select-modal-option:hover { border-color: var(--main-color); }
  198.  
  199. .form .radio-group .radio { color: #fff; }
  200.  
  201. .need-help-modal .header input[type=text] { box-shadow: 0 2px 1px var(--main-color); }
  202.  
  203. .change-log { background: rgba(0, 0, 0, 0.75); }
  204.  
  205. .change-log .header { color: var(--hover-color); border-bottom: 1px solid #4C4C4C; }
  206.  
  207. .change-log ul li { color: var(--main-color); }
  208.  
  209. .change-log .footer { border-top: 2px solid var(--main-color); color: var(--hover-color); background-color: transparent; }
  210.  
  211. .download-apps .platforms .platform { border: 2px solid var(--hover-color); }
  212.  
  213. .download-apps .footer { color: var(--hover-color); }
  214.  
  215. .download-apps .footer a { color: var(--main-color); }
  216.  
  217. .download-apps .header { color: var(--main-color); }
  218.  
  219. .download-apps .platforms .platform.active { border-color: var(--main-color); }
  220.  
  221. .user-settings-modal a:hover { color: var(--hover-color); }
  222.  
  223. .private-channels .channel.selected:before { border-left: 4px solid var(--main-color); }
  224.  
  225. .private-channels .channel:hover:before { border-left: 4px solid var(--main-color); }
  226.  
  227. .user-settings-modal .voice-settings .reset-voice-settings { color: var(--main-color); }
  228.  
  229. .user-settings-modal .voice-settings .reset-voice-settings:hover { color: var(--hover-color); }
  230.  
  231. .modal-content .form-inner p { color: #E6E6E6; }
  232.  
  233. .form .form-header { background: rgba(0, 0, 0, 0.85); border-bottom: 1px solid rgba(0, 0, 0, 0.53); }
  234.  
  235. .popout header { background-color: var(--main-color); }
  236.  
  237. .popout section { background-color: rgba(0, 0, 0, 0.7); }
  238.  
  239. #voice-connection-popout hr, #rtc-connection-popout hr{ border: 1px solid var(--main-color); }
  240.  
  241. .small-popout-box { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.28); }
  242.  
  243. .option-popout .btn-item:hover { color: #BBBBBB; }
  244.  
  245. .member-roles .member-role { background-color: var(--main-color); color: #ffffff; border: 1px solid var(--main-color); }
  246.  
  247. .user-popout .user-popout-options .btn { background-color: var(--main-color); border: 1px solid var(--main-color); }
  248.  
  249. .user-popout .user-popout-options .btn:hover { background-color: var(--hover-color); }
  250.  
  251. .chat .welcome-message h1 { color: var(--main-color); }
  252.  
  253. .channel-members .invite-btn { background-color: var(--main-color); }
  254.  
  255. .channel-members .invite-btn:hover { background-color: var(--hover-color); }
  256.  
  257. .instant-invite-popout hr { border: 1px solid var(--main-color); }
  258.  
  259. .instant-invite-popout a { color: var(--main-color); }
  260.  
  261. .instant-invite-popout a:hover { color: var(--hover-color); }
  262.  
  263. .clipboard-input-inner input::selection { background: var(--main-color); }
  264.  
  265. .clipboard-input-inner button { border-left: 1px solid rgba(0, 0, 0, 0.69); background-color: rgba(0, 0, 0, 0.83); }
  266.  
  267. .clipboard-input-inner input { color: var(--hover-color); background: rgba(0, 0, 0, 0.6); }
  268.  
  269. .clipboard-input-inner { background: transparent; border: 1px solid transparent; }
  270.  
  271. .clipboard-input-inner button:first-of-type:before { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.79)); }
  272.  
  273. ::selection { color: #fff; background: var(--main-color); }
  274.  
  275. .theme-dark .chat .welcome-message a { color: var(--main-color); }
  276.  
  277. #settings-roles .roles li.selected { background: none; }
  278.  
  279. #permissions ul li { color: #F4F4F4; }
  280.  
  281. #permissions .permission-actions > div { background-color: #2E3136; border: 2px solid #2A2C31; }
  282.  
  283. #permissions .permission-actions > div.PASSTHROUGH:hover { border: #51555F; }
  284.  
  285. #settings-roles .roles header { border-bottom: 1px solid rgba(0, 0, 0, 0.47); }
  286.  
  287. #settings-roles .roles { border-right: 1px solid var(--main-color); }
  288.  
  289. .btn-help:hover { background: var(--main-color); }
  290.  
  291. #permissions .permissions-helpdesk { color: var(--main-color); }
  292.  
  293. #permissions .permissions-helpdesk:hover { color: var(--hover-color); }
  294.  
  295. #settings-roles .roles li.selected:before { background-color: var(--main-color); }
  296.  
  297. #settings-roles .roles li:hover:before { background-color: var(--hover-color); }
  298.  
  299. .instant-invites .instant-invites-header { border-bottom: 2px solid var(--main-color); color: #E9E9E9; }
  300.  
  301. .instant-invites .instant-invite-buttons .btn { background: var(--main-color); }
  302.  
  303. .instant-invites .instant-invite-buttons .btn.btn-danger { border: 1px solid var(--main-color); color: #fff; }
  304.  
  305. .instant-invites .instant-invite-buttons .btn.btn-danger:hover { background: #D22B3A; border-color: #D22B3A; }
  306.  
  307. .instant-invites .instant-invites-list .instant-invite .member { color: #C3C3C3; }
  308.  
  309. #permissions .permission-actions.disabled > div { border: #565963; background: #565963; position: relative; }
  310.  
  311. .checkbox .checkbox-inner span { background: rgba(0, 0, 0, 0.30); transition: .2s linear all !important; }
  312.  
  313. .form .control-group .help-text { color: #B6BBC1; }
  314.  
  315. .avatar-uploader a { color: var(--main-color); }
  316.  
  317. .avatar-uploader a:hover { color: var(--hover-color); }
  318.  
  319. .instant-invites .instant-invites-list .instant-invite .show-channel .channel { color: #D6D6D6; text-transform: capitalize; }
  320.  
  321. .instant-invites .instant-invites-list .instant-invite + .instant-invite { border-top: 1px solid var(--main-color); }
  322.  
  323. .form .control-groups.control-separator { border-top: 1px solid var(--main-color); }
  324.  
  325. .guild-settings-modal-integrations .guild-settings-modal-integrations-header { color: #CCCCCC; border-bottom: 1px solid rgba(0, 0, 0, 0.47); box-shadow: none; }
  326.  
  327. .guild-settings-modal-integrations .guild-settings-modal-integrations-body.no-integrations p { color: gainsboro; }
  328.  
  329. .guild-settings-modal-integrations .guild-settings-modal-integrations-body.no-integrations p a { color: #F40000; }
  330.  
  331. .guild-settings-modal-members .guild-settings-modal-list .member .member-username { color: #CECECE; }
  332.  
  333. .guild-settings-modal-members .guild-settings-modal-members-header { border-bottom: 1px solid rgba(0, 0, 0, 0.36); }
  334.  
  335. #autocomplete-popout .empty:hover { background-color: #2E3136; }
  336.  
  337. #autocomplete-popout .empty h4 { color: var(--main-color); }
  338.  
  339. #autocomplete-popout h3 { color: #ECECEC; }
  340.  
  341. .popout.popout-bottom header:before { border-bottom-color: var(--main-color); }
  342.  
  343. .guild-settings-modal .guild-settings-modal-search { border: 1px solid rgba(0, 0, 0, 0.4); }
  344.  
  345. .guild-settings-modal .guild-settings-modal-search:focus { border: 1px solid #24272b; }
  346.  
  347. .guild-settings-modal-members .guild-settings-modal-members-footer a { color: var(--main-color); }
  348.  
  349. .guild-settings-modal-members .guild-settings-modal-members-footer a:hover { color: var(--hover-color); }
  350.  
  351. .guild-settings-modal-members .guild-settings-modal-members-footer { border-top: 1px solid rgba(0, 0, 0, 0.36); }
  352.  
  353. #settings-roles .roles li:hover { background: none; }
  354.  
  355. .form hr { border-bottom: 1px solid var(--main-color); }
  356.  
  357. .user-popout .user-popout-options .btn.btn-server { color: #fff; background-color: var(--main-color); border-color: var(--main-color); }
  358.  
  359. .user-popout .user-popout-options .btn.btn-server:hover { border-color: var(--main-color); background-color: var(--hover-color); }
  360.  
  361. .member-roles .manipulate:hover { border-color: var(--main-color); background-color: var(--hover-color); }
  362.  
  363. #user-profile-modal header { background-image: none; background-color: var(--main-color); }
  364.  
  365. #user-profile-modal .scroller { background: transparent !important; }
  366.  
  367. #user-profile-modal .friends .friend:hover { background: #26292D; color: #ADADAD; }
  368.  
  369. .need-help-modal a:hover { color: var(--hover-color); }
  370.  
  371. #user-profile-modal footer { background: rgba(0, 0, 0, 0.83); border-top: 1px solid transparent; z-index: 10;}
  372.  
  373. #user-profile-modal footer button { color: var(--main-color); }
  374.  
  375. .avatar-large { width: 40px; height: 40px; background-size: 40px 40px !important; left: 8px; }
  376.  
  377. .channel-textarea { margin: 10px 0 30px; }
  378.  
  379. .theme-dark .chat form { border-top: none; }
  380.  
  381. .guilds li.active .guild-inner:before { background: var(--main-color); }
  382.  
  383. .guilds li.unread .guild-inner:before { background: var(--main-color); }
  384.  
  385. .guild-channels ul .channel-text.unread:not(.selected):not(.channel-muted):before { background: var(--hover-color); }
  386.  
  387. .theme-dark .hljs { border: 1px solid transparent; border-radius: 4px; }
  388.  
  389. .theme-dark .chat > .content .messages .divider:not(.red) div { background: transparent; }
  390.  
  391. .theme-dark .chat > .content .messages .divider span { background: transparent; }
  392.  
  393. .chat .divider > span { color: #F1F1F1; }
  394.  
  395. .message-group .comment .markup pre { background: rgba(0, 0, 0, 0.45); border: 2px solid #29363E; }
  396.  
  397. .message-group .comment .markup pre code { background: transparent; color: #D4D4D4; }
  398.  
  399. .theme-dark .chat .title-wrap .topic a { color: var(--main-color); }
  400.  
  401. .guilds .friends-icon:hover { color: transparent; background-color: var(--main-color); }
  402.  
  403. #autocomplete-popout .row.selected a, #autocomplete-popout .row:hover a { color: #D4D4D5; }
  404.  
  405. #autocomplete-popout .row.selected, #autocomplete-popout .row:hover { background: rgba(0, 0, 0, 0.85); }
  406.  
  407. .download-apps .platforms .platform.active p { color: var(--main-color); }
  408.  
  409. .download-apps .platforms .platform .icon.apple.active { background-image: url(https://discordapp.com/assets/57568e1cfc37c81cf56db9498b4f128a.svg); }
  410.  
  411. .download-apps .platforms .platform .icon.windows.active { background-image: url(https://discordapp.com/assets/d6221c5e88f5cb89f125868c077e9859.svg); }
  412.  
  413. .download-apps .platforms .platform .icon.ios.active { background-image: url(https://discordapp.com/assets/0c460e9b848f5c4cc964ae9c62c0f9b9.svg); }
  414.  
  415. .download-apps .platforms .platform .icon.android.active { background-image: url(https://discordapp.com/assets/d73fd4014c02b360d9529a720ecb7c44.svg); }
  416.  
  417. .create-guild-container { background-color: transparent; }
  418.  
  419. .form .form-inner { background-image: Justincase("https://i.imgur.com/KCLIPt4.gif"); background-size: 40px 40px; background-repeat: no-repeat; background-position: 50% 74%; }
  420.  
  421. .need-help-button { visibility: hidden; }
  422.  
  423. .guilds-add { color: transparent !important; background-image: url("https://i.imgur.com/1MfzLoF.png") !important; background-size: 20px 20px !important; background-repeat: no-repeat !important; background-position: 9px 9px !important; background-color: rgba(21, 21, 21, 0.41) !important; opacity: 0.7 !important; }
  424.  
  425. .slider-handle span { border: 1px solid var(--main-color); }
  426.  
  427. .slider-handle span:after, .slider-handle span:before { content: none; }
  428.  
  429. .popout section:after, .popout section:before { content: none; }
  430.  
  431. .chat .welcome-message .item-container .icon.exclamation { background-image: url("https://i.imgur.com/DYPXksE.png"); background-repeat: no-repeat; background-size: 20px 20px; background-position: 29px 13px; }
  432.  
  433. .chat .welcome-message .item-container .icon.share { background-image: url("https://i.imgur.com/DYPXksE.png"); background-repeat: no-repeat; background-size: 20px 20px; background-position: 29px 13px; }
  434.  
  435. .chat .welcome-message .item-container .icon.apps { background-image: url("https://i.imgur.com/DYPXksE.png"); background-repeat: no-repeat; background-size: 20px 20px; background-position: 29px 13px; }
  436.  
  437. .chat .welcome-message .item-container .icon.mobile { background-image: url("https://i.imgur.com/DYPXksE.png"); background-repeat: no-repeat; background-size: 20px 20px; background-position: 29px 13px; }
  438.  
  439. .chat .welcome-message .item-container .icon.twitter { background-image: url("https://i.imgur.com/DYPXksE.png"); background-repeat: no-repeat; background-size: 20px 20px; background-position: 29px 13px; }
  440.  
  441. .user-settings-modal button.preview-sound:before { background-image: url("https://i.imgur.com/E8gsoBs.png"); }
  442.  
  443. .chat .new-messages-bar { background-color: var(--main-color); opacity: 0.8; }
  444.  
  445. .account { background-repeat: no-repeat; background-position: 12px 11px; }
  446.  
  447. .user-settings-modal-games { background: transparent; border-top: 1px solid rgba(0, 0, 0, 0.4); color: #E2E2E3; }
  448.  
  449. .user-settings-modal-games .games-table .games-row .item-game .last-played { color: #E2E2E3; }
  450.  
  451. .user-settings-modal-games .games-table .games-row .item-game .game-input { color: #E2E2E3; }
  452.  
  453. .user-settings-modal-games .games-table .games-row .item-game { border-bottom: 1px solid rgba(0, 0, 0, 0.4); }
  454.  
  455. .user-settings-modal-games .games-table .games-row .item-overlay { border-bottom: 1px solid rgba(0, 0, 0, 0.4); }
  456.  
  457. .now-playing { background: var(--main-color); padding: 22px; }
  458.  
  459. .checkbox .checkbox-inner.alt input[type=checkbox] + span { background: var(--main-color) !important; }
  460.  
  461. .checkbox .checkbox-inner.alt input[type=checkbox]:checked + span:after { border-color: #43B581; }
  462.  
  463. .sensitivity .slider .slider-bar-auto { background-color: rgba(0, 0, 0, 0.44); }
  464.  
  465. .user-settings-modal-keybinds .user-settings-modal-keybinds-header { border-bottom: 1px solid rgba(0, 0, 0, 0.44); }
  466.  
  467. .user-settings-modal-connections .user-settings-modal-accounts-list .connect-container .btn { background: rgba(0, 0, 0, 0.57); border: 2px solid rgba(0, 0, 0, 0.23); background-repeat: no-repeat; background-position: 50%; }
  468.  
  469. .alert.form .form-inner .btn { border: 1px solid var(--hover-color); }
  470.  
  471. .alert.form .form-inner .cancel { border-color: #99aab5 !important; }
  472.  
  473. .user-settings-modal .account-warning { border: 1px solid #B54343; background: #B54343; color: #F5FBF9; }
  474.  
  475. .user-settings-modal-games .games-table .games-row .item-game .icon { background-image: url(https://i.imgur.com/DYCx6qB.png); background-repeat: no-repeat; background-position: -13px -14px; background-size: 42px; }
  476.  
  477. .theme-dark .chat > .content .messages .divider:not(.red) span { opacity: .9; }
  478.  
  479. .links:after { content: "Omniscient"; color: #8C8F94; margin-left: 6px; font-weight: bold; }
  480.  
  481. .links li + li:after { content: '\2022'; color: #535559; margin-left: 6px; }
  482.  
  483. .message-group h2 strong { color: #aaaba7; }
  484.  
  485. #emote-menu, #tc-settings-panel, .tc-switch { border: 1px solid #2B2B2B; }
  486.  
  487. .emote-container:hover { background: var(--main-color); }
  488.  
  489. .spinner-wandering-cubes .spinner-item { background-color: var(--main-color); border-radius: 10px; }
  490.  
  491. #bd-ps-container { border: 1px solid transparent; border-radius: 4px; opacity: 0.9; }
  492.  
  493. #bd-ps-header { background: #1E2124; border-bottom: 1px solid #24272B; }
  494.  
  495. #bd-ps-body table tr { border-bottom: 1px solid #2E3136 !important; background-color: none; }
  496.  
  497. #bd-ps-body table th { background-color: #25272B; }
  498.  
  499. textarea { background: transparent !important; }
  500.  
  501. .help-container { display: none; }
  502.  
  503. .links { border-top: 0px solid transparent; }
  504.  
  505. .links li a { color: #8C8F94; }
  506.  
  507. .links, .chat, .typing, .content, .guild-channels, .private-channels, .guild-header header, .divider-red span, .messages-wrapper, #voice-connection, #rtc-connection { background: transparent !important; }
  508.  
  509. .channels-wrap { background: rgba(0, 0, 0, 0.75); width: 220px; }
  510.  
  511. .content .flex-spacer { background: rgba(0, 0, 0, 0.85); }
  512.  
  513. .channel-members { background: rgba(0, 0, 0, 0.9) !important; }
  514.  
  515. .guilds-wrapper { box-shadow: inset -10px 0px 20px -10px rgba(0, 0, 0, 0.2); }
  516.  
  517. .guild-header ul { background: rgba(0, 0, 0, 0.52) !important; transition: transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important; padding-top: 100px; top: -56px; }
  518.  
  519. .guilds-add { opacity: 0.5; }
  520.  
  521. .guilds-wrapper { border-right: none; background-color: transparent; }
  522.  
  523. .guild-header header { box-shadow: none !important; color: #ddd; }
  524.  
  525. .guild-channels header h2, .guild-channels ul .channel a { color: #fff; }
  526.  
  527. .guilds { padding: 18px 20px 85px 20px; background: rgba(0, 0, 0, 0.6) !important; }
  528.  
  529. .guilds-add { font-size: 30px; background: #000; }
  530.  
  531. .guilds .friends-online { margin-left: -5px; }
  532.  
  533. .guilds li .guild-inner { background: rgba(21, 21, 21, 0.41) !important; }
  534.  
  535. .guilds li .guild-inner a, .guilds li, .guilds li .avatar-small { width: 40px; height: 40px; }
  536.  
  537. .guilds li .avatar-small { width: 40px; height: 40px; background-size: 40px 40px; }
  538.  
  539. .guilds li .guild-inner { line-height: 40px; }
  540.  
  541. .guilds .friends-icon { width: 40px; height: 40px; background-size: 25px 19px; }
  542.  
  543. .guilds li.audio .guild-inner:after { background-size: 12px; background-color: rgba(0, 0, 0, 0.8); }
  544.  
  545. .guilds-separator:after { background: rgba(28, 28, 28, 0.52) !important; }
  546.  
  547. .guilds li .guild-inner:before { left: -26px; }
  548.  
  549. .guild-channels header h2, .private-channels header { opacity: .6; }
  550.  
  551. .private-channels .search-bar { background: rgba(10, 13, 16, 0) !important; }
  552.  
  553. .private-channels .search-bar input { background: rgba(0, 0, 0, 0.4) !important; }
  554.  
  555. .search-bar-clear:before { background: #000; }
  556.  
  557. .search-bar-clear { background: #057f95; }
  558.  
  559. .guild-channels ul .channel.selected, .private-channels .channel.selected, .private-channels .search-result.selected, .private-channels .search-result:hover { background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.6) 85%, rgba(46, 49, 54, 0)) !important; }
  560.  
  561. .guild-channels ul .channel:not(.selected):hover, .private-channels .channel:not(.selected):hover { background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.3) 85%, rgba(46, 49, 54, 0)) !important; }
  562.  
  563. .btn-hamburger { margin-right: -25px; }
  564.  
  565. .btn-hamburger span { background: #fff; }
  566.  
  567. .account { padding: 0 4px !important; background: transparent; height: 77px; border: 0px solid transparent; }
  568.  
  569. .account .status { border: 2px solid black; }
  570.  
  571. .account .btn { background: transparent; box-shadow: none !important; }
  572.  
  573. .account .btn:active { background: rgba(0, 0, 0, 0.26); }
  574.  
  575. .account .btn-deafen, .account .btn-mute { border-right: none; }
  576.  
  577. #voice-connection, #rtc-connection { border-top: none !important; padding: 15px 20px 15px 18px !important; }
  578.  
  579. #voice-connection .btn, #rtc-connection .btn { background: rgba(0, 0, 0, 0.45); box-shadow: none !important; }
  580.  
  581. #voice-connection .btn:active, #rtc-connection .btn:active { background: rgba(0, 0, 0, 0.6); }
  582.  
  583. .account .btn-deafen, .account .btn-settings { box-shadow: none !important; }
  584.  
  585. .account .btn-group, #voice-connection .btn-group, #rtc-connection .btn-group { border: none; }
  586.  
  587. .title-wrap { border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important; background: rgba(0, 0, 0, 0.88) !important; }
  588.  
  589. .chat .divider:not(.divider-red) > div { background: rgba(255, 255, 255, 0.2) !important; }
  590.  
  591. .chat .divider > span { background: rgba(255, 255, 255, 0.2) !important; font-size: 12px; text-transform: uppercase; margin: 10px 0px; border-radius: 3px; opacity: 1; padding: 5px 15px; width: 100%; text-align: center; }
  592.  
  593. .chat .divider.divider-red > span { background: rgba(240, 71, 71, 0.6) !important; color: rgba(255, 255, 255, 0.8) !important; }
  594.  
  595. .chat .divider:not(.divider-red) > span { color: white !important; }
  596.  
  597. .chat .divider > div { display: none; }
  598.  
  599. .chat .new-messages-bar:hover { background-color: var(--hover-color); }
  600.  
  601. .chat-empty { background: rgba(20, 23, 27, 0.95); }
  602.  
  603. .chat > .title-wrap > .topic { font-size: 12px; margin-top: 5px; color: #AFAFAF !important; }
  604.  
  605. .chat > .content .messages .message-group:not(.has-divider) { border-bottom-color: rgba(255, 255, 255, 0.04) !important; }
  606.  
  607. .chat > .content .messages .message-group .markup .highlight { color: #ddd !important; padding: 1px 4px; border-radius: 6px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; line-height: 27px; }
  608.  
  609. .chat > .content .messages .message-group .markup .highlight:hover { color: #fff !important; }
  610.  
  611. .chat > .content .messages .message-group .markup { line-height: 16px; }
  612.  
  613. .chat > .content .messages .message-group h2 .user-name { color: rgba(255, 255, 255, 0.8); }
  614.  
  615. .chat > .content .messages .message-group h2 span { color: rgba(255, 255, 255, 0.2); }
  616.  
  617. .chat > .content .messages .message-group .markup pre { background: transparent !important; border-color: rgba(255, 255, 255, 0.1) !important; }
  618.  
  619. .chat > .content .messages .message-group .markup pre code.hljs { background: rgba(0, 0, 0, 0.42) !important; color: rgba(255, 255, 255, 0.7) !important; padding: 5px !important; }
  620.  
  621. .chat > .content .messages .message-group .markup code.inline { background: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.7) !important; padding: 0.3em 0.6em; }
  622.  
  623. .channel-textarea-upload { border-right-color: rgba(255, 255, 255, 0.1) !important; }
  624.  
  625. .channel-textarea-inner { border: 2px solid rgba(255, 255, 255, 0.1) !important; background: rgba(0, 0, 0, 0.6) !important; }
  626.  
  627. .typing { font-size: 11px; }
  628.  
  629. .spoiler span { display: none; }
  630.  
  631. .spoiler:before { padding-top: 7px; padding-bottom: 3px; min-height: 18px; background: none; }
  632.  
  633. #twitchcord-button { background-size: 24px; background-position: 20px; background-color: transparent; }
  634.  
  635. .message-group.compact .timestamp { position: relative; top: -4px; }
  636.  
  637. .message-group.compact .message .markup .user-name { margin-right: 10px; }
  638.  
  639. .add-friend-popout .btn:disabled { opacity: 0.4; }
  640.  
  641. .private-channels .channel.btn-friends .badge { margin-right: 10px; }
  642.  
  643. #friends { background: transparent !important; }
  644.  
  645. .friends-header { background: rgba(0, 0, 0, 0.88) !important; }
  646.  
  647. .friends-table { background: rgba(0, 0, 0, 0.85) !important; margin-top: 0 !important; }
  648.  
  649. .friends-table .friends-table-body { padding-top: 20px !important; }
  650.  
  651. .friends-table .friends-row:hover { background: rgba(0, 0, 0, 0.35) !important; }
  652.  
  653. .channel-members .member:hover { background: rgba(255, 255, 255, 0.07) !important; }
  654.  
  655. .channel-members .member .member-username { font-size: 14px; }
  656.  
  657. .channel-members .avatar-small .status { border-color: rgba(0, 0, 0, 0.7) !important; }
  658.  
  659. .user-popout .user-popout-options .btn:hover { border: 1px solid var(--main-color); }
  660.  
  661. .tooltip { color: #fff; }
  662.  
  663. .bd-minimal .guilds { padding-left: 10px !important; }
  664.  
  665. .bd-minimal .guilds .friends-icon { background-size: 60%; }
  666.  
  667. .bd-minimal .guilds li .guild-inner:before { height: 25px; border-radius: 5px; margin-top: -13px; }
  668.  
  669. .bd-minimal .guilds li.unread .guild-inner:before { width: 10px; height: 10px; margin-top: -5px; left: -16px; }
  670.  
  671. .bd-minimal .guilds li.active .guild-inner:before { left: -18px; border-radius: 5px; height: 25px; margin-top: -13px; }
  672.  
  673. .bd-minimal .guilds li, .bd-minimal .guilds li .avatar-small, .bd-minimal .guilds li .guild-inner, .bd-minimal .guilds li .guild-inner a, .bd-minimal .guilds .friends-icon { width: 25px; height: 25px; line-height: 25px; }
  674.  
  675. .bd-minimal .guilds li .avatar-small, #bd-pub-button { font-size: 9px !important; text-transform: uppercase; }
  676.  
  677. .bd-minimal .chat > .title-wrap > .title { font-size: 16px; }
  678.  
  679. .bd-minimal .theme-dark .comment { border-left: none !important; padding-left: 10px; }
  680.  
  681. .bd-minimal .message-group { padding: 10px 5px; }
  682.  
  683. .bd-minimal .guild-channels ul .channel-text .channel-name { padding-left: 5px; }
  684.  
  685. .bd-minimal .avatar-large { border-radius: 100%; }
  686.  
  687. .bd-minimal .message-group .edit-message .edit-container-outer { margin-left: 50px; }
  688.  
  689. .bd-minimal .message-group .edit-message .edit-container-inner { margin-left: 10px; }
  690.  
  691. .bd-minimal .channel-members h2 { margin-top: 20px; margin-bottom: 3px; padding-left: 20px; }
  692.  
  693. .bd-minimal .channel-members h2:first-of-type { margin-top: 0px; margin-bottom: 3px; }
  694.  
  695. .bd-minimal .channel-members .member { padding: 5px 15px 8px 20px; }
  696.  
  697. .bd-minimal .guild-header header span { margin-left: -13px; font-size: 14px; }
  698.  
  699. .bd-minimal .guild-channels ul .channel-text.unread:not(.selected):not(.channel-muted):before { top: 9px; width: 10px; height: 10px; }
  700.  
  701. .bd-minimal .guild-channels h2 { margin-left: 10px; }
  702.  
  703. .bd-minimal #voice-connection, .bd-minimal #rtc-connection { width: 176px; margin-left: -46px; }
  704.  
  705. .bd-minimal .account { width: 176px; margin-left: -46px; }
  706.  
  707. .bd-minimal .account .avatar-small { display: block !important; }
  708.  
  709. .bd-minimal .account .username { display: none; }
  710.  
  711. .bd-minimal .account .btn-group { margin-left: 10px; }
  712.  
  713. .bd-minimal .account .btn-group .btn { width: 30px; }
  714.  
  715. .settings .settings-header { background: none !important; }
  716.  
  717. .channel-notification-settings .content .content-inner { background: transparent !important; }
  718.  
  719. .guild-channels ul .channel-text:hover:not(.unread):before { border-left: 4px solid var(--main-color); }
  720.  
  721. .guild-channels ul .channel-text.selected:before { border-left: 4px solid var(--main-color); }
  722.  
  723. .guilds li.active .guild-inner, .guilds li:hover .guild-inner { background: var(--main-color) !important; }
  724.  
  725. .theme-dark .chat > .content:first-child .scroller-wrap::-webkit-scrollbar-thumb { background-color: var(--main-color); }
  726.  
  727. .create-guild-container .create-or-join .form-inner { background-color: rgba(0, 0, 0, 0.8); }
  728.  
  729. .create-guild-container .action { background: rgba(0, 0, 0, 0.58); }
  730.  
  731. .create-guild-container .create-or-join .actions .or { color: #000; -webkit-filter: invert(100%); }
  732.  
  733. .form .form-inner { background-color: rgba(0, 0, 0, 0.8); }
  734.  
  735. .form header { color: var(--main-color); }
  736.  
  737. .form .control-group input[type=email], .form .control-group input[type=password], .form .control-group input[type=text], .form .control-group textarea { background: rgba(0, 0, 0, 0.69); color: #D6D6D6; border-bottom: 0px solid #000000; border-radius: 3px; padding: 0px 0px 0px 5px; }
  738.  
  739. .form .control-group input[type=email]:focus, .form .control-group input[type=password]:focus, .form .control-group input[type=text]:focus, .form .control-group textarea:focus { border-bottom: 2px solid var(--main-color); }
  740.  
  741. .region-select { background: transparent; }
  742.  
  743. .region-select .region-select-inner { background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(0, 0, 0, 0.24); }
  744.  
  745. .region-select button { background-color: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.28); color: var(--main-color); }
  746.  
  747. .region-select:hover .region-select-inner, .region-select:hover button { border-color: var(--main-color); }
  748.  
  749. .region-select:hover button { background-color: var(--main-color); }
  750.  
  751. .create-guild-container h5 { color: var(--main-color); }
  752.  
  753. .avatar-uploader .avatar-uploader-inner { background-color: var(--main-color); border: 5px solid var(--hover-color); }
  754.  
  755. .form .form-actions { background-color: rgba(0, 0, 0, 0.85); border-top: 1px solid rgba(0, 0, 0, 0.53); }
  756.  
  757. .form .btn-default { background-color: rgba(0, 0, 0, 0.77); padding: 10px 0; width: 75px; height: 35.5px; border-radius: 3px; border-bottom: none; }
  758.  
  759. .form .btn-primary { background-color: var(--main-color); }
  760.  
  761. .create-guild-container .action.create .action-header { color: var(--main-color); }
  762.  
  763. .create-guild-container .action:hover.create .btn { background-color: var(--hover-color); }
  764.  
  765. .form .btn-primary:hover { background-color: var(--hover-color); }
  766.  
  767. .scroller-wrap .scroller::-webkit-scrollbar-thumb { background-color: var(--main-color) !important; border: 3px solid rgba(211, 5, 5, 0) !important; }
  768.  
  769. .scroller-wrap .scroller::-webkit-scrollbar-track-piece { background-color: var(--main-color) !important; border: 3px solid rgba(211, 5, 5, 0) !important; }
  770.  
  771. .tab-bar.SIDE .tab-bar-item:before { border-left: none; }
  772.  
  773. a:link { color: var(--main-color); }
  774.  
  775. .user-settings-modal a { color: var(--main-color); }
  776.  
  777. .user-settings-modal .settings-wrapper, .user-settings-modal .voice-settings { background: none; }
  778.  
  779. .settings .settings-actions { background-color: rgba(0, 0, 0, 0.76); border-top: 2px solid var(--main-color); }
  780.  
  781. .checkbox .checkbox-inner + span { color: #fff; }
  782.  
  783. .highlight { color: var(--main-color); background: rgba(0, 0, 0, 0.51); border-radius: 3px; transition: .3s all ease-in-out; }
  784.  
  785. .user-settings-modal-connections .user-settings-modal-accounts-list .connect-container .name { color: #fff; }
  786.  
  787. .user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations.no-integrations { color: rgba(222, 222, 222, 0.59); background-color: rgba(0, 0, 0, 0.38); }
  788.  
  789. .user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations { border: 2px solid rgba(0, 0, 0, 0.45); border-top: transparent; }
  790.  
  791. .user-settings-modal-connections .user-settings-modal-connections-list { box-shadow: 0 -1px rgba(0, 0, 0, 0.37); }
  792.  
  793. .tab-bar.TOP .tab-bar-item.selected { border-bottom: 2px solid var(--hover-color); color: #fff;}
  794.  
  795. .checkbox .checkbox-inner input[type=checkbox]:checked + span { background-color: var(--main-color) !important; border-color: var(--main-color) !important; transition: .2s ease-in-out all !important; }
  796.  
  797. .radio .radio-inner span:after { background: var(--main-color); }
  798.  
  799. .slider-bar-fill { background: var(--main-color); }
  800.  
  801. .slider-handle { border: 1px solid var(--main-color); }
  802.  
  803. .radio .radio-inner { background: rgba(0, 0, 0, 0.64); border: 2px solid var(--main-color); }
  804.  
  805. #user-profile-modal .tab-bar.TOP { position: absolute; margin-top: -28px; }
  806.  
  807. #user-profile-modal .header .discord-tag {color: #fff;font-size: 18px;margin-top: -20px;margin-left: -49px !important;}
  808.  
  809. .tab-bar.TOP { border-bottom: 1px solid var(--main-color); }
  810.  
  811. #bd-ps-body table tr:nth-child(odd):hover { background-color: var(--main-color); }
  812.  
  813. .guild-settings-modal-members .member-buttons .btn { background: var(--main-color); border: 1px solid var(--main-color); color: #EFEFEF; }
  814.  
  815. .guild-settings-modal-members .member-buttons .btn.btn-danger:hover { background: var(--hover-color); }
  816.  
  817. .guild-settings-modal-members .member-buttons .btn.btn-danger { border: 1px solid var(--hover-color); color: #FFFFFF; }
  818.  
  819. .guild-settings-modal-members .guild-settings-modal-list .member + .member { border-top: 1px solid rgba(0, 0, 0, 0.45); }
  820.  
  821. .member-roles .member-role .member-role-remove { background: url(https://i.imgur.com/O2TX2bn.png) 50% no-repeat; width: 8px; height: 12px; background-size: 8px; }
  822.  
  823. .member-roles .member-role.member-role-add button { background: url(https://i.imgur.com/1MfzLoF.png) 50% no-repeat; width: 8px; height: 12px; background-size: 10px; }
  824.  
  825. .member-roles .member-role:hover { background-color: var(--hover-color); }
  826.  
  827. .guilds-add:hover { border-color: #2ed172; color: transparent; opacity: 1.0; -webkit-animation: color_change 1s infinite alternate; -moz-animation: color_change 1s infinite alternate; -ms-animation: color_change 1s infinite alternate; -o-animation: color_change 1s infinite alternate; animation: color_change 1s infinite alternate; }
  828.  
  829. @-webkit-keyframes color_change { from { border-color: #535559; }
  830. to { border-color: green; } }
  831.  
  832. @-moz-keyframes color_change { from { border-color: #535559; }
  833. to { border-color: green; } }
  834.  
  835. @-o-keyframes color_change { from { border-color: #535559; }
  836. to { border-color: green; } }
  837.  
  838. @keyframes color_change { from { border-color: #535559; }
  839. to { border-color: green; } }
  840.  
  841. .channel-members h2 { color: var(--main-color) !important; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: bold; padding: 4px 58px; background-color: rgba(0, 0, 0, 0.48); border: 1px solid; border-color: transparent; border-radius: 3px; width: 90px; margin-left: 15px; text-align: center; }
  842.  
  843. .private-channels .search-result.selected:before, .private-channels .search-result:hover:before { border-left: 4px solid var(--hover-color); }
  844.  
  845. .message-group .edit-message .channel-textarea-inner { border-color: var(--main-color); }
  846.  
  847. .channel-members .member .member-game strong { color: var(--main-color); }
  848.  
  849. .spoiler { Background-color: rgba(125, 58, 114, 0.28); border: 1px solid; border-color: transparent; border-radius: 6px; cursor: pointer; }
  850.  
  851. #bd-ps-body table tr:hover { background-color: var(--main-color); }
  852.  
  853. @keyframes swing { 0% { transform: rotate(0deg);
  854. -webkit-transform: rotate(0deg);
  855. -moz-transform: rotate(0deg);
  856. -o-transform: rotate(0deg);
  857. -ms-transform: rotate(0deg); }
  858. 25% { transform: rotate(-30deg);
  859. -webkit-transform: rotate(-30deg);
  860. -moz-transform: rotate(-30deg);
  861. -o-transform: rotate(-30deg);
  862. -ms-transform: rotate(-30deg); }
  863. 50% { transform: rotate(0deg);
  864. -webkit-transform: rotate(0deg);
  865. -moz-transform: rotate(0deg);
  866. -o-transform: rotate(0deg);
  867. -ms-transform: rotate(0deg); }
  868. 75% { transform: rotate(30deg);
  869. -webkit-transform: rotate(30deg);
  870. -moz-transform: rotate(30deg);
  871. -o-transform: rotate(30deg);
  872. -ms-transform: rotate(30deg); }
  873. 100% { transform: rotate(0deg);
  874. -webkit-transform: rotate(0deg);
  875. -moz-transform: rotate(0deg);
  876. -o-transform: rotate(0deg);
  877. -ms-transform: rotate(0deg); } }
  878.  
  879. @-webkit-keyframes swing { 0% { transform: rotate(0deg);
  880. -webkit-transform: rotate(0deg);
  881. -moz-transform: rotate(0deg);
  882. -o-transform: rotate(0deg);
  883. -ms-transform: rotate(0deg); }
  884. 25% { transform: rotate(-30deg);
  885. -webkit-transform: rotate(-30deg);
  886. -moz-transform: rotate(-30deg);
  887. -o-transform: rotate(-30deg);
  888. -ms-transform: rotate(-30deg); }
  889. 50% { transform: rotate(0deg);
  890. -webkit-transform: rotate(0deg);
  891. -moz-transform: rotate(0deg);
  892. -o-transform: rotate(0deg);
  893. -ms-transform: rotate(0deg); }
  894. 75% { transform: rotate(30deg);
  895. -webkit-transform: rotate(30deg);
  896. -moz-transform: rotate(30deg);
  897. -o-transform: rotate(30deg);
  898. -ms-transform: rotate(30deg); }
  899. 100% { transform: rotate(0deg);
  900. -webkit-transform: rotate(0deg);
  901. -moz-transform: rotate(0deg);
  902. -o-transform: rotate(0deg);
  903. -ms-transform: rotate(0deg); } }
  904.  
  905. @keyframes swing1 { 0% { left: -15px;
  906. right: 0; }
  907. 25% { left: -100px;
  908. right: 0; }
  909. 50% { left: -15px;
  910. right: 0; }
  911. 75% { left: 0;
  912. right: -100px; }
  913. 100% { left: -15px;
  914. right: 0; } }
  915.  
  916. @-webkit-keyframes swing1 { 0% { left: -15px;
  917. right: 0; }
  918. 25% { left: -100px;
  919. right: 0; }
  920. 50% { left: -15px;
  921. right: 0; }
  922. 75% { left: 0;
  923. right: -100px; }
  924. 100% { left: -15px;
  925. right: 0; } }
  926.  
  927. .header-toolbar button[data-reactid=".0.1.1.0.2.0.4.0:0"]:hover { animation: swing 4s infinite linear; -webkit-animation: swing 4s infinite linear; }
  928.  
  929. @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg);
  930. transform: rotate(0deg); }
  931. 100% { -webkit-transform: rotate(360deg);
  932. transform: rotate(360deg); } }
  933.  
  934. @keyframes load8 { 0% { -webkit-transform: rotate(0deg);
  935. transform: rotate(0deg); }
  936. 100% { -webkit-transform: rotate(360deg);
  937. transform: rotate(360deg); } }
  938.  
  939. .account .btn-settings:hover:after { -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 2.8s infinite linear; animation: load8 2.8s infinite linear; }
  940.  
  941. .badge { animation: zoom 2s infinite; }
  942.  
  943. @keyframes zoom { 0% { -webkit-transform: scale(1, 1); }
  944. 50% { -webkit-transform: scale(1.2, 1.2); }
  945. 100% { -webkit-transform: scale(1, 1); } }
  946.  
  947. .guild-channels ul .channel-voice.locked:hover .icon-lock { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
  948.  
  949. @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); }
  950. 20%, 80% { transform: translate3d(2px, 0, 0); }
  951. 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  952. 40%, 60% { transform: translate3d(4px, 0, 0); } }
  953.  
  954. .guild-channels ul .channel-voice.locked { cursor: pointer; }
  955.  
  956. .theme-dark #friends .friends-header .tab-bar .tab-bar-item.selected { background-color: #43B581; color: #fff; }
  957.  
  958. #friends .btn { background-color: var(--main-color); }
  959.  
  960. #friends .btn:hover { background-color: var(--hover-color); }
  961.  
  962. .private-channels .channel.selected .icon-friends { background-color: var(--hover-color); }
  963.  
  964. .add-friend-popout { background: transparent; }
  965.  
  966. .add-friend-popout header input:focus { border-color: rgba(255, 255, 255, 0.3); }
  967.  
  968. .add-friend-popout .btn:disabled { background-color: var(--hover-color); }
  969.  
  970. #user-profile-modal .sub-header { background: rgba(0, 0, 0, 0.83); }
  971.  
  972. #user-profile-modal .tab-bar { background: rgba(0, 0, 0, 0.62);border-bottom: 1px solid transparent;border-radius: 3px;}
  973.  
  974. #user-profile-modal .btn { background-color: var(--main-color); }
  975.  
  976. #user-profile-modal .btn:hover { background-color: var(--hover-color); }
  977.  
  978. #user-profile-modal .guilds .guild:hover { background: linear-gradient(90deg, rgba(0, 0, 0, 0.61) 90%, transparent); color: #D8D8D8; }
  979.  
  980. #user-profile-modal .empty { background: rgba(0, 0, 0, 0.83); }
  981.  
  982. .message-group-blocked { background: #fcfcfc; -webkit-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; border: 1px solid #e3e5e7; border-radius: 3px; margin: 6px 6px 6px 19px; display: none; }
  983.  
  984. .user-settings-modal-account .discord-tag { color: var(--main-color); }
  985.  
  986. .guilds .friends-online:hover { background: #43B581 !important; }
  987.  
  988. .add-friend-popout-info .add-friend-popout-info-confirmation:before { background: url(https://i.imgur.com/DYCx6qB.png) 50% no-repeat; content: ' '; width: 17px; height: 16px; background-size: 40px 39px; display: inline-block; vertical-align: middle; margin-top: -8px; margin-right: 4px; }
  989.  
  990. .message-group .btn-option:hover { -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 2.8s infinite linear; animation: load8 2.8s infinite linear; }
  991.  
  992. .chat .has-more button { color: var(--main-color); }
  993.  
  994. .theme-dark #friends .friends-table .friends-table-header .friends-column[data-reactid*=".0.1.1.0.2.1.0.6"]:after { content: "Actions"; color: rgba(255, 255, 255, 0.5); font-size: 12px; text-transform: uppercase; letter-spacing: .025em; font-weight: 600; -webkit-flex-shrink: 0; flex-shrink: 0; margin-left: 60px; }
  995.  
  996. .theme-dark .friends-table .messages .message-group .comment .markup pre, .theme-dark .messages-wrapper .messages .message-group .comment .markup pre { background: rgba(46, 49, 54, 0.32); border-color: #282b30; }
  997.  
  998. .theme-dark .channel-members .member.popout-open, .theme-dark .channel-members .member:hover { background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.3) 85%, rgba(46, 49, 54, 0)) !important; }
  999.  
  1000. .scroller-wrap .scroller::-webkit-scrollbar-track-piece { border: 3px solid rgba(255, 255, 255, 0) !important; background-color: rgba(0, 0, 0, 0.3) !important; }
  1001.  
  1002. .theme-dark #friends .friends-header .tab-bar .tab-bar-item:hover:not(.selected) { background: var(--hover-color);color: #fff; }
  1003.  
  1004. .theme-dark .friends-table .messages .message-group .comment .markup .highlight:hover, .theme-dark .messages-wrapper .messages .message-group .comment .markup .highlight:hover { background-color: var(--main-color); }
  1005.  
  1006. .user-popout { opacity: 1; }
  1007.  
  1008. .user-settings-modal.settings { opacity: 1; /*[[NSFWON]]*/ /*[[NSFWOFF]]*/ }
  1009.  
  1010. .message-group .image { -webkit-filter: none; }
  1011.  
  1012. .message-group .image:hover { -webkit-filter: none; }
  1013.  
  1014. .channel-textarea-autocomplete-inner { background: rgba(0, 0, 0, 0.84) !important; border: none !important; }
  1015.  
  1016. .channel-textarea-autocomplete-inner:after { display: none; }
  1017.  
  1018. .channel-textarea-autocomplete-inner header { background: rgba(0, 0, 0, 0.84) !important; border-radius: 5px 5px 0 0; border: none !important; }
  1019.  
  1020. .channel-textarea-autocomplete ul li.active { background: var(--main-color) !important; opacity: 0.95; color: #fff; }
  1021.  
  1022. #user-profile-modal .avatar-profile { border: 6px solid var(--main-color) !important; }
  1023.  
  1024. #user-profile-modal footer .btn.disabled { background: #8E8E8E !important; }
  1025.  
  1026. #user-profile-modal footer .btn.disabled:hover { background: #777777 !important; }
  1027.  
  1028. span.discriminator { font-size: 11px !important; color: rgba(255, 255, 255, 0.7) !important; margin-left: 8px !important; border-radius: 5px !important; background: rgba(0, 0, 0, 0.19) !important; font-weight: bold !important; border: 3px solid transparent !important; -webkit-transition: all 0.3s ease !important; -moz-transition: all 0.3s ease !important; -o-transition: all 0.3s ease !important; -ms-transition: all 0.3s ease !important; }
  1029.  
  1030. .guilds-error { width: 40px !important; height: 40px !important; line-height: 39px !important; }
  1031.  
  1032. .theme-dark .friends-table .messages .invite-button, .theme-dark .messages-wrapper .messages .invite-button { background-color: rgba(0, 0, 0, 0.54); border-color: rgba(0, 0, 0, 0.35); }
  1033.  
  1034. .invite-button-icon { background-color: rgba(0, 0, 0, 0.62); border: 1px solid #000000; }
  1035.  
  1036. .private-channels .channel .icon-friends { background-color: rgba(0, 0, 0, 0.59) !important; }
  1037.  
  1038. .upload-modal { background-color: rgba(30, 30, 30, 0.78); }
  1039.  
  1040. .upload-modal .footer { background-color: rgba(0, 0, 0, 0.44); }
  1041.  
  1042. .upload-modal .inner { border: 2px dashed rgba(6, 6, 6, 0.52); }
  1043.  
  1044. .upload-modal .footer .button { background-color: var(--main-color); }
  1045.  
  1046. .upload-modal .footer .button-primary { color: var(--main-color); background-color: #fff; }
  1047.  
  1048. div.control-group .shortcut-recorder input[type=text] { border: 1px solid var(--main-color); text-shadow: 0 0 0 #FFFFFF; }
  1049.  
  1050. .private-channels .search-bar input:focus { border: 2px solid var(--main-color); }
  1051.  
  1052. @keyframes input-pulse { 0% { box-shadow: 0 0 0 0 var(--main-color); }
  1053. 70% { box-shadow: 0 0 10px 10px rgba(241, 71, 71, 0); }
  1054. to { box-shadow: 0 0 0 0 rgba(241, 71, 71, 0); } }
  1055.  
  1056. .bot-tag { background: #057f95; opacity: 0.8; }
  1057.  
  1058. .bot-tag.bot-tag-invert { font-size: 11px !important; color: rgba(255, 255, 255, 0.7) !important; margin-left: 8px !important; border-radius: 5px !important; background: rgba(0, 0, 0, 0.19) !important; font-weight: bold !important; border: 3px solid transparent !important; padding: 0px; }
  1059.  
  1060. .channel-members .member.member-status-offline .avatar-small { -webkit-filter: grayscale(100%) blur(1px); position: relative; -webkit-transition: all .8s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease; transition: all .8s ease; -webkit-transform: translateZ(0px); transform: translateZ(0px); }
  1061.  
  1062. .channel-members .member.popout-open .avatar-small, .channel-members .member:hover .avatar-small { -webkit-filter: none !important; filter: none; position: relative; -webkit-transition: all .8s ease-out; -moz-transition: all .8s ease-out; -o-transition: all .8s ease-out; transition: all .8s ease-out; -webkit-transform: translateZ(0px); transform: translateZ(0px); }
  1063.  
  1064. .offline { background-color: #982929; }
  1065.  
  1066. .status-offline { background-color: #747f8d; }
  1067.  
  1068. @-webkit-keyframes friend-request-pulse { 0% { box-shadow: 0 0 0 0 #43b581; }
  1069. 70% { box-shadow: 0 0 10px 10px rgba(241, 71, 71, 0); }
  1070. to { box-shadow: 0 0 0 0 rgba(241, 71, 71, 0); } }
  1071.  
  1072. @keyframes friend-request-pulse { 0% { box-shadow: 0 0 0 0 #43b581; }
  1073. 70% { box-shadow: 0 0 10px 10px rgba(241, 71, 71, 0); }
  1074. to { box-shadow: 0 0 0 0 rgba(241, 71, 71, 0); } }
  1075.  
  1076. #user-profile-modal footer .btn.add-friend { -webkit-animation: friend-request-pulse 1.5s infinite; animation: friend-request-pulse 1.5s infinite; }
  1077.  
  1078. #user-profile-modal .guilds .avatar-large { background: var(--main-color); }
  1079.  
  1080. img.image { border-radius: 5px; }
  1081.  
  1082. #voice-connection .btn, #rtc-connection .btn { background: rgba(0, 0, 0, 0.45); box-shadow: none !important; border-radius: 40px; }
  1083.  
  1084. .account .btn-deafen, .account .btn-mute, .account .btn-settings { background: rgba(0, 0, 0, 0.45); box-shadow: none !important; border-radius: 40px; }
  1085.  
  1086. .connecting { background: rgba(0, 0, 0, 0.8); }
  1087.  
  1088. .connecting video.ready { visibility: hidden; }
  1089.  
  1090. .connecting video { visibility: hidden; }
  1091.  
  1092. .connecting .quote { margin-bottom: 10px; color: #fff; font-weight: 400; font-style: italic; font-size: 16px; visibility: hidden; }
  1093.  
  1094. .connecting img, .connecting video { visibility: hidden; }
  1095.  
  1096. .connecting .attribution { visibility: hidden; }
  1097.  
  1098. .connecting .attribution, .connecting .connection-status, .connecting .quote { margin-bottom: -122px; font-size: 30px; text-align: center; -webkit-animation: pulse 1.5s infinite; animation: pulse 1.5s infinite; }
  1099.  
  1100. @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); }
  1101. 50% { -webkit-transform: scale(1.1); }
  1102. 100% { -webkit-transform: scale(1); } }
  1103.  
  1104. @keyframes pulse { 0% { transform: scale(1); }
  1105. 50% { transform: scale(1.1); }
  1106. 100% { transform: scale(1); } }
  1107.  
  1108. .account .btn-settings:after { opacity: .3; }
  1109.  
  1110. .guild-header ul li:hover a { background-color: var(--hover-color); transition: .3s all ease-in-out; }
  1111.  
  1112. .markdown-modal .markdown-modal-footer { background-color: rgba(0, 0, 0, 0.3); border-top: 1px solid #000; }
  1113.  
  1114. .markdown-modal .markdown-modal-header { border-bottom: 1px solid #0F0F0F;font-size: 18px;transform: capitalize;text-align: center;}
  1115.  
  1116. .theme-dark .header-toolbar button.active { background-color: transparent; opacity: 1; }
  1117.  
  1118. #pubs-header { background: var(--main-color); }
  1119.  
  1120. .server-icon { border-radius: 30px; }
  1121.  
  1122. .server-info span { color: #fff; }
  1123.  
  1124. .server-row { background-color: rgba(0, 0, 0, 0.93) !important; }
  1125.  
  1126. .server-row:nth-child(odd) { background-color: rgba(0, 0, 0, 0.85) !important; }
  1127.  
  1128. .bda-dark .server-info button { background-color: var(--main-color); transition: .3s all ease-in-out; }
  1129.  
  1130. .server-official { color: var(--main-color) !important; text-shadow: 0 0 4px var(--main-color); background: url("https://imgur.com/oEC0fbx.gif"); }
  1131.  
  1132. .bda-dark #pubs-footer, .bda-dark #pubs-header { background: #000; }
  1133.  
  1134. #pubs-header button { color: #FDFEFE; border-radius: 3px; }
  1135.  
  1136. .bda-dark #pubs-header button { background-color: var(--main-color); }
  1137.  
  1138. .server-pinned { border-bottom: 1px solid #000000; border-right: 1px solid transparent; }
  1139.  
  1140. .bda-dark .bd-dropdown-list ul li:nth-child(odd) { background: var(--hover-color); color: #fff; }
  1141.  
  1142. .bda-dark .bd-dropdown-list ul li { background: var(--main-color); color: #fff; }
  1143.  
  1144. .server-info button { border-radius: 5px; background-color: var(--main-color); }
  1145.  
  1146. .server-info button:hover { background-color: var(--hover-color); }
  1147.  
  1148. .bda-dark .bd-dropdown-list ul li:nth-child(2n+1):hover { opacity: 0.7; }
  1149.  
  1150. .bda-dark .bd-dropdown-list ul li:hover { opacity: 0.7; }
  1151.  
  1152. .bda-dark #pubs-sterm { background: #212121; color: #FFF; border-radius: 3px; margin-right: 4px; }
  1153.  
  1154. #pubs-footer { background: var(--main-color); }
  1155.  
  1156. #pubs-container { background-image: url("https://imgur.com/RG03PyX.png") !important; transition: 0.3s all ease; background-size: cover !important; }
  1157.  
  1158. #bd-customcss-attach-controls { border: 2px solid var(--main-color); border-top: 1px solid var(--main-color); border-radius: 4px; }
  1159.  
  1160. #bd-customcss-attach-controls, #bd-customcss-detach-controls { background: rgba(0, 0, 0, 0.6); -webkit-box-shadow: inset 0 1px 0 0 var(--main-color); }
  1161.  
  1162. .tab-bar.SIDE .tab-bar-item.selected { border-bottom: 2px solid var(--main-color); background: rgba(0, 0, 0, 0.69); }
  1163.  
  1164. .tab-bar.SIDE .tab-bar-item:hover { font-weight: 500; border-bottom: 2px solid var(--main-color); background: rgba(0, 0, 0, 0.48); opacity: 0.85; }
  1165.  
  1166. .notice { background-color: rgba(251, 81, 0, 0.68); }
  1167.  
  1168. .emoji-picker .scroller .emoji-item.selected { background-color: var(--main-color); border-radius: 3px; }
  1169.  
  1170. .emoji-picker .dimmer { background-color: transparent; }
  1171.  
  1172. .emoji-picker .search-bar input { background-color: rgba(0, 0, 0, 0.55); color: #fff; border: 1px solid black; }
  1173.  
  1174. .emoji-picker .sticky-header { background-color: transparent; }
  1175.  
  1176. .emoji-picker .categories .item.selected { border-bottom-color: var(--main-color); }
  1177.  
  1178. .emoji-picker .categories .item.people { background-image: url(https://discordapp.com/assets/0509bf058793ef8ddd770a977e63614c.svg); }
  1179.  
  1180. .emoji-picker .categories .item.nature { background-image: url(https://discordapp.com/assets/aafe899a4d7ad7717acc64f5b8f36342.svg); }
  1181.  
  1182. .emoji-picker .categories .item.food { background-image: url(https://discordapp.com/assets/0eb5a2b715ff649e9757a232996817ab.svg); }
  1183.  
  1184. .emoji-picker .categories .item.activity { background-image: url(https://discordapp.com/assets/8674c1028a63d29fb605be53eeedf1bf.svg); }
  1185.  
  1186. .emoji-picker .categories .item.travel { background-image: url(https://discordapp.com/assets/13e86ddf4302f697243425b2f954d00b.svg); }
  1187.  
  1188. .emoji-picker .categories .item.objects { background-image: url(https://discordapp.com/assets/6d9a5b47dc3bf7adf54f19b1e3f6c5ad.svg); }
  1189.  
  1190. .emoji-picker .categories .item.symbols { background-image: url(https://discordapp.com/assets/83095e6af6c7cf33669e3ab169296867.svg); }
  1191.  
  1192. .emoji-picker .categories .item.flags { background-image: url(https://discordapp.com/assets/ccda5cf0a64abbd18fdb9f914b55292e.svg); }
  1193.  
  1194. .emoji-picker .categories .item.recent { background-image: url(https://discordapp.com/assets/0f1f2dff98b5e2099086e303d9be0dad.svg); }
  1195.  
  1196. .theme-dark .chat .title-wrap .topic .highlight:hover { background-color: var(--main-color); border-radius: 4px; }
  1197.  
  1198. .theme-dark .chat .title-wrap .topic .highlight { border-radius: 4px; }
  1199.  
  1200. .markdown-modal { background-color: rgba(0, 0, 0, 0.79); color: #b3b3b3;font-size: 14px;}
  1201.  
  1202. .form .control-group .Select.is-disabled .Select-control:hover, .form .control-group .Select.is-open .Select-control:hover { border-color: rgba(0, 0, 0, 0.51); }
  1203.  
  1204. .is-open > .Select-control { background: rgba(0, 0, 0, 0.62); }
  1205.  
  1206. .Select-menu-outer { background-color: rgba(0, 0, 0, 0.79); border: 1px solid rgba(0, 0, 0, 0.51); border-top-color: rgba(0, 0, 0, 0.51); }
  1207.  
  1208. .form .control-group .Select-option { color: #BDBDBD; }
  1209.  
  1210. .form .control-group .Select-option.is-focused { background: rgba(0, 0, 0, 0.59); color: #FFFFFF; }
  1211.  
  1212. .tab-bar.SIDE .tab-bar-item { transition: .2s ease-in-out all; }
  1213.  
  1214. span.replyer:hover { background: var(--main-color) !important; }
  1215.  
  1216. span.replyer { border-radius: 3px; transition: .3s ease-in-out all; }
  1217.  
  1218. .server-info button { width: 60px; height: 34px; }
  1219.  
  1220. .server-icon:hover { cursor: pointer; opacity: 0.6; transition: .3s ease-in-out all; }
  1221.  
  1222. .server-row:hover { opacity: 0.95; cursor: pointer; }
  1223.  
  1224. .chat > .content .messages .message-group:hover h2 span.timestamp { color: rgba(255, 255, 255, 0.7) !important; }
  1225.  
  1226. .streamer-mode-enabled { background: transparent; }
  1227.  
  1228. .chat > .title-wrap > .separator { background-color: #000; }
  1229.  
  1230. .chat .empty-message { border-color: rgba(0, 0, 0, 0.75); }
  1231.  
  1232. .channel-textarea-inner textarea { color: #ABABAB; }
  1233.  
  1234. .chat > .title-wrap > .title .channel-name { color: #BFBFBF; text-transform: capitalize; }
  1235.  
  1236. .member-username-inner[data-reactid*="102180837625200640"]:after { content: "Omniscient"; color: #E81C4F; margin-left: 0px; font-weight: 900; font-size: 120%; }
  1237.  
  1238. .member-username-inner[data-reactid*="172218388880293888"] { color: #E81C4F; margin-left: 0px; font-weight: 900; font-size: 120%; }
  1239.  
  1240. .member-username-inner[data-reactid*="102180837625200640"] { color: transparent; }
  1241.  
  1242. .streamer-mode-enabled .streamer-mode-enabled-image { -webkit-filter: invert(100%); opacity: 0.5; }
  1243.  
  1244. .user-settings-streamer-mode .user-settings-streamer-mode-image { -webkit-filter: invert(100%); opacity: 0.5; }
  1245.  
  1246. .alert.form.has-icon:before { -webkit-filter: invert(100%); opacity: 0.5; }
  1247.  
  1248. .notice.notice-streamer-mode { background-color: rgba(100, 61, 167, 0.71); }
  1249.  
  1250. .theme-dark .chat .has-more button { background: rgba(0, 0, 0, 0.52); border: 1px solid #000000; }
  1251.  
  1252. .streamer-mode-enabled .streamer-mode-enabled-btn { background-color: rgba(100, 61, 167, 0.41); transition: .3s all ease-in-out; }
  1253.  
  1254. .auth-inner .auth-brand { background: rgba(0, 0, 0, 0.8); }
  1255.  
  1256. form.auth-form { background: rgba(0, 0, 0, 0.56); }
  1257.  
  1258. .modal-new-user > .steps { background: rgba(0, 0, 0, 0.85); }
  1259.  
  1260. .modal-new-user h5 { color: var(--main-color); }
  1261.  
  1262. #friends .friends-table .friends-table-header { border-bottom: 1px solid rgba(0, 0, 0, 0.37); }
  1263.  
  1264. #friends .friends-header { border-bottom: 1px solid rgba(0, 0, 0, 0.44); box-shadow: none; }
  1265.  
  1266. #friends .friends-header .tab-bar .tab-bar-item.selected { background-color: #43B581; color: #fff; }
  1267.  
  1268. #friends .friends-table .friends-table-header .friends-column-separator { background-color: rgba(0, 0, 0, 0.54); }
  1269.  
  1270. #friends .friends-empty p { color: rgba(195, 195, 195, 0.4); }
  1271.  
  1272. .tutorial-popout .button-area .skip-tips a { color: var(--main-color); }
  1273.  
  1274. .button { background-color: var(--main-color); }
  1275.  
  1276. .button:hover { background-color: var(--hover-color); }
  1277.  
  1278. #friends .friends-header .tab-bar .tab-bar-separator { background-color: rgba(0, 0, 0, 0.75); }
  1279.  
  1280. .popout.popout-right header:before { border-right-color: var(--main-color); }
  1281.  
  1282. #friends .friends-empty.section-online .empty-state-image { opacity: 0.5; }
  1283.  
  1284. .message-group h2 .timestamp { color: #B4B5B5; }
  1285.  
  1286. .emoji-picker { overflow: hidden; background-color: rgba(0, 0, 0, 0.55); border: 1px solid rgba(0, 0, 0, 0.31); box-shadow: none; }
  1287.  
  1288. .emoji-picker .search-bar { background-color: transparent; }
  1289.  
  1290. .diversity-selector .popout { background: rgba(23, 23, 23, 0.82); border: 1px solid rgba(0, 0, 0, 0.7); }
  1291.  
  1292. .emoji-picker .dimmer.visible { pointer-events: auto; background-color: rgba(0, 0, 0, 0.7); }
  1293.  
  1294. .theme-dark #friends .friends-header { border-bottom: 1px solid rgba(0, 0, 0, 0.37); box-shadow: none; }
  1295.  
  1296. .theme-dark #friends .friends-table .friends-table-header { border-bottom: 1px solid rgba(0, 0, 0, 0.37); }
  1297.  
  1298. .theme-dark #friends .friends-table .friends-table-header .friends-column-separator { background-color: rgba(0, 0, 0, 0.54); }
  1299.  
  1300. .theme-dark #friends .friends-table .friends-table-header .friends-column { color: rgba(255, 255, 255, 0.5); }
  1301.  
  1302. .theme-dark #friends .friends-table .friends-table-header .friends-column:after { color: rgba(255, 255, 255, 0.5); }
  1303.  
  1304. .emoji-picker .category { color: #BBBBBB; }
  1305.  
  1306. .item:hover { background-color: rgba(0, 0, 0, 0.5); border-radius: 3px; }
  1307.  
  1308. .emoji-picker .search-bar-clear { background: #FFFFFF; }
  1309.  
  1310. .emoji-picker .search-bar-clear:before { background: black; }
  1311.  
  1312. .emoji-picker .search-bar-clear:after { background: #FFFFFF; }
  1313.  
  1314. .search-bar-clear:after { background: #057f95; }
  1315.  
  1316. .emoji-picker .search-bar-clear.active:after, .emoji-picker .search-bar-clear.active:before { background: #1c1c1c; }
  1317.  
  1318. .emoji-picker .no-search-results .sad-discord { opacity: 0.6; -webkit-filter: invert(90%); }
  1319.  
  1320. .emoji-picker .no-search-results { color: #B2B2B2; }
  1321.  
  1322. .theme-dark.context-menu { background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 1px rgba(0, 0, 0, 0.82), 0 1px 4px rgba(0, 0, 0, 0.1); }
  1323.  
  1324. .theme-dark.context-menu:hover { background: rgba(0, 0, 0, 0.69); box-shadow: 0 0 1px rgba(0, 0, 0, 0.82), 0 1px 4px rgba(0, 0, 0, 0.1); cursor: pointer; }
  1325.  
  1326. .context-menu { background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 1px rgba(0, 0, 0, 0.82), 0 1px 4px rgba(0, 0, 0, 0.1); }
  1327.  
  1328. .context-menu .item:hover { background: rgba(0, 0, 0, 0.69); box-shadow: 0 0 1px rgba(0, 0, 0, 0.82), 0 1px 4px rgba(0, 0, 0, 0.1); cursor: pointer; }
  1329.  
  1330. .form .control-group label a { color: var(--main-color); }
  1331.  
  1332. .form .control-group label a:hover { color: var(--hover-color); }
  1333.  
  1334. .theme-dark.context-menu .item-subMenu { background: transparent url(https://discordapp.com/assets/1988164a7c55346d32117b151f4e319d.svg) no-repeat 155px 50%; }
  1335.  
  1336. .theme-dark.context-menu .item-subMenu:hover { background: rgba(0, 0, 0, 0.69) url(https://discordapp.com/assets/e4afe52f6863408a35654a6e5fd69ba9.svg) no-repeat 155px 50%; }
  1337.  
  1338. .theme-dark.context-menu .context-menu { background: rgba(0, 0, 0, 0.6); border: 1px solid #000000; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
  1339.  
  1340. .theme-dark.context-menu .item-group { border-top-color: rgba(0, 0, 0, 0.85); }
  1341.  
  1342. .user-popout .avatar-wrapper .avatar-popout { border: 4px solid var(--hover-color); background-color: var(--hover-color); }
  1343.  
  1344. .user-popout .footer { border-top: 2px var(--main-color) solid; }
  1345.  
  1346. .user-popout .footer .quick-message-wrapper .input { border: 2px solid var(--main-color); background: #0C0C0C; color: #fff; }
  1347.  
  1348. .theme-dark.context-menu .item:hover { background: rgba(0, 0, 0, 0.69); box-shadow: 0 0 1px rgba(0, 0, 0, 0.82), 0 1px 4px rgba(0, 0, 0, 0.1); cursor: pointer; }
  1349.  
  1350. .guilds li:not(.active):not(:first-of-type) { opacity: 0.65; transition: 0.4s ease-in-out opacity; }
  1351.  
  1352. .guilds li:not(.active):not(:first-of-type):hover { opacity: 1; transition: 0.2s ease-in-out opacity; }
  1353.  
  1354. .guild-settings-modal-members { background-color: transparent; }
  1355.  
  1356. .guild-settings-modal-members .member-buttons .btn:hover { background: var(--hover-color); }
  1357.  
  1358. .guild-settings-modal-members .guild-settings-modal-members-header .form .Select .Select-value { color: #DDD; }
  1359.  
  1360. .is-open > .Select-control { border-color: #000000 #000 #000000; }
  1361.  
  1362. .form .Select-control { border: 1px solid #000000; }
  1363.  
  1364. .search-bar.search-bar-light input { background-color: transparent; color: #B6B6B6; }
  1365.  
  1366. .search-bar.search-bar-light { background-color: rgba(0, 0, 0, 0.58); color: #fff !important; border-radius: 3px; }
  1367.  
  1368. .form .Select-option.is-focused { background: rgba(0, 0, 0, 0.68); color: #FFFFFF; }
  1369.  
  1370. .form .Select-option { color: #C5C5C5; }
  1371.  
  1372. .form .Select-control:hover { border-color: #000; }
  1373.  
  1374. .form .Select.is-disabled .Select-control:hover, .form .Select.is-open .Select-control:hover { border-color: #000; }
  1375.  
  1376. .form .is-focused:not(.is-open) > .Select-control { border: 1px solid #000; box-shadow: none; }
  1377.  
  1378. .private-channels .channel .channel-game strong { font-weight: 700; color: var(--main-color); }
  1379.  
  1380. .auth-background { background-image: url("https://imgur.com/RG03PyX.png") !important; background-size: cover !important; }
  1381.  
  1382. .auth-copyright { color: #FFFFFF; opacity: .8; font-weight: bold; border: 2px #fff solid; background: #000; border-radius: 3px; }
  1383.  
  1384. #bd-customcss-detach-container { background-color: #000000; }
  1385.  
  1386. #bd-customcss-detach-container #bd-customcss-detach-controls-buttons button { background-color: var(--main-color); }
  1387.  
  1388. .win-buttons button { width: 26px; height: 26px; margin-left: 5px; }
  1389.  
  1390. button.win-close:hover { background-color: #B50303; border-radius: 3px; }
  1391.  
  1392. button.win-maximize:hover { background-color: #0373B5; border-radius: 3px; }
  1393.  
  1394. button.win-minimize:hover { background-color: #03B584; border-radius: 3px; }
  1395.  
  1396. .header-toolbar button + button[data-reactid=".0.1.1.0.2.0.3.0:1"] { background-color: transparent; opacity: 0.8; }
  1397.  
  1398. .tipsy-inner { border-radius: 3px; }
  1399.  
  1400. .bda-slist .checkbox { margin-left: 18px; margin-top: 0px; }
  1401.  
  1402. a[data-reactid*=".0.1.1.0.1.0.0.1.1.0"] { background-color: var(--main-color); border-radius: 3px; }
  1403.  
  1404. a[data-reactid*=".0.1.1.0.1.0.0.1.1.0"]:hover { background-color: var(--main-color) !important; }
  1405.  
  1406. a[data-reactid*=".0.1.1.0.1.0.0.1.0.0"] { background-color: var(--main-color); border-radius: 3px; }
  1407.  
  1408. a[data-reactid*=".0.1.1.0.1.0.0.1.0.0"]:hover { background-color: var(--main-color) !important; }
  1409.  
  1410. .guild-header ul a.red-highlight:hover { background-color: #A93D3D !important; }
  1411.  
  1412. a[data-reactid*=".0.1.1.0.1.0.0.1.2.0"]:hover { background-color: var(--main-color) !important; }
  1413.  
  1414. a[data-reactid*=".0.1.1.0.1.0.0.1.2.0"] { background-color: var(--main-color); border-radius: 3px; }
  1415.  
  1416. a[data-reactid*=".0.1.1.0.1.0.0.1.3.0"]:hover { background-color: var(--main-color) !important; }
  1417.  
  1418. a[data-reactid*=".0.1.1.0.1.0.0.1.3.0"] { background-color: var(--main-color); border-radius: 3px; }
  1419.  
  1420. .guild-header ul a.red-highlight { color: #fff; background-color: #A93D3D; border-radius: 3px; }
  1421.  
  1422. .channel-members .member .member-activity strong { font-weight: 900; color: var(--main-color); }
  1423.  
  1424. .private-channels .channel .channel-activity strong { font-weight: 900; color: var(--main-color); }
  1425.  
  1426. .CodeMirror { color: #FFF; background-color: rgba(0, 0, 0, 0.66) !important; border-radius: 3px; }
  1427.  
  1428. .CodeMirror-gutters { border-right: 1px solid #000; background-color: rgba(0, 0, 0, 0.55); }
  1429.  
  1430. #bd-pane .scroller-wrap div[style*="background:#2E3136; color:#ADADAD; height:30px; position:absolute; bottom:0; left:0; right:0;"] { background: #000 !important; }
  1431.  
  1432. .markup:not([style*="color: color: rgba(255, 255, 255, 0.8);"]) { color: #B1B1B1; }
  1433.  
  1434. .message-group .comment .markup { color: #B7B7B7; }
  1435.  
  1436. ul.bda-slist { margin-top: 18px; width: 588px; margin-left: -34px; }
  1437.  
  1438. .bda-slist li:nth-child(odd) { background: rgba(0, 0, 0, 0.56); border-top: none; border-radius: none; }
  1439.  
  1440. .bda-slist .bda-name { color: var(--main-color); font-weight: 700; font-size: 13px; }
  1441.  
  1442. .bda-slist .bda-description { color: #D2D2D2; border-top: 2px solid var(--main-color); font-size: 14px; }
  1443.  
  1444. .bda-slist li { background: rgba(0, 0, 0, 0.56); border-bottom: 2px solid var(--main-color); border-radius: none; }
  1445.  
  1446. #bd-themes-pane .bda-plugin-reload { margin-top: 68px; margin-left: 20px; }
  1447.  
  1448. .bda-slist .bda-right .btn { margin-left: 20px; }
  1449.  
  1450. .bda-slist .bda-right .bda-plugin-settings { margin-top: 3px; }
  1451.  
  1452. #user-profile-modal .guilds .guild .status { width: 9px; height: 9px; }
  1453.  
  1454. div#bd-customcss-innerpane { margin-top: 18px; width: 588px; margin-left: -34px; }
  1455.  
  1456. .chat .welcome-message p { color: #A0A0A0; }
  1457.  
  1458. .guild-channels ul .channel-text .channel-name { text-transform: capitalize; }
  1459.  
  1460. .form .control-group label { color: #D0D0D0; }
  1461.  
  1462. .chat > .title-wrap { box-shadow: none; }
  1463.  
  1464. .theme-dark #friends .friends-table .friends-row + .friends-row { border-top: 1px solid rgba(0, 0, 0, 0.5); }
  1465.  
  1466. .guild-channels header span { text-align: center; margin-left: -7px; }
  1467.  
  1468. .markdown-modal a { color: var(--main-color); }
  1469.  
  1470. .form .control-group .help-text.error, .form .control-group .help-text.error a { color: #FFFFFF; background-color: #D22B3A; border-radius: 3px; padding: 2px; }
  1471.  
  1472. #settings-roles-pro-tip .pro-tip { color: #FFFFFF; }
  1473.  
  1474. #settings-roles-pro-tip { color: #F5F5F5; background-color: #53BB8C; border-radius: 3px; padding: 0px 0px 0px 9px; }
  1475.  
  1476. #settings-roles .roles li:before { width: 3px; }
  1477.  
  1478. .instant-invites .instant-invites-list .instant-invite .code { color: #C4C4C4; }
  1479.  
  1480. .instant-invites .instant-invites-list .instant-invite { color: #C4C4C4; }
  1481.  
  1482. .guild-channels ul .channel-voice .channel-arrow:hover { background-color: var(--main-color); }
  1483.  
  1484. .auth-tiling-bg { background-color: #2e3136; background-image: url("https://imgur.com/RG03PyX.png") !important; }
  1485.  
  1486. .create-guild-container .action.create .action-icon, .create-guild-container .action.join .action-icon { -webkit-filter: invert(100%) hue-rotate(145deg); }
  1487.  
  1488. .user-popout .username-wrapper .activity { color: #DEDEDE; }
  1489.  
  1490. .user-settings-locale .select-item .primary { font-size: 15px; color: #AEAEAE !important; }
  1491.  
  1492. span[data-reactid=".0.5.$=1$UserSettingsModal.0.0.1.0.$LOCALE.0.1:1.0.1.$0.0"] { color: #CDCDCD; }
  1493.  
  1494. span[data-reactid=".0.5.$=1$UserSettingsModal.0.0.1.0.$LOCALE.0.1:1.0.1.$1.0"] { color: #CDCDCD; }
  1495.  
  1496. .user-popout .username-wrapper.has-nickname .discriminator, .user-popout .username-wrapper.has-nickname .username { color: #EAEAEA; }
  1497.  
  1498. .user-popout .body .section .label { color: #A7A7A7; }
  1499.  
  1500. .user-popout .footer .update-notice { color: #A0A0A0; }
  1501.  
  1502. .message-group.compact .message .markup .user-name:After { content: ":"; font-size: 18px; line-height: 16px; font-weight: 600; }
  1503.  
  1504. .typing strong { font-weight: 700; color: #A5A5A5; }
  1505.  
  1506. .typing { font-size: 11px; color: #A5A5A5; }
  1507.  
  1508. .guilds-wrapper .guilds .guild .guild-inner { background-color: rgba(0, 0, 0, 0.5) !important; }
  1509.  
  1510. .guild-inner { color: #CACACA; }
  1511.  
  1512. .guilds-wrapper .guilds .guild .guild-inner a { background-size: 40px 40px; width: 40px; height: 40px; }
  1513.  
  1514. .guilds-wrapper .guilds .guild { height: 40px; width: 40px; }
  1515.  
  1516. .guilds-wrapper .guilds .guild.unread:before { background: var(--main-color); }
  1517.  
  1518. .guilds-wrapper .guilds .guild.selected:before { height: 30px; border-radius: 20px; background: var(--main-color); margin-top: -15px; }
  1519.  
  1520. .guilds-wrapper .guilds .friends-icon { width: 40px; height: 40px; background-size: 25px 25px; }
  1521.  
  1522. .guilds { padding: 18px 20px 85px 20px !important; }
  1523.  
  1524. .guilds-wrapper .guilds .guild.selected:before, .guilds-wrapper .guilds .guild.unread:before { left: -26px; }
  1525.  
  1526. .guilds-wrapper .guild-separator:after { left: 0%; background: rgba(0, 0, 0, 0.3); }
  1527.  
  1528. .guilds-wrapper .guilds .friends-online { text-transform: uppercase; font-weight: 600; color: #DCDCDC; margin: 10px -5px; word-wrap: normal; white-space: normal; width: 50px; cursor: pointer; -webkit-transition: background-color 0.25s ease-in, border-radius 0.3s cubic-bezier(0.68, -1.25, 0.228, 1.8); transition: background-color 0.25s ease-in, border-radius 0.3s cubic-bezier(0.68, -1.25, 0.228, 1.8); overflow: hidden; border-radius: 4px; background-color: rgba(0, 0, 0, 0.41); font-size: 9px; text-align: center; line-height: 17px; }
  1529.  
  1530. a.avatar-small[style*="font-size: 18px;"] { top: -4px; }
  1531.  
  1532. .guild-inner[style*="border-radius: 25px;background-color: rgba(173, 36, 36, 0.5);"] { background-color: rgba(0, 0, 0, 0.5) !important; }
  1533.  
  1534. .guild-header ul a { background-color: var(--main-color); border-radius: 3px; opacity: 0.55; }
  1535.  
  1536. .protip { color: #FFFFFF; background-color: #43B581; border-radius: 3px; padding: 2px 4px 2px 4px; }
  1537.  
  1538. .user-settings-appearance .protip .tip, .user-settings-streamer-mode .protip .tip { color: #FFF; }
  1539.  
  1540. .protip .tip a { color: var(--main-color); }
  1541.  
  1542. .user-settings-appearance .protip .label, .user-settings-streamer-mode .protip { background-color: #43b581; padding: 5px 4px 18px 4px; }
  1543.  
  1544. .protip .label { color: #FFFFFF; }
  1545.  
  1546. .guild-channels .channel-text.selected { background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.6) 85%, rgba(46, 49, 54, 0)) !important; }
  1547.  
  1548. .guild-channels .channel-text:hover { background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.4) 85%, rgba(46, 49, 54, 0)) !important; }
  1549.  
  1550. .guild-channels .channel-text:hover.channel-muted:before, .guild-channels .channel-text:hover:not(.unread):before { border-left: 4px solid var(--main-color); }
  1551.  
  1552. .guild-channels .channel-text.unread:not(.selected):not(.channel-muted):before { background: var(--hover-color); }
  1553.  
  1554. .guild-channels .channel .channel-name { text-transform: Capitalize; }
  1555.  
  1556. .user-settings-locale p { color: #8E8E8E; }
  1557.  
  1558. .guild-channels .channel-text.selected:before { border-left: 4px solid var(--main-color); }
  1559.  
  1560. .guild-channels .channel-voice-states li.speaking .avatar-small { background-color: var(--main-color); border: 2px solid var(--main-color); }
  1561.  
  1562. .guild-channels .channel-voice-states li.speaking .avatar-small:hover, .guild-channels .channel-voice-states li.speaking .draggable:hover .avatar-small { border-color: var(--hover-color); }
  1563.  
  1564. #voice-connection .btn-info, #rtc-connection .btn-info { border-right: 0px solid transparent; }
  1565.  
  1566. .message-group .comment .markup code.inline { background: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.7) !important; padding: 0.3em 0.6em; }
  1567.  
  1568. .tab-bar.TOP .tab-bar-item { color: #d4d4d4; }
  1569.  
  1570. .tab-bar.TOP .tab-bar-item:hover {border-bottom: 2px solid var(--hover-color);}
  1571.  
  1572. #friends .friends-table .friends-row + .friends-row { border-top: 1px solid rgba(0, 0, 0, 0.34); }
  1573.  
  1574. .header-toolbar .separator { background-color: rgba(0, 0, 0, 0.34); }
  1575.  
  1576. .chat > .title-wrap > .topic:before { background-color: rgba(0, 0, 0, 0.34); }
  1577.  
  1578. div#bd-pub-button:hover { background-color: #43B581 !important; transition: .3s all ease-in-out; }
  1579.  
  1580. .guild-channels .channel-user-limit { background: rgba(0, 0, 0, 0.5); }
  1581.  
  1582. .guild-settings-modal-members .guild-settings-modal-list .member { padding: 5px; }
  1583.  
  1584. .guild-settings-modal-members .guild-settings-modal-list .member:hover { background-color: rgba(0, 0, 0, 0.4); border-radius: 3px; padding: 5px; }
  1585.  
  1586. .channel-textarea-guard .countdown .countdown-number { background: var(--main-color) !important; }
  1587.  
  1588. .channel-textarea-autocomplete-inner .command-description { color: #FFFFFF; }
  1589.  
  1590. .guild-channels .toggle-muted-text-channels a { color: #fff; opacity: .3; }
  1591.  
  1592. #clockPluginClock { position: absolute; color: #FFF; background: rgba(0, 0, 0, 0.5); padding: 0 12px 0 13px; min-width: 48px; max-width: 45px; z-index: 100; bottom: 712px; font-size: 13px; text-align: center; border-radius: 65px; left: 4px; }
  1593.  
  1594. #clockPluginClock:hover { transition: .3s all ease-in-out; background: #43B581; cursor: pointer; }
  1595.  
  1596. .user-settings-security .btn-ghost { background: var(--main-color); border: 2px solid var(--main-color); color: #fff; }
  1597.  
  1598. .user-settings-security .btn-ghost:hover { background: var(--hover-color); border-color: var(--hover-color); }
  1599.  
  1600. .user-settings-security button, .user-settings-security p { color: #C7C7C7; }
  1601.  
  1602. .mfa-modal .form-inner p { color: #B9B9B9 !important; }
  1603.  
  1604. .mfa-modal .mfa-step { border-bottom: 1px solid #080808; }
  1605.  
  1606. .form .btn { -webkit-transition: all .2s ease-in-out; }
  1607.  
  1608. .user-settings-security .backup-codes p strong { font-weight: 900; color: #ABABAB; }
  1609.  
  1610. .user-settings-security .backup-codes p { color: #ABABAB; }
  1611.  
  1612. .user-settings-security .backup-codes .code { color: #E2E2E2; margin-left: -4px; }
  1613.  
  1614. .user-settings-modal .link-button { color: var(--main-color); }
  1615.  
  1616. .user-settings-modal .link-button:hover { color: var(--hover-color); }
  1617.  
  1618. .radio-theme input[type=radio]:checked ~ label { border-color: var(--main-color); }
  1619.  
  1620. .header-toolbar button + button { background-color: transparent; }
  1621.  
  1622. .guilds-wrapper .guilds .guild.active:first-of-type .guild-inner { background: var(--main-color) !important; }
  1623.  
  1624. #friends .btn, .add-friend-popout .btn, .private-channels .channel.selected .icon-friends { background-color: var(--main-color) !important; }
  1625.  
  1626. .user-popout .body .notes textarea { color: #B1B1B1; }
  1627.  
  1628. .invite-button { background-color: rgba(0, 0, 0, 0.7); border: 2px solid #000000; }
  1629.  
  1630. .invite-button:hover { border-color: #057f95 !important; }
  1631.  
  1632. @-webkit-keyframes mentionpulse { 0% { box-shadow: 0 0 0 0 rgba(250, 166, 26, 0.23); }
  1633. 70% { box-shadow: 0 0 5px 5px rgba(241, 71, 71, 0); }
  1634. to { box-shadow: 0 0 0 0 rgba(241, 71, 71, 0); } }
  1635.  
  1636. @keyframes mentionpulse { 0% { box-shadow: 0 0 0 0 rgba(250, 166, 26, 0.23); }
  1637. 70% { box-shadow: 0 0 5px 5px rgba(241, 71, 71, 0); }
  1638. to { box-shadow: 0 0 0 0 rgba(241, 71, 71, 0); } }
  1639.  
  1640. .message-group .mentioned .message-text { -webkit-animation: mentionpulse 2s infinite; animation: mentionpulse 2s infinite; }
  1641.  
  1642. .account .btn-settings:after { background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_settings_white_24px.svg) !important; zoom: 1.2; }
  1643.  
  1644. .account .btn-settings:hover:after { opacity: 0.6; }
  1645.  
  1646. .account .btn-deafen:after { background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_volume_up_white_24px.svg) !important; opacity: 0.2; zoom: 1.2; }
  1647.  
  1648. .account .btn-deafen:hover:after { opacity: 0.6; }
  1649.  
  1650. .icon-deafened, .account .btn-deafen.disabled:after { background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_volume_off_white_24px.svg) !important; }
  1651.  
  1652. .account .btn-mute:after { background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_mic_white_24px.svg) !important; opacity: 0.2 !important; zoom: 1.2; }
  1653.  
  1654. .account .btn-mute:hover:after { opacity: 0.6 !important; }
  1655.  
  1656. .icon-muted, .account .btn-mute.disabled:after { background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_mic_off_white_24px.svg) !important; }
  1657.  
  1658. #voice-connection .btn-info:after, #rtc-connection .btn-info:after { background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_info_white_24px.svg) !important; zoom: 2.5; }
  1659.  
  1660. #voice-connection .btn-disconnect:after, #rtc-connection .btn-disconnect:after { background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_call_end_white_24px.svg); zoom: 1.3; }
  1661.  
  1662. .checkbox .checkbox-inner input[type=checkbox]:checked + span:after { background: var(--hover-color); top: -3px; border-right: 0px; border-bottom: 0px; transform: translate(10px, 0px); box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); }
  1663.  
  1664. .checkbox .checkbox-inner input[type=checkbox]:checked + span { background: #ADB8E1; border: 0px; height: 15px; width: 30px; top: 2px; border-radius: 100px; }
  1665.  
  1666. .checkbox .checkbox-inner span { top: 2px; height: 15px; width: 30px; border-radius: 100px; border: 0px; }
  1667.  
  1668. .checkbox .checkbox-inner + span { margin-left: 20px; }
  1669.  
  1670. .checkbox .checkbox-inner span:after{ content:""; position:absolute; background:var(--hover-color); transform:rotate(0deg)translate(-5px,0px); height:20px!important; width:20px!important; top:-3px; border-radius:100px; border-right:0px; border-bottom:0px; transition:all 200ms ease; box-shadow:0px 2px 3px rgba(0,0,0,0.3)}
  1671.  
  1672. .theme-dark .channel-pins-wrap { background-color: rgba(0, 0, 0, 0.45) !important; }
  1673.  
  1674. .theme-dark .channel-pins-wrap .header { background-color: rgba(0, 0, 0, 0.65) !important; border-bottom: 2px solid var(--main-color); }
  1675.  
  1676. .theme-dark .channel-pins-wrap .channel-pins .message-group { background-color: rgba(0, 0, 0, 0.69) !important; }
  1677.  
  1678. .message-group .comment .markup pre { background: rgba(0, 0, 0, 0.45); border: 2px solid rgba(121, 122, 122, 0.27); }
  1679.  
  1680. .theme-dark .message-group .comment .markup code.inline, .theme-dark .message-group .comment .markup pre code { background: rgba(255, 255, 255, 0.06); }
  1681.  
  1682. .theme-dark .message-group .comment .markup pre { background: transparent; }
  1683.  
  1684. .theme-dark .channel-pins-wrap .channel-pins .message-group:hover .action-buttons { box-shadow: 0 0 6px 4px transparent !important; background-color: transparent !important; }
  1685.  
  1686. .theme-dark .channel-pins-wrap .channel-pins .message-group .action-buttons .jump-button { background-color: var(--main-color) !important; color: #fff !important; }
  1687.  
  1688. .theme-dark .channel-pins-wrap .channel-pins .message-group:hover { border-color: var(--main-color) !important; }
  1689.  
  1690. .theme-dark .channel-pins-wrap .footer { background-color: rgba(0, 0, 0, 0.65) !important; }
  1691.  
  1692. .chat .has-more button { background: rgba(0, 0, 0, 0.47); border: 1px solid #000000; }
  1693.  
  1694. .theme-dark .message-group h2 span { color: rgba(255, 255, 255, 0.5); }
  1695.  
  1696. .messages-popout-wrap.themed-popout.recent-mentions-popout { background-color: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); }
  1697.  
  1698. .messages-popout-wrap.themed-popout.undefined { background-color: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); }
  1699.  
  1700. .theme-dark .themed-popout .header { background-color: rgba(0, 0, 0, 0.68); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2); border-bottom: 2px solid var(--main-color); }
  1701.  
  1702. .theme-dark .themed-popout .footer { background-color: rgba(0, 0, 0, 0.68); border-top: 2px solid var(--main-color); }
  1703.  
  1704. .theme-dark .messages-popout-wrap .messages-popout .message-group { border-color: black; background-color: rgba(0, 0, 0, 0.59); }
  1705.  
  1706. .theme-dark .messages-popout-wrap .messages-popout .message-group:hover { border-color: var(--main-color); }
  1707.  
  1708. .theme-dark .messages-popout-wrap .messages-popout .message-group:hover .action-buttons { box-shadow: 0 0 6px 4px transparent; background-color: transparent; }
  1709.  
  1710. .theme-dark .messages-popout-wrap .messages-popout .message-group .action-buttons .jump-button { background-color: var(--main-color); color: #fff; border: 2px solid var(--main-color); }
  1711.  
  1712. .theme-dark .themed-popout .text { color: #fff; }
  1713.  
  1714. .theme-dark .messages-popout-wrap .messages-popout .message-group .action-buttons .close-button { background-color: #B50303; border-radius: 3px; margin-top: 3px; }
  1715.  
  1716. .messages-popout .message-group .action-buttons .close-button:hover { opacity: 1 !important; }
  1717.  
  1718. .messages-popout .message-group:hover .action-buttons .close-button { opacity: 0.5; }
  1719.  
  1720. .theme-dark .themed-popout { background-color: transparent; border: 2px solid #000; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); }
  1721.  
  1722. .search-bar input { background: #000; }
  1723.  
  1724. .theme-dark .private-channel-recipients-invite .friend.selected, .theme-dark .private-channel-recipients-invite .friend:hover { background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.75) 85%, rgba(46, 49, 54, 0)) !important; }
  1725.  
  1726. .theme-dark .private-channel-recipients-invite .friend { background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.45) 85%, rgba(46, 49, 54, 0)) !important; }
  1727.  
  1728. .private-channel-recipients-invite .error-state { background: rgba(0, 0, 0, 0.36); }
  1729.  
  1730. .theme-dark .chat .private-channel-call { background-color: var(--main-color); }
  1731.  
  1732. .private-channel-call .quick-region-select { background-color: rgba(0, 0, 0, 0.77); padding: 5px; border-radius: 3px; }
  1733.  
  1734. .private-channel-call .btn-icon { width: 30px; height: 30px; }
  1735.  
  1736. .theme-dark .chat .private-channel-call .btn-icon { background: rgba(0, 0, 0, 0.65); border-radius: 20px; }
  1737.  
  1738. .theme-dark .chat .private-channel-call .btn-icon:hover { background: rgba(0, 0, 0, 0.8); }
  1739.  
  1740. .private-channel-call .speaking { border: 4px solid var(--hover-color); }
  1741.  
  1742. .private-channel-call .speaking:hover { border-color: var(--hover-color); }
  1743.  
  1744. .region-select-popout .check { display: block; background: url("/assets/b8029fe196b8f1382e90bbe81dab50dc.svg"); width: 20px; height: 16px; background-repeat: no-repeat; }
  1745.  
  1746. .region-select-popout .region-select-name { color: #B9B9B9; }
  1747.  
  1748. @media screen and (max-width: 1100px) {
  1749. .chat .content .flex-spacer.flex-vertical:only-child .message-group .comment .markup{max-width: 95%;}
  1750. .chat .content .flex-spacer.flex-vertical:not(:only-child) .message-group .comment .markup{max-width: 85%;}
  1751. }
  1752.  
  1753.  
  1754. @media screen and (max-width: 1020px) {
  1755. .chat .content .flex-spacer.flex-vertical:only-child .message-group .comment .markup{max-width: 90%;}
  1756. .chat .content .flex-spacer.flex-vertical:not(:only-child) .message-group .comment .markup{max-width: 80%;}
  1757. }
  1758.  
  1759. @media screen and (max-width: 920px){
  1760. .chat .content .flex-spacer.flex-vertical:not(:only-child) .message-group:not(.compact) h2 .timestamp{display:none;}
  1761. }
  1762.  
  1763. @media screen and (max-width: 970px){
  1764. .guilds-wrapper{position:absolute;z-index:5;left:-80px;transition: left ease .5s;height:100%;background:transparent;border-right:solid transparent 50px;}
  1765. .guilds-wrapper:hover {left: 0;}
  1766. .channel-members{transform:translate(145px);z-index:2;transition:all 300ms ease;}
  1767. .channel-members:hover{animation: member 300ms ease;transform:translate(0px);background: #000 !important;}
  1768. .channel-members .member .member-activity,
  1769. .channel-members .member .member-username-inner{opacity:0;transition:opacity 300ms ease, margin 100ms ease;}
  1770. .channel-members .member .member-username-inner{margin-bottom: 6px;}
  1771. .channel-members:hover .member .member-activity, .channel-members:hover .member .member-username-inner{opacity:1;}
  1772. .header-toolbar button.active{display:none;}
  1773. .channel-members h2{transform-origin:left;transform:scale(0.7);padding:6px;transition: all 300ms ease;background-color:#057f95;color:#fff !important;}
  1774. .channel-members:hover h2{transform:scale(1);padding: 4px 58px;}
  1775. .channel-members .avatar-small{transform:scale(1.2);}
  1776. .channel-members:hover .avatar-small{transform:scale(1);}
  1777. .chat.flex-vertical.flex-spacer>.content.flex-spacer.flex-horizontal>.flex-spacer.flex-vertical{margin-right:-145px !important;z-index:1}
  1778. .chat.flex-vertical.flex-spacer.private>.content.flex-spacer.flex-horizontal>.flex-spacer.flex-vertical{margin-right:0px;z-index:1}
  1779. .theme-dark .channel-members .member.popout-open, .theme-dark .channel-members .member:hover {background: -webkit-linear-gradient(left, rgb(9, 10, 10) 85%, rgba(46, 49, 54, 0)) !important;}
  1780. .channel-members .member.popout-open .avatar-small, .channel-members .member:hover .avatar-small {transform: scale(1.2);}
  1781. .chat:not(.private) .content .message-group:not(.compact) h2 .timestamp{display:block;}
  1782. }
  1783.  
  1784. @media screen and (max-width: 850px) {
  1785. .chat .content .flex-spacer.flex-vertical:only-child .message-group .comment .markup,
  1786. .chat .content .flex-spacer.flex-vertical:not(:only-child) .message-group .comment .markup{max-width: 80%;}
  1787. .channels-wrap{position:absolute;z-index:5;left:-275px;transition: left ease .5s;height:100%;background:rgba(0, 0, 0, 0.6);border-right:solid transparent 50px;width: 178px;}
  1788. .scroller-wrap.fade.dark {width: 218px !important;}
  1789. .guild-header {width: 228px;}
  1790. .guilds-wrapper:hover ~ .channels-wrap {left: 80px;width: 178px;}
  1791. .channels-wrap:hover {left: 6px;width: 178px;}
  1792. .guild-channels .channel a {opacity: 0.7}
  1793. #voice-connection .btn-group, #rtc-connection .btn-group {margin-right: -56px;}
  1794. }
  1795.  
  1796. @media screen and (max-width: 725px) {
  1797. .chat.private .content .message-group:not(.compact) h2 .timestamp{display:none;}
  1798. }
  1799.  
  1800. @media screen and (max-width: 430px) {
  1801. .chat .content .flex-spacer.flex-vertical:not(:only-child) ~ .channel-members-wrap { cursor: not-allowed; position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 5px; top: 0; right: 0; bottom: 0; left: inherit; z-index: 1000; }
  1802. .chat .content .flex-spacer.flex-vertical:not(:only-child) ~ .channel-members-wrap:before { content: "Media screen size too small"; color: #fff; margin: auto; font-size: 2rem; text-align: center; }
  1803. .chat .content .flex-spacer.flex-vertical:not(:only-child) ~ .channel-members-wrap .scroller-wrap { display: none; }
  1804. .chat:not(.private) .content .message-group:not(.compact) h2 .timestamp { display: block; }
  1805. }
  1806.  
  1807. @media screen and (max-width: 400px) {
  1808. .message-group .btn-option{display:none;}
  1809. }
  1810.  
  1811. @media screen and (max-width: 340px) {
  1812. .message-group h2{max-width: 60%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
  1813. .emoji-picker{width:90%;}
  1814. }
  1815.  
  1816. .popout.popout-top-right.no-arrow,
  1817. .popout.popout-top.no-arrow{margin-left:30px;}}
  1818. .change-log-button-container:hover {font-weight: 500;border-bottom: 2px solid var(--main-color);background: rgba(0, 0, 0, 0.48);opacity: 0.85;}
  1819. .change-log-button-container {position: inherit;padding-top: 1px;margin-top: 0px;transition: .2s ease-in-out all;font-weight: 500;}
  1820. .change-log-button-container .change-log-button:hover {color: #fff;}
  1821. .change-log-button-container .change-log-button {color: hsla(0,0%,100%,.3);font-size: 14px;opacity: 1;}
  1822. .theme-dark .channel-members-loading .heading {background: transparent !important;}
  1823. .theme-dark .channel-members-loading .member {background: transparent !important;}
  1824. .theme-dark .channel-members-loading .member:nth-child(3n+2), .theme-dark .channel-members-loading .member:nth-child(7n+4) {background: transparent !important;}
  1825. .theme-dark .channel-members-loading .member:nth-child(2n-4), .theme-dark .channel-members-loading .member:nth-child(7n-1) {background: transparent !important;}
  1826. .theme-dark .channel-members-loading {background-color: transparent !important;}
  1827. .theme-dark .channel-members-loading .background {background-image: -webkit-linear-gradient(0deg,transparent,rgba(0, 0, 0, 0.4),transparent);background-image: linear-gradient(90deg,transparent,rgba(0, 0, 0, 0.4),transparent);}
  1828.  
  1829. .settings-connections-wrapper .authed-app { background: rgba(0,0,0,0.5); border: 2px solid rgba(0,0,0,0.5);}
  1830.  
  1831. .settings-connections-wrapper .authed-app:hover { border: 2px solid var(--main-color);}
  1832.  
  1833. .settings-connections-wrapper .authed-app .header .app-name {color: #d2d2d2;}
  1834.  
  1835. .settings-connections-wrapper .authed-app .details .header {color: #b7b7b7;}
  1836.  
  1837. .settings-connections-wrapper .authed-app .details .body {color: #afafaf;}
  1838.  
  1839. .settings-connections-wrapper .authed-app .details .permissions .body {color: #afafaf;}
  1840.  
  1841. .settings-connections-wrapper .authed-app .details .permission-checkmark {-webkit-filter: invert(100%) hue-rotate(110deg);}
  1842.  
  1843. .settings-connections-wrapper .user-settings-modal-connections .user-settings-modal-connections-list {box-shadow: 0 -1px transparent;}
  1844.  
  1845. .settings-connections-wrapper .user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations {border: 2px solid var(--main-color);}
  1846.  
  1847. .settings-connections-wrapper .user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations.no-integrations {color: var(--main-color);opacity: 0.7;}
  1848.  
  1849. .alert.form .form-inner h4 {color: #dcdcdc;}
  1850.  
  1851. .alert.form .form-inner p {color: #bbbbbb;}
  1852.  
  1853. .invite-modal .scroller { background: var(--main-color) url(/assets/29d5ff462afb11bce1979cf694aee3d1.png) repeat; }
  1854.  
  1855. .invite-modal .invite-body { color: #fff; background: var(--hover-color); border-radius: 3px }
  1856.  
  1857. .invite-modal .invite-title { color: #fff; background: var(--hover-color); border-radius: 3px; }
  1858.  
  1859. .invite-modal .invite-cancel { color: #fff; background: #A93D3D; border-radius: 3px; padding: 3px; }
  1860.  
  1861. .theme-dark .invite-button { background-color: rgba(0, 0, 0, 0.68); border-color: #000000; }
  1862.  
  1863. body,.channel-members .member .member-username { -webkit-font-smoothing: antialiased !important; -webkit-backface-visibility: hidden !important; }
  1864.  
  1865. /* Friend list by Uri*/
  1866.  
  1867. #friends .friends-header{position: relative;}
  1868.  
  1869. #friends .friends-header .tab-bar{
  1870. width: 100%;
  1871. position: absolute;
  1872. top: 15px;
  1873. display: flex;
  1874. justify-content: center;
  1875. z-index: 2;
  1876. }
  1877.  
  1878. #friends .friends-header .header-toolbar{
  1879. position: absolute;
  1880. right: 20px;
  1881. }
  1882.  
  1883. #friends .friends-table .friends-table-body{
  1884. padding: 0;
  1885. margin: 40px 0 0;
  1886. }
  1887.  
  1888. #friends .friends-header .tab-bar .tab-bar-separator,
  1889. #friends .friends-table .friends-table-header .friends-column-separator{display: none;}
  1890.  
  1891. #friends .friends-header .tab-bar .tab-bar-item,
  1892. #friends .friends-table .friends-table-header .friends-column,
  1893. #friends .friends-table .friends-row .friends-column-name,
  1894. #friends .friends-table .friends-row .friends-column-status{color: rgba(255, 255, 255, 0.6)!important;}
  1895.  
  1896. #friends .friends-header .btn,
  1897. #friends .friends-header .tab-bar .tab-bar-item.selected{background-color: var(--main-color) !important;color: #fff !important;}
  1898.  
  1899. #friends .friends-header .tab-bar .tab-bar-item:hover:not(.selected){background-color: var(--hover-color) !important;}
  1900.  
  1901. #friends .friends-header .tab-bar .tab-bar-item{
  1902. padding: 5px 8px;
  1903. margin: 0 5px;
  1904. transition: color 500ms, background 500ms;
  1905. }
  1906.  
  1907. #friends .friends-header .tab-bar .tab-bar-item .badge{
  1908. background: rgba(0, 0, 0, 0.2)!important;
  1909. color: #fff!important;
  1910. opacity: 0.7;
  1911. transition: opacity 500ms;
  1912. }
  1913.  
  1914. #friends .friends-header .tab-bar .tab-bar-item:hover .badge{opacity: 1;}
  1915.  
  1916. #friends .friends-header .tab-bar .tab-bar-item.tab-bar-item-primary{background-color: var(--main-color) !important;color: #fff !important;}
  1917. #friends .friends-header .tab-bar .tab-bar-item.tab-bar-item-primary:not(.selected):hover{background-color: var(--hover-color);}
  1918.  
  1919. #friends .friends-table{padding-top: 11px;}
  1920.  
  1921. #friends .friends-table .friend-table-add-wrapper {margin-top: 20px;}
  1922. #friends .friends-table .friend-table-add-wrapper .friend-table-add-header{
  1923. background: rgba(0, 0, 0, 0.2);
  1924. box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
  1925. margin: 20px 30px;
  1926. border-radius: 5px;
  1927. }
  1928.  
  1929. #friends .friends-table .friend-table-add-wrapper h2{color: rgba(225, 225, 225, 0.9);}
  1930.  
  1931. #friends .friends-table .friend-table-add-wrapper .friend-table-suggestions-header{
  1932. margin: 30px 30px 16px;
  1933. padding: 0;
  1934. border-bottom: 1px solid rgba(206, 196, 196, 0.6);
  1935. }
  1936.  
  1937. #friends .friends-table .friend-table-add-wrapper .friend-table-suggestions-header h2{color: rgba(225, 225, 225, 0.9);}
  1938.  
  1939. #friends .friends-table .friends-table-header{display: none;}
  1940. #friends .friends-table .friends-table-body > span{
  1941. display: flex;
  1942. flex-flow: row wrap;
  1943. justify-content: center;
  1944. }
  1945.  
  1946. #friends .friends-table .friends-row{
  1947. background: rgba(0, 0, 0, 0.2)!important;
  1948. box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  1949. border-radius: 5px;
  1950. margin: 15px;
  1951. padding: 0;
  1952. height: 120px!important;
  1953. flex-direction: column;
  1954. flex-basis: 300px;
  1955. position: relative;
  1956. transition: opacity 300ms;
  1957. }
  1958.  
  1959. #friends .friends-table .friends-row:hover{
  1960. box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  1961. border-radius: 5px;
  1962. margin: 15px;
  1963. padding: 0;
  1964. opacity: 1!important;
  1965. }
  1966.  
  1967. #friends .friends-table .friends-row .avatar-small{
  1968. border-radius: 5px;
  1969. box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  1970. }
  1971.  
  1972. #friends .friends-table .friends-row + .friends-row{border-top: none!important;}
  1973.  
  1974. #friends .friends-table .friends-row .friends-column{
  1975. position: absolute;
  1976. backface-visibility: hidden;
  1977. }
  1978.  
  1979. #friends .friends-table .friends-row .friends-column + .friends-column{margin: 0;}
  1980.  
  1981. #friends .friends-table .friends-row .friends-column-name .avatar-small{
  1982. top: 25px;
  1983. left: 15px;
  1984. width: 85px;
  1985. height: 85px;
  1986. background-size: 85px 85px;
  1987. opacity: 0.6;
  1988. transition: opacity 500ms;
  1989. }
  1990.  
  1991. #friends .friends-table .friends-row:hover .friends-column-name .avatar-small{opacity: 0.9;}
  1992.  
  1993. #friends .friends-table .friends-row .friends-column-name .discord-tag{
  1994. display:block;
  1995. position: absolute;
  1996. top: 25px;
  1997. left: 115px;
  1998. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  1999. }
  2000.  
  2001. #friends .friends-table .friends-row .friends-column-name .discord-tag .username{
  2002. clear: left;
  2003. float: left;
  2004. width: 100px;
  2005. text-overflow: ellipsis;
  2006. white-space: nowrap;
  2007. overflow: hidden;
  2008. }
  2009.  
  2010. #friends .friends-table .friends-row .friends-column-name .discord-tag .discriminator{visibility: visible;}
  2011.  
  2012. #friends .friends-table .friends-row .friends-column-name .username{transition: color 300ms;}
  2013. #friends .friends-table .friends-row:hover .username{color: rgba(225, 225, 225, 1);}
  2014.  
  2015. #friends .friends-table .friends-row .friends-column-status{
  2016. top: 0;
  2017. width: 100%;
  2018. justify-content: center;
  2019. height: 18px;
  2020. }
  2021.  
  2022. #friends .friends-table .friends-row .friends-column-status .status{
  2023. width: 100%;
  2024. height: 20px;
  2025. border-radius: 5px 5px 0 0;
  2026. position: absolute;
  2027. top: 0;
  2028. opacity: 0.5;
  2029. z-index: 1;
  2030. }
  2031.  
  2032. #friends .friends-table .friends-row .friends-column-status .status-text{
  2033. max-width: 90%;
  2034. font-size: 12px;
  2035. line-height: normal;
  2036. transition: color 300ms;
  2037. z-index: 2;
  2038. }
  2039.  
  2040. #friends .friends-table .friends-row:hover .friends-column-status .status-text{color: rgba(225, 225, 225, 1);}
  2041.  
  2042. #friends .friends-table .friends-table-body .friends-row .friends-column-guilds{ /* .friends-table-body is important here */
  2043. top: 80px;
  2044. left: 115px;
  2045. width: 150px;
  2046. display: flex!important;
  2047. }
  2048.  
  2049. #friends .friends-table .friends-table-body .friends-row .friends-column-guilds .avatar-small{
  2050. opacity: 0.7;
  2051. transition: opacity 500ms;
  2052. }
  2053.  
  2054. #friends .friends-table .friends-table-body .friends-row:hover .friends-column-guilds .avatar-small{opacity: 1;}
  2055.  
  2056. #friends .friends-table .friends-row .friends-column-guilds a:nth-child(4),
  2057. #friends .friends-table .friends-row .friends-column-guilds a:nth-child(4) .avatar-small,
  2058. #friends .friends-table .friends-row .friends-column-guilds a:nth-child(5),
  2059. #friends .friends-table .friends-row .friends-column-guilds a:nth-child(5) .avatar-small,
  2060. #friends .friends-table .friends-row .friends-column-guilds a:nth-child(n + 6){display: none;}
  2061.  
  2062. #friends .friends-table .friends-row .friends-column-guilds .avatar-small{background-color: rgba(0, 0, 0, 0.4);}
  2063.  
  2064. #friends .friends-table .friends-row .friends-column-guilds .more-mutual-guilds-btn:before{
  2065. content: "";
  2066. background-color: rgba(0, 0, 0, 0.4);
  2067. background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDYxMiA2MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMiA2MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8Y2lyY2xlIGN4PSI2OS41NDUiIGN5PSIzMDYiIHI9IjY5LjU0NSIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxjaXJjbGUgY3g9IjMwNiIgY3k9IjMwNiIgcj0iNjkuNTQ1IiBmaWxsPSIjRkZGRkZGIi8+CgkJPGNpcmNsZSBjeD0iNTQyLjQ1NSIgY3k9IjMwNiIgcj0iNjkuNTQ1IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
  2068. background-size: 18px 18px;
  2069. background-position: center center;
  2070. background-repeat: no-repeat;
  2071. border-radius: 5px;
  2072. width: 30px;
  2073. height: 30px;
  2074. box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  2075. position: absolute;
  2076. top: 0;
  2077. }
  2078.  
  2079.  
  2080. #friends .friends-table .friends-row .friends-column-guilds .more-mutual-guilds-btn,
  2081. #friends .friends-table .friends-row .friends-column-guilds .more-mutual-guilds-btn:hover{
  2082. border: 0;
  2083. color: transparent !important;
  2084. }
  2085.  
  2086. #friends .friends-table .friends-row .friends-column-actions{
  2087. top: 25px;
  2088. right: -5px;
  2089. opacity: 0;
  2090. transition: opacity 500ms;
  2091. visibility: visible;
  2092. }
  2093.  
  2094. #friends .friends-table .friends-row:hover .friends-column-actions{opacity: 1;}
  2095.  
  2096. #friends .friends-table .friends-row .friends-column-actions .friends-action{
  2097. width: 28px;
  2098. height: 28px;
  2099. transform: translateX(120px);
  2100. transition: transform 500ms, background 500ms;
  2101. }
  2102.  
  2103. #friends .friends-table .friends-row:hover .friends-column-actions .friends-action{transform: translateX(0px);}
  2104.  
  2105. #friends .friends-table .friends-row .friends-column-actions .friends-action:first-child{background-color: rgba(73, 152, 76, 0.7);}
  2106. #friends .friends-table .friends-row .friends-column-actions .friends-action:nth-child(2){
  2107. background-color: rgba(199, 0, 67, 0.7);
  2108. transition-delay: 200ms;
  2109. }
  2110.  
  2111. #friends .friends-table .friends-row .friends-suggestion-inner{padding: 20px;}
  2112.  
  2113. #friends .friends-table .friends-row .friends-suggestion-inner .avatar-large{
  2114. border-radius: 5px;
  2115. opacity: 0.6;
  2116. transition: opacity 500ms;
  2117. }
  2118.  
  2119. #friends .friends-table .friends-row:hover .friends-suggestion-inner .avatar-large{opacity: 0.8;}
  2120.  
  2121. #friends .friends-table .friends-row .friends-suggestion-inner .friends-suggestion-info .discord-tag .username{
  2122. color: rgba(225, 225, 225, 0.6);
  2123. width: 100px;
  2124. white-space: nowrap;
  2125. overflow: hidden;
  2126. text-overflow: ellipsis;
  2127. transition: color 500ms;
  2128. }
  2129.  
  2130. #friends .friends-table .friends-row:hover .friends-suggestion-inner .friends-suggestion-info .discord-tag .username{color: rgba(225, 225, 225, 0.9);}
  2131.  
  2132. #friends .friends-table .friends-row .friends-suggestion-inner .friends-suggestion-info .discord-tag .discriminator{
  2133. color: rgba(225, 225, 225, 0.7);
  2134. visibility: visible;
  2135. }
  2136.  
  2137. #friends .friends-table .friends-row .friends-suggestion-inner ~ .friends-column-actions{
  2138. display: flex;
  2139. flex-direction: column;
  2140. padding: 5px 25px 0 0;
  2141. }
  2142.  
  2143. #friends .friends-table .friends-row .friends-suggestion-inner ~ .friends-column-actions .friends-action:nth-child(2){margin: 5px 0 0 0;}
  2144.  
  2145.  
  2146. @media (max-width: 1300px) {
  2147. #friends .friends-table .friends-table-header .friends-column-guilds,
  2148. #friends .friends-table .friends-table-header .friends-column-guilds + .friends-column-separator,
  2149. #friends .friends-table .friends-row .friends-column-guilds{display: block!important;}
  2150. }
  2151.  
  2152. #friends .friends-empty p{color: rgba(225, 225, 225, 0.8);}
  2153.  
  2154. .theme-dark #friends .friends-table .friends-row .friends-column-actions .friends-action:hover {
  2155. background-color: rgb(73, 152, 76);
  2156. }
  2157.  
  2158. #friends .friends-table .friends-row .friends-column-status .status.status-unknown{border: none;}
  2159.  
  2160. #friends .friends-table .friends-row .friends-column-actions .friends-action.friends-action-remove:hover {
  2161. background-color: rgb(199, 0, 67) !important;
  2162. }
  2163.  
  2164. .option-popout .btn-item { color: #909090; }
  2165.  
  2166. .popout.popout-invert.popout-top header:before, .popout.popout-invert.popout-top-right header:before { border-top-color: #057f95; }
  2167.  
  2168. #ebr-themes-pane .ebr-top .themes-header,
  2169. #ebr-plugins-pane .ebr-top .plugins-header { font-weight: 700;text-transform: uppercase;color: #fff;cursor: default;overflow: hidden; }
  2170.  
  2171. #theme-search,
  2172. #plugin-search { background-color: rgba(0, 0, 0, .3);border-color: transparent !important;border-radius: 3px; }
  2173.  
  2174. #theme-search:focus,
  2175. #plugin-search:focus { outline-color: #057F95; }
  2176.  
  2177. .ebr-plugin-item,
  2178. .ebr-theme-item { background-color: rgba(0, 0, 0, .3) !important; border-color: transparent !important; }
  2179.  
  2180. .install-button,
  2181. .view-source-button,
  2182. .update-button { background-color: #057F95 !important; }
  2183.  
  2184. .install-button:hover,
  2185. .view-source-button:hover,
  2186. .update-button:hover { background-color: #045B6B !important; }
  2187.  
  2188. .ebr-themes p,
  2189. .ebr-plugins p { font-size: 13.5px; }
  2190.  
  2191. .ebr-themes .name,
  2192. .ebr-plugins .name { color: #057F95;font-weight: 700; }
  2193.  
  2194. .ebr-themes .author,
  2195. .ebr-plugins .author { font-weight: 700; }
  2196.  
  2197. #ebr-themes-pane .ebr-top .themes-header, #ebr-plugins-pane .ebr-top .plugins-header, .ebr-themes p.author, .ebr-plugins p.author, .ebr-themes p.description, .ebr-plugins p.description { color:#fff; }
  2198.  
  2199. .search-bar.search-bar-light .search-bar-inner { background-color: transparent;border: 1px solid transparent; }
  2200.  
  2201. .search-bar-light .search-bar-clear { background: #057f95; }
  2202.  
  2203. .search-bar-clear:before { background: #000; }
  2204.  
  2205. .search-bar-light .search-bar-clear:after { background: #057f95; }
  2206.  
  2207. .search-bar-light .search-bar-clear:before { background: #000; }
  2208.  
  2209. .guild-settings-modal-members h6 { color: #c1c1c1; }
  2210.  
  2211. .emoji-picker .search-bar .search-bar-inner { background-color: transparent; }
  2212.  
  2213. .detected-platform-accounts-modal { background-color: rgba(0, 0, 0, 0.61);padding: 10px;border-radius: 3px; }
  2214.  
  2215. .detected-platform-accounts-modal .btn-group .btn-primary { background-color: var(--main-color); }
  2216.  
  2217. .detected-platform-accounts-modal .btn-group .btn-primary:hover:not(:disabled) { background-color: var(--hover-color); }
  2218.  
  2219. .detected-platform-accounts-modal .btn-group .btn-default:hover { border-bottom: 2px solid var(--main-color); }
  2220.  
  2221. .detected-platform-accounts-modal .privacy { color:#fff; }
  2222.  
  2223. .theme-dark .friends-table .messages .divider span, .theme-dark .friends-table .messages .divider:before, .theme-dark .messages-wrapper .messages .divider span, .theme-dark .messages-wrapper .messages .divider:before { background-color: transparent; }
  2224.  
  2225. .chat .divider { height: 28px; background-color: transparent; }
  2226.  
  2227. .theme-dark #friends .friends-header .tab-bar .tab-bar-item.tab-bar-item-primary { background-color: var(--main-color); color: #fff; }
  2228.  
  2229. .theme-dark #friends .friends-header .tab-bar .tab-bar-item.tab-bar-item-primary:hover:not(.selected) { background-color: var(--hover-color); }
  2230.  
  2231. .theme-dark #friends .friends-header .tab-bar .tab-bar-item.tab-bar-item-primary.selected { background-color: var(--main-color); color: #fff; }
  2232.  
  2233. .theme-dark #friends .friends-table .friend-table-add-wrapper .friend-table-add-header { border-bottom: 1px solid rgba(0,0,0,.2); background: rgba(0, 0, 0, 0.44) !important; margin-top: -10px; }
  2234.  
  2235. .connect-account-btn .connect-account-btn-inner {background-color: rgba(0, 0, 0, 0.39);}
  2236.  
  2237. .settings-connections-wrapper .user-settings-modal-connections .user-settings-modal-accounts-list h3 {color: #d8d8d8;}
  2238.  
  2239. .settings-connections-wrapper .user-settings-modal-connections .user-settings-modal-accounts-list .user-settings-modal-accounts-list-description .user-settings-modal-accounts-list-description-inner {color: #cccccc;}
  2240.  
  2241. #user-profile-modal .tab-bar-container {background-color: #057f95;border-bottom: 1px solid rgba(0,0,0,0.9);}
  2242.  
  2243. #user-profile-modal .guilds .section+.section {border-top: 1px solid transparent;}
  2244.  
  2245. #user-profile-modal .guilds .section .section-header {color: #c7c7c7;}
  2246.  
  2247. #user-profile-modal .guilds .guild .status {border: 2px solid var(--main-color);}
  2248.  
  2249. #user-profile-modal .guilds .guild:hover .status {border: 2px solid var(--hover-color);}
  2250.  
  2251. #user-profile-modal .avatar-profile .status {border: 4px solid var(--hover-color);}
  2252.  
  2253. .quick-message {border: 2px solid var(--main-color);background: rgba(0, 0, 0, 0.6); color: #fff !important;}
  2254.  
  2255. /*Modal Menu re arrangement by Uri modified by me*/
  2256.  
  2257. #user-profile-modal{opacity: 0.8;position: relative;}
  2258.  
  2259. #user-profile-modal .avatar-wrapper .avatar-profile,
  2260. #user-profile-modal .sub-header,
  2261. #user-profile-modal .scroller-wrap,
  2262. #user-profile-modal .empty{background-color: rgba(0,0,0,0.83) !important;}
  2263.  
  2264. #user-profile-modal .header{background: 0;}
  2265. #user-profile-modal .header:before{content: "";width: 100%;height: 100px;background-size: cover;background-position: center center;background-repeat: no-repeat;position: absolute;top: 0;right: 0;left: 0;z-index: -1;}
  2266.  
  2267. #user-profile-modal .header{height: 130px;}
  2268.  
  2269. #user-profile-modal .header .discord-tag{margin-left: -15px;}
  2270. #user-profile-modal .header .activity{
  2271. margin-left: -50px;
  2272. margin-top: -4px;
  2273. padding-top: 13px !important;}
  2274.  
  2275. #user-profile-modal .header .discord-tag .username,
  2276. #user-profile-modal .header .activity{text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);}
  2277.  
  2278. #user-profile-modal .header .discord-tag .discriminator{display: inline;background: rgba(93, 93, 93, 0.3);font-weight: 600;color: #fff;margin-left: 8px;padding: 3px 5px;border-radius: 3px;-webkit-user-select: none;opacity: 0;transition: opacity 300ms;}
  2279.  
  2280. #user-profile-modal .header:hover .discord-tag .discriminator{opacity: 1;}
  2281.  
  2282.  
  2283. #user-profile-modal .avatar-wrapper .avatar-profile{border: 0;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);left: 20px;}
  2284.  
  2285. #user-profile-modal .avatar-wrapper .avatar-profile .status{box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);right: 0;bottom: 0;left:-3px;}
  2286.  
  2287. #user-profile-modal .tab-bar-container{background-color: rgba(0,0,0,0.83) !important;border: 0!important;position: absolute;top: 130px;right: 0;padding: 0;width: 80px;height: 100%;justify-content: center;transition: width 500ms;transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);z-index: 1;}
  2288.  
  2289. #user-profile-modal .tab-bar-container:before{content: "...";position: absolute;top: 0;left: 0;width: 10px;height: 100%;padding-top: 180px;background: transparent;writing-mode: vertical-lr;color: transparent;font-size: 18px;font-weight: 700;letter-spacing: 15px;line-height: 20px;cursor: pointer;transition: letter-spacing 300ms, padding 300ms;;}
  2290.  
  2291. #user-profile-modal .tab-bar-container:hover{width: 180px;}
  2292.  
  2293. #user-profile-modal .tab-bar-container .tab-bar{background: transparent;border: 0!important;flex-flow: column;position: absolute;top: 40px;left: 35px;}
  2294.  
  2295. #user-profile-modal .tab-bar-container .tab-bar-item{padding: 10px 25px;position: relative;font-size: 16px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
  2296.  
  2297. #user-profile-modal .tab-bar-container .tab-bar-item,
  2298. #user-profile-modal .tab-bar-container .tab-bar-item:hover,
  2299. #user-profile-modal .tab-bar-container .tab-bar-item.selected{color: transparent!important;}
  2300.  
  2301. #user-profile-modal .tab-bar-container:hover .tab-bar-item{color: #adadad!important;opacity: 1;transition: color 500ms;}
  2302.  
  2303. #user-profile-modal .tab-bar-container:hover .tab-bar-item:hover,
  2304. #user-profile-modal .tab-bar-container:hover .tab-bar-item.selected{color: #fff!important;
  2305. }
  2306.  
  2307. #user-profile-modal .tab-bar-container .tab-bar-item:before{content: "";position: absolute;top: 7px;left: 0;width: 18px;height: 18px;background-position: center center;background-repeat: no-repeat;background-size: 18px 18px;opacity: 0.5;transition: opacity 500ms;}
  2308.  
  2309. #user-profile-modal .tab-bar-container .tab-bar-item:hover:before,
  2310. #user-profile-modal .tab-bar-container .tab-bar-item.selected:before{opacity: 1;}
  2311.  
  2312. #user-profile-modal .tab-bar-container .tab-bar-item:nth-child(1):before{
  2313. background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQwOS4xNjUgNDA5LjE2NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDA5LjE2NSA0MDkuMTY0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTIwNC41ODMsMjE2LjY3MWM1MC42NjQsMCw5MS43NC00OC4wNzUsOTEuNzQtMTA3LjM3OGMwLTgyLjIzNy00MS4wNzQtMTA3LjM3Ny05MS43NC0xMDcuMzc3ICAgIGMtNTAuNjY4LDAtOTEuNzQsMjUuMTQtOTEuNzQsMTA3LjM3N0MxMTIuODQ0LDE2OC41OTYsMTUzLjkxNiwyMTYuNjcxLDIwNC41ODMsMjE2LjY3MXoiIGZpbGw9IiNGRkZGRkYiLz4KCQk8cGF0aCBkPSJNNDA3LjE2NCwzNzQuNzE3TDM2MC44OCwyNzAuNDU0Yy0yLjExNy00Ljc3MS01LjgzNi04LjcyOC0xMC40NjUtMTEuMTM4bC03MS44My0zNy4zOTIgICAgYy0xLjU4NC0wLjgyMy0zLjUwMi0wLjY2My00LjkyNiwwLjQxNWMtMjAuMzE2LDE1LjM2Ni00NC4yMDMsMjMuNDg4LTY5LjA3NiwyMy40ODhjLTI0Ljg3NywwLTQ4Ljc2Mi04LjEyMi02OS4wNzgtMjMuNDg4ICAgIGMtMS40MjgtMS4wNzgtMy4zNDYtMS4yMzgtNC45My0wLjQxNUw1OC43NSwyNTkuMzE2Yy00LjYzMSwyLjQxLTguMzQ2LDYuMzY1LTEwLjQ2NSwxMS4xMzhMMi4wMDEsMzc0LjcxNyAgICBjLTMuMTkxLDcuMTg4LTIuNTM3LDE1LjQxMiwxLjc1LDIyLjAwNWM0LjI4NSw2LjU5MiwxMS41MzcsMTAuNTI2LDE5LjQsMTAuNTI2aDM2Mi44NjFjNy44NjMsMCwxNS4xMTctMy45MzYsMTkuNDAyLTEwLjUyNyAgICBDNDA5LjY5OSwzOTAuMTI5LDQxMC4zNTUsMzgxLjkwMiw0MDcuMTY0LDM3NC43MTd6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
  2314. }
  2315.  
  2316. #user-profile-modal .tab-bar-container .tab-bar-item:nth-child(2):before{
  2317. background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDk3Ljk2OCA5Ny45NjgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDk3Ljk2OCA5Ny45Njg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNDkuNTQxLDM4LjY1NWMxLjYxNywwLDMuMTU4LDAuMzM4LDQuNTU5LDAuOTQ2YzAuMTA1LTIuMjg2LDAuODkzLTQuNCwyLjE1Ny02LjE1Yy0wLjg5LTAuMTg2LTEuODA4LTAuMjg1LTIuNzQ4LTAuMjg1ICAgIGgtOC45MDZjLTAuOTM4LDAtMS44NTYsMC4wOTgtMi43MzksMC4yODJjMS4zNDcsMS44NjksMi4xNTIsNC4xNSwyLjE2NSw2LjYyQzQ1LjY2NiwzOS4xNjgsNDcuNTQ0LDM4LjY1NSw0OS41NDEsMzguNjU1eiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxjaXJjbGUgY3g9IjQ5LjA1NCIgY3k9IjIxLjk1NCIgcj0iMTAuNDk2IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTY1LjUzOSw1MC4zNmM1LjM0MiwwLDkuNjctNC4zMyw5LjY3LTkuNjdjMC01LjM0Mi00LjMyOC05LjY3LTkuNjctOS42N2MtNS4yOTIsMC05LjU4Myw0LjI1MS05LjY2Myw5LjUyNCAgICBjMy4wNDksMS45MTIsNS4xODcsNS4xNDYsNS41NzcsOC45QzYyLjY5NSw1MC4wMjYsNjQuMDc2LDUwLjM2LDY1LjUzOSw1MC4zNnoiIGZpbGw9IiNGRkZGRkYiLz4KCQk8cGF0aCBkPSJNMzIuNTcxLDMxLjAxOWMtNS4zNDMsMC05LjY3MSw0LjMyOS05LjY3MSw5LjY3czQuMzI4LDkuNjY5LDkuNjcxLDkuNjY5YzEuODkyLDAsMy42NTEtMC41NTMsNS4xNDMtMS40OTIgICAgYzAuNDc1LTMuMDkxLDIuMTMyLTUuNzk0LDQuNDk5LTcuNjM0YzAuMDEtMC4xODEsMC4wMjctMC4zNiwwLjAyNy0wLjU0M0M0Mi4yNCwzNS4zNDgsMzcuOTEsMzEuMDE5LDMyLjU3MSwzMS4wMTl6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTcxLjgyLDMwLjgxM2MzLjA0OSwxLjkxMiw1LjE4Nyw1LjE0Niw1LjU3Niw4LjkwMWMxLjI0MSwwLjU4MSwyLjYyMywwLjkxNiw0LjA4NiwwLjkxNmM1LjM0MiwwLDkuNjctNC4zMjksOS42Ny05LjY3ICAgIGMwLTUuMzQxLTQuMzI4LTkuNjctOS42Ny05LjY3Qzc2LjE5MSwyMS4yODksNzEuOSwyNS41NDEsNzEuODIsMzAuODEzeiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxjaXJjbGUgY3g9IjQ5LjU0MSIgY3k9IjUwLjY3MyIgcj0iOS42NzEiIGZpbGw9IiNGRkZGRkYiLz4KCQk8cGF0aCBkPSJNNjkuNjQzLDUxLjAxOWgtOC4xNDRjLTAuMDg5LDMuMjU4LTEuNDc5LDYuMTkyLTMuNjc5LDguMzAxYzYuMDY4LDEuODA2LDEwLjUwOSw3LjQzNCwxMC41MDksMTQuMDgydjMuMDkyICAgIGM4LjA0LTAuMjk3LDEyLjY3NC0yLjU3MywxMi45NzktMi43MjlsMC42NDYtMC4zMjhoMC4wNjdWNjMuNDAxQzgyLjAyMyw1Ni41NzMsNzYuNDY5LDUxLjAxOSw2OS42NDMsNTEuMDE5eiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxwYXRoIGQ9Ik04NS41ODUsNDEuMjg5aC04LjE0MmMtMC4wODgsMy4yNTgtMS40NzksNi4xOTItMy42NzgsOC4zMDFjNi4wNjgsMS44MDYsMTAuNTA4LDcuNDMzLDEwLjUwOCwxNC4wODF2My4wOTIgICAgYzguMDM5LTAuMjk2LDEyLjY3NC0yLjU3MiwxMi45NzktMi43MjlsMC42NDYtMC4zMjdoMC4wNjlWNTMuNjcxQzk3Ljk2Nyw0Ni44NDQsOTIuNDEzLDQxLjI4OSw4NS41ODUsNDEuMjg5eiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxwYXRoIGQ9Ik00MS4yNTYsNTkuMzE5Yy0yLjE4OS0yLjA5OS0zLjU3NS01LjAxNy0zLjY3Ny04LjI1NGMtMC4zMDEtMC4wMjItMC42LTAuMDQ3LTAuOTA4LTAuMDQ3aC04LjIwMyAgICBjLTYuODI4LDAtMTIuMzgzLDUuNTU1LTEyLjM4MywxMi4zODN2MTAuMDM3bDAuMDI1LDAuMTU1bDAuNjkxLDAuMjE4YzUuMjI3LDEuNjMzLDkuODkzLDIuMzgzLDEzLjk0NCwyLjYyMXYtMy4wMzEgICAgQzMwLjc0Nyw2Ni43NTQsMzUuMTg2LDYxLjEyNiw0MS4yNTYsNTkuMzE5eiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxwYXRoIGQ9Ik01My42NDMsNjEuMDAzaC04LjIwNmMtNi44MjgsMC0xMi4zODMsNS41NTctMTIuMzgzLDEyLjM4MnYxMC4wMzdsMC4wMjYsMC4xNTdsMC42OSwwLjIxNiAgICBjNi41MTYsMi4wMzUsMTIuMTc3LDIuNzE1LDE2LjgzNSwyLjcxNWM5LjEwMSwwLDE0LjM3NS0yLjU5NSwxNC43MDEtMi43NmwwLjY0Ni0wLjMyOGgwLjA2OFY3My4zODUgICAgQzY2LjAyMyw2Ni41NTgsNjAuNDY5LDYxLjAwMyw1My42NDMsNjEuMDAzeiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxwYXRoIGQ9Ik0xNi40ODYsNDAuOTM4YzEuNDYzLDAsMi44NDQtMC4zMzUsNC4wODYtMC45MTZjMC4zOS0zLjc1NSwyLjUyNy02Ljk5LDUuNTc2LTguOTAyYy0wLjA4LTUuMjcxLTQuMzcxLTkuNTIzLTkuNjYyLTkuNTIzICAgIGMtNS4zNDMsMC05LjY3MSw0LjMyOS05LjY3MSw5LjY3MUM2LjgxNSwzNi42MDksMTEuMTQzLDQwLjkzOCwxNi40ODYsNDAuOTM4eiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxwYXRoIGQ9Ik0yNC4yMDIsNDkuODk5Yy0yLjE5OC0yLjEwOS0zLjU4OS01LjA0NC0zLjY3Ny04LjMwM2gtOC4xNDNDNS41NTQsNDEuNTk3LDAsNDcuMTUyLDAsNTMuOTc5djEwLjAzN2gwLjA2OWwwLjY0NiwwLjMyNyAgICBjMC4zMDYsMC4xNTQsNC45MzksMi40MzMsMTIuOTc5LDIuNzI4di0zLjA5MkMxMy42OTQsNTcuMzMyLDE4LjEzMyw1MS43MDQsMjQuMjAyLDQ5Ljg5OXoiIGZpbGw9IiNGRkZGRkYiLz4KCQk8cGF0aCBkPSJNMjcuNzk2LDMwLjA2M2MxLjE2LTAuNDcsMi45My0xLjA0Nyw0LjYyLTEuMDQ3YzEuOTY3LDAsMy44OTEsMC41MDYsNS42MDcsMS40NjljMC4zODItMC4zNzUsMC43MzItMC43ODMsMS4wNS0xLjIyICAgIGMtMS42My0yLjE0MS0yLjUyLTQuNzY1LTIuNTItNy40NjRjMC0xLjgxOCwwLjQwNi0zLjYyMiwxLjE4LTUuMjYxYy0xLjc2Mi0xLjU5Mi00LjAxLTIuNDYxLTYuMzk5LTIuNDYxICAgIGMtNC4zNDgsMC04LjEzMywyLjk0My05LjI0MSw3LjA4OEMyNS4zNDEsMjMuMDU3LDI3LjQ1NywyNi4zNjEsMjcuNzk2LDMwLjA2M3oiIGZpbGw9IiNGRkZGRkYiLz4KCQk8cGF0aCBkPSJNNTkuMTE3LDI4LjcxOGMwLjMzNiwwLjUzNCwwLjcyOSwxLjAzNywxLjE3NSwxLjUwNWMxLjU4OC0wLjc5MiwzLjMzNC0xLjIwOCw1LjA5Mi0xLjIwOCAgICBjMS43MjksMCwzLjM4NiwwLjQ0Miw0LjQ3MiwwLjgxMmMwLjM0LTQuMDEzLDIuNzY3LTcuNTU1LDYuNC05LjM1Yy0xLjMzMi0zLjgwNS00LjkzOC02LjQwMi05LjAyMS02LjQwMiAgICBjLTIuNjQsMC01LjE0LDEuMDg0LTYuOTQ1LDIuOTkyYzAuNjM0LDEuNTEyLDAuOTU1LDMuMTAxLDAuOTU1LDQuNzNDNjEuMjQ0LDI0LjI5Miw2MC41MSwyNi42Nyw1OS4xMTcsMjguNzE4eiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
  2318. }
  2319.  
  2320. #user-profile-modal .tab-bar-container .tab-bar-item:nth-child(3):before{
  2321. background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQ2Ni40OCA0NjYuNDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ2Ni40OCA0NjYuNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iaWNvbnNfMjRfIj4KCQk8Zz4KCQkJPGc+CgkJCQk8cGF0aCBkPSJNMTEzLjc3NCwxMTcuNWwwLjAwMSwwLjAwNmMwLjAyLTAuMDA0LDAuMDM5LTAuMDEsMC4wNi0wLjAxNGMwLjAxOS0wLjAwMiwwLjA0LTAuMDAzLDAuMDU5LTAuMDA2bC0wLjAwMS0wLjAwNSAgICAgIGMyMC44MjUtMy44LDM0Ljg0NS0yMy41OTEsMzEuNDA0LTQ0LjU2M2MtMy40NDItMjAuOTctMjMuMDQ5LTM1LjI0My00My45OTYtMzIuMTg4di0wLjAwNWMtMC4wMiwwLjAwMy0wLjAzOSwwLjAwOC0wLjA1OSwwLjAxMiAgICAgIGMtMC4wMTksMC4wMDMtMC4wMzksMC4wMDQtMC4wNiwwLjAwOGwwLjAwMSwwLjAwNGMtMjAuODIyLDMuOC0zNC44NDMsMjMuNTg5LTMxLjQwMyw0NC41NTkgICAgICBDNzMuMjIxLDEwNi4yNzksOTIuODMxLDEyMC41NTMsMTEzLjc3NCwxMTcuNXoiIGZpbGw9IiNGRkZGRkYiLz4KCQkJCTxwYXRoIGQ9Ik0yNTYuNjUsMzQ3LjEwOGwtNzUuMTcxLTc2LjE4Yy01LjE2MS02LjE3OS0xOS4wODItOTMuNzc5LTE5LjY3OS05Ny40MTZjLTEuNTMtOS4zMjMsMS4xMTYtMTUuMjQsMS4xMTYtMTUuMjQgICAgICBzMzcuNzc5LTk3LjA2Myw0MS42MDYtMTA3Ljc0OWMzLjgyOS0xMC42ODcsMy42MS0xNy42NzYtMy43NzEtMjIuOTgxYy03LjM4OS01LjMwNy0xOS45OTQtNS40NjUtMjIuOTg0LDMuNzcxbC00MC40NzUsOTcuMTE5ICAgICAgYzAsMC0xMC4zMTctMy43Ni0yMS43MTItMi4wODhjLTAuMDk2LDAuMDE4LTAuMTg4LDAuMDM2LTAuMjg0LDAuMDU1Yy0wLjA5NSwwLjAxNC0wLjE4OCwwLjAyMy0wLjI4NiwwLjAzOSAgICAgIGMtMTEuMzI5LDIuMDU3LTE5LjkwNiw4LjkxNy0xOS45MDYsOC45MTdMMjUuNzE5LDU2LjI2MWMtOC4xODktOC0xNy42NzgtMy42MTktMjIuOTg1LDMuNzcxICAgICAgYy01LjI5OCw3LjM4NS0yLjI3NCwxNS43MTQsMy43NywyMi45ODFjNi4wNDQsNy4yNjgsNzMuODU2LDg4LjgwNyw3My44NTYsODguODA3czQuMzk1LDQuNzYyLDUuOTI0LDE0LjA4NCAgICAgIGMwLjEyMSwwLjc0LDAuMTU2LDAuOTUzLDE0LjY5NCw4OS41MzhsOS43NTMsMTQ5Ljg3NmMwLjYzNiw5Ljc3MSw4Ljc2LDE3LjI3MiwxOC40MTUsMTcuMjcyYzAuNDAzLDAsMC44MS0wLjAxMywxLjIxOC0wLjAzOSAgICAgIGMxMC4xOC0wLjY2MywxNy44OTYtOS40NTMsMTcuMjMzLTE5LjYzM2MwLDAtOC43OTItMTMwLjMyMy04Ljc5Mi0xMzUuMTE1YzAtMi45NDIsMi44NjUtNC42Miw2LjI0My0xLjE5NSAgICAgIGMzLjM3OCwzLjQyMyw4NS4zMDYsODYuNDQ5LDg1LjMwNiw4Ni40NDljNy4xNjUsNy4yNjEsMTguODYxLDcuMzQsMjYuMTIzLDAuMTc0ICAgICAgQzI2My43MzcsMzY2LjA2NCwyNjMuODE1LDM1NC4zNjksMjU2LjY1LDM0Ny4xMDh6IiBmaWxsPSIjRkZGRkZGIi8+CgkJCTwvZz4KCQkJPGc+CgkJCQk8cGF0aCBkPSJNMzQxLjQxNSwxNTMuNTY2bC0wLjAwMiwwLjAwNGMwLjAxNiwwLjAwNiwwLjAyOSwwLjAwOCwwLjA0NSwwLjAxM2MwLjAxNywwLjAwNSwwLjAyOCwwLjAxMiwwLjA0NCwwLjAxN2wwLjAwMi0wLjAwMyAgICAgIGMwLjEzMywwLjA0MywwLjI2NiwwLjA3NywwLjM5NiwwLjExN2MwLjEzLDAuMDQ5LDAuMjU2LDAuMTA0LDAuMzg3LDAuMTUxbC0wLjAwMiwwLjAwNGMwLjAxNywwLjAwNCwwLjAyOSwwLjAwOCwwLjA0NiwwLjAxMyAgICAgIGMwLjAxNCwwLjAwNCwwLjAyNywwLjAxMiwwLjA0MywwLjAxN2wwLjAwMS0wLjAwM2MxNS42NzQsNS4wNjEsMzIuNTcyLTMuMzQ0LDM3LjkzNi0xOC45ODkgICAgICBjNS4zNjItMTUuNjQzLTIuODI2LTMyLjY0Ni0xOC4zMDktMzguMjYzbDAuMDAxLTAuMDAzYy0wLjAxNy0wLjAwNi0wLjAzLTAuMDEtMC4wNDctMC4wMTQgICAgICBjLTAuMDE0LTAuMDA1LTAuMDI3LTAuMDExLTAuMDQzLTAuMDE3bC0wLjAwMSwwLjAwM2MtMC4xMzMtMC4wNDItMC4yNjUtMC4wNzctMC4zOTYtMC4xMTdjLTAuMTMtMC4wNDktMC4yNTUtMC4xMDMtMC4zODgtMC4xNTEgICAgICBsMC4wMDQtMC4wMDNjLTAuMDE2LTAuMDA2LTAuMDMxLTAuMDA4LTAuMDQ2LTAuMDE0Yy0wLjAxNi0wLjAwNC0wLjAyOC0wLjAxMS0wLjA0NS0wLjAxNmwtMC4wMDEsMC4wMDMgICAgICBjLTE1LjY3My01LjA2Mi0zMi41NjksMy4zNDMtMzcuOTMyLDE4Ljk4NVMzMjUuOTMxLDE0Ny45NDksMzQxLjQxNSwxNTMuNTY2eiIgZmlsbD0iI0ZGRkZGRiIvPgoJCQkJPHBhdGggZD0iTTQ2Ni4wMTYsMTY2LjA5NmMtMS41OTEtNi44OTgtOC4yODUtOS45MDgtMjAuMzc1LTcuMzkzbC05MC43Myw5Ljc2NmMwLDAtNC4yMzUtNS4wNTMtMTUuMDg4LTguNzcyICAgICAgYy0xMC44NTMtMy43Mi0xNy4yNS0yLjMxMy0xNy4yNS0yLjMxM2wtNjUuNjU4LTYzLjM3M2MtOC4wMDQtOS40MDQtMTUuMTM4LTExLjEzNC0yMC42MjUtNi42NjMgICAgICBjLTYuNjA0LDUuMzgtNy44MjIsMTMuODg5LTMuOTU1LDE4LjY5MWM1LjgzLDcuMjQxLDY0LjU3Niw2Ny40NjIsNjYuNzA0LDcwLjkxMmMyLjEyOCwzLjQ1MSwxLjI2Miw0Ljg4My0xLjEyNSwxMS44MzcgICAgICBjLTEuMDEzLDIuOTU1LTE2LjYyOSw0Ni40NjktMjIuNTUyLDYyLjYwMWwtNzcuNTY5LDUyLjI3MWMtNi43NjgsNC41NjEtOC41NTcsMTMuNzQ1LTMuOTk3LDIwLjUxMyAgICAgIGM0LjU2LDYuNzY5LDEzLjc0NCw4LjU1OSwyMC41MTMsMy45OTdjMCwwLDgxLjgwMi01NC45NzEsODMuNzgyLTU2LjQ1NmMxLjk4LTEuNDg1LDQuNjM0LTAuNTU0LDMuNzM5LDIuMjY4ICAgICAgYy0wLjg5NCwyLjgyLTM1LjEwNCwxMTAuODctMzUuMTA0LDExMC44N2MtMi40NjQsNy43ODEsMS44NDcsMTYuMDg1LDkuNjI4LDE4LjU0OWMxLjQ4MywwLjQ3MSwyLjk4NiwwLjY5Myw0LjQ2NCwwLjY5MyAgICAgIGM2LjI3MSwwLDEyLjA5MS00LjAyMiwxNC4wODUtMTAuMzJsMzguNjExLTEyMS45NDZjMC4xNjMtMC41MTUsMC4yODYtMS4wMzQsMC4zOTEtMS41NTQgICAgICBjMjEuOTQ3LTY0LjAxNCwyMS43ODctNjMuNTQ5LDIxLjIxMy02MS44NzVjMi4zODQtNi45NTQsMi41NzgtOC42MTgsNi4zNzQtMTAuMDM3czg3LjEzNC0xMi45MzUsOTYuMTgzLTE1LjA3NyAgICAgIEM0NjMuNjcyLDE4MS44NjIsNDY3LjkzLDE3NC4zOTYsNDY2LjAxNiwxNjYuMDk2eiIgZmlsbD0iI0ZGRkZGRiIvPgoJCQk8L2c+CgkJPC9nPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
  2322. }
  2323.  
  2324. #user-profile-modal .tab-bar-container .tab-bar-item:first-child{margin-top: 90px;}
  2325.  
  2326. #user-profile-modal .tab-bar-container .tab-bar-item:hover,
  2327. #user-profile-modal .tab-bar-container .tab-bar-item.selected{border: 0!important;}
  2328.  
  2329. #user-profile-modal .tab-bar-container .tab-bar-item + .tab-bar-item{margin: 0;}
  2330.  
  2331. #user-profile-modal .scroller-wrap{height: 380px;}
  2332.  
  2333. #user-profile-modal .scroller-wrap .scroller{margin-top: 15px;animation: sw-fade 300ms ease-in-out;}
  2334.  
  2335. @keyframes sw-fade {
  2336. 0% {opacity: 0;}
  2337. 100% {opacity: 1;}
  2338. }
  2339.  
  2340.  
  2341. #user-profile-modal .guilds .section .section-header{color: #fff;}
  2342.  
  2343. #user-profile-modal .guilds .section + .section{border: 0!important;}
  2344.  
  2345. #user-profile-modal .guilds .section .note textarea:focus{background-color: rgba(0, 0, 0, 0.15);border: 1px solid rgba(0, 0, 0, 0.1);color: #e4e4e4;}
  2346.  
  2347. #user-profile-modal .guilds .section .connected-account .connected-account-name a{color: rgba(0, 176, 244, 0.6);font-weight: 700;transition: color 500ms;}
  2348.  
  2349. #user-profile-modal .guilds .section .connected-account:hover .connected-account-name a{color: rgba(0, 176, 244, 1);}
  2350.  
  2351. #user-profile-modal .guilds .guild{color: #a4aeb9;margin: 0 10px;transition: background 300ms;}
  2352.  
  2353. #user-profile-modal .guilds .guild .avatar-large{box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);}
  2354.  
  2355. #user-profile-modal .guilds .guild .avatar-large:empty{border-radius: 15px!important;}
  2356.  
  2357. #user-profile-modal .guilds .guild:hover{border-radius: 5px;color: #fff;}
  2358.  
  2359. #user-profile-modal .guilds .guild .status{border: 2px solid rgba(64, 68, 74, 1);}
  2360. #user-profile-modal .guilds .guild:hover .status{border: 2px solid rgba(133, 141, 150, 0.7);}
  2361.  
  2362. #user-profile-modal .guilds .guild .guild-name .discriminator{display: none;}
  2363. #user-profile-modal .guilds .guild:hover .guild-name .discriminator{display: block;}
  2364.  
  2365.  
  2366. #user-profile-modal footer .btn.add-friend{transition: background 500ms;}
  2367.  
  2368. #user-profile-modal .scroller-wrap .scroller::-webkit-scrollbar{width:0px;}
  2369.  
  2370. .theme-dark #friends .friends-header .tab-bar .tab-bar-item.tab-bar-item-primary .badge {background-color: #f04747;color: #fff;}
  2371.  
  2372. .theme-dark #friends .friends-header .tab-bar .tab-bar-item.tab-bar-item-primary:hover:not(.selected) .badge {color: #ffffff;}
  2373.  
  2374. .theme-dark #friends .friends-header .tab-bar .tab-bar-item.tab-bar-item-primary.selected .badge {background-color: #f04747;color: #fff;}
  2375.  
  2376. #friends .friends-table .friends-row .friends-column-guilds .avatar-small {background-color: var(--main-color);}
  2377.  
  2378. .spinner-pulsing-ellipsis .spinner-item {background-color: var(--main-color);}
  2379. .gitbutton {
  2380. font-size: 14px;
  2381. font-weight: 600;
  2382. color: #fff !important;
  2383. background-color: var(--main-color);
  2384. padding: 8px 8px;
  2385. border-radius: 3px;
  2386. position: absolute;
  2387. bottom: 0px;
  2388. right: 0px;
  2389. text-align: center;
  2390. }
  2391. .docsbutton {
  2392. font-size: 14px;
  2393. font-weight: 600;
  2394. color: #fff !important;
  2395. background: var(--main-color);
  2396. padding: 8px 8px;
  2397. border-radius: 3px;
  2398. position: absolute;
  2399. bottom: 0px;
  2400. right: 69px;
  2401. text-align: center;
  2402. }
  2403. .serverbutton {
  2404. font-size: 14px;
  2405. font-weight: 600;
  2406. color: #fff !important;
  2407. background: var(--main-color);
  2408. padding: 8px 11px;
  2409. border-radius: 3px;
  2410. position: absolute;
  2411. bottom: 0px;
  2412. right: 182px;
  2413. text-align: center;
  2414. }
  2415. .donatebutton {
  2416. font-size: 14px;
  2417. font-weight: 600;
  2418. color: #fff !important;
  2419. background: var(--main-color);
  2420. padding: 8px 8px;
  2421. border-radius: 3px;
  2422. position: absolute;
  2423. bottom: 0px;
  2424. right: 255px;
  2425. text-align: center;
  2426. }
  2427. .gitbutton:hover, .docsbutton:hover, .serverbutton:hover, .donatebutton:hover {
  2428. background-color: var(--hover-color);
  2429. }
  2430. .jump-to-present-bar button:first-of-type {
  2431. display: none;
  2432. }
  2433. .jump-to-present-bar {
  2434. width: 130px!important;
  2435. right: 10px!important;
  2436. left: auto!important;
  2437. }
  2438. .popout-menu {
  2439. background: rgba(0, 0, 0, 0.83);
  2440. }
  2441. .popout-menu .popout-menu-icon, .popout-menu .popout-menu-item:hover .popout-menu-icon {
  2442. -webkit-filter: grayscale(100%);
  2443. }
  2444. .popout-menu .popout-menu-separator {
  2445. border-bottom: transparent;
  2446. }
  2447. .popout-menu .popout-menu-item, .popout-menu .popout-menu-item.invite {
  2448. color: #bdbdbd;
  2449. }
  2450. .popout-menu .popout-menu-item:hover {
  2451. background-color: var(--main-color);
  2452. color: #f7f7f7;
  2453. }
  2454. .popout-menu .popout-menu-item:hover.invite {
  2455. color: #f7f7f7;
  2456. }
  2457. .popout {
  2458. box-shadow: 0 3px 6px rgba(0,0,0,.2);
  2459. }
  2460. .user-settings-modal-keybinds .user-settings-modal-keybinds-header {
  2461. border-bottom: 1px solid #151515;
  2462. }
  2463. .channel-notices .channel-notice.invite {
  2464. background: url(https://discordapp.com/assets/bf625d222187f542b9d7179109422e2c.svg) center 20px no-repeat rgba(0, 0, 0, 0.83);
  2465. }
  2466. #instant-invite-modal .form-actions, #instant-invite-modal-advanced .form-actions {
  2467. background-color: rgba(0, 0, 0, 0.83);
  2468. border-top: 2px solid #151515;
  2469. }
  2470. .instant-invite-modal {
  2471. background: transparent;
  2472. }
  2473. #instant-invite-modal .form-header header {
  2474. color: #d2d2d2;
  2475. }
  2476. #instant-invite-modal .blurb {
  2477. color: #ffffff;
  2478. }
  2479. #instant-invite-modal .expire-text {
  2480. color: #c7c7c7;
  2481. }
  2482. #instant-invite-modal .copy {
  2483. background-color: var(--main-color);
  2484. }
  2485. #instant-invite-modal-advanced .form-actions .btn {
  2486. padding: 9px;
  2487. top: 9px;
  2488. }
  2489. .guild-settings-modal-emoji .guild-settings-modal-emoji-header h6 {
  2490. color: #fff;
  2491. }
  2492. .guild-settings-modal-emoji .guild-settings-modal-emoji-header p {
  2493. color: #c5c5c5;
  2494. }
  2495. .guild-settings-modal-emoji .guild-settings-modal-emoji-header {
  2496. border-bottom: 1px solid transparent;
  2497. }
  2498. .guild-settings-modal-emoji .no-emoji p {
  2499. color: #dadada;
  2500. }
  2501. .guild-settings-modal-emoji .table-header {
  2502. color: #ececec;
  2503. }
  2504. .guild-settings-modal-emoji .emoji-uploader .emoji-uploader-username {
  2505. color: #fff;
  2506. }
  2507. .guild-settings-modal-emoji .emoji-row .emoji-name {
  2508. background: rgba(0, 0, 0, 0.52);
  2509. color: #fff;
  2510. }
  2511. .guild-settings-modal-emoji .emoji-row:hover .emoji-name {
  2512. background-color: rgba(0, 0, 0, 0.39);
  2513. border-color: transparent;
  2514. }
  2515. .guild-settings-modal .emoji-row .btn.btn-danger, .guild-settings-modal .member-buttons .btn.btn-danger {
  2516. border: 1px solid #9c2121;
  2517. color: #ffffff;
  2518. }
  2519. .guild-settings-modal .emoji-row .btn, .guild-settings-modal .member-buttons .btn, .guild-settings-modal .emoji-row .btn.btn-danger:hover {
  2520. background: #9c2121;
  2521. }
  2522. .guild-settings-modal-emoji .emoji-row {
  2523. border-bottom: 2px solid rgba(0, 0, 0, 0.22);
  2524. }
  2525. .emoji-picker .scroller .emoji-item.selected {
  2526. background-position: center center !important;
  2527. background-repeat: no-repeat !important;
  2528. -webkit-background-size: contain !important;
  2529. -moz-background-size: contain !important;
  2530. background-size: contain !important;
  2531. }
  2532. .status-picker .popout-menu-item:nth-child(1) {
  2533. background: #43b581 !important;
  2534. color: #fff;
  2535. }
  2536. .status-picker>.popout-menu-separator {
  2537. border-bottom: 0px solid #000 !important;
  2538. }
  2539. .status-picker .popout-menu-item:nth-child(3) {
  2540. background: #faa61a !important;
  2541. color: #fff;
  2542. }
  2543. .status-picker .popout-menu-item:nth-child(4) {
  2544. background: #f04747 !important;
  2545. color: #fff;
  2546. transition: .2s all linear;
  2547. height: 38px;
  2548. }
  2549. .status-picker .popout-menu-item:nth-child(4) > .status-icon-text > .status-text{
  2550. margin-top: 19px;
  2551. transition: .2s all linear;
  2552. }
  2553. .status-picker .popout-menu-item:nth-child(4) > .helper{
  2554. margin-top: -3px;
  2555. opacity: 0;
  2556. color: #fff;
  2557. text-align: center;
  2558. padding-right: 26px;
  2559. }
  2560. .status-picker .popout-menu-item:nth-child(4):hover > .helper{
  2561. opacity: 1;
  2562. transition: .2s all linear;
  2563. }
  2564. .status-picker .popout-menu-item:nth-child(4):hover > .status-icon-text > .status-text{
  2565. opacity: 0;
  2566. transition: .2s all linear;
  2567. }
  2568. .status-picker .popout-menu-item:nth-child(5) {
  2569. background: #747f8d !important;
  2570. color: #fff;
  2571. transition: .2s all linear;
  2572. height: 38px;
  2573. }
  2574. .status-picker .popout-menu-item:nth-child(5) > .status-icon-text > .status-text{
  2575. margin-top: 16px;
  2576. transition: .2s all linear;
  2577. }
  2578. .status-picker .popout-menu-item:nth-child(5) > .helper{
  2579. margin-top: -5px;
  2580. opacity: 0;
  2581. color: #fff;
  2582. margin: -3px 0 0 19px;
  2583. }
  2584. .status-picker .popout-menu-item:nth-child(5):hover > .helper{
  2585. opacity: 1 !important;
  2586. transition: .2s all linear;
  2587. }
  2588. .status-picker .popout-menu-item:nth-child(5):hover > .status-icon-text > .status-text{
  2589. opacity: 0 !important;
  2590. transition: .2s all linear;
  2591. }
  2592. .status-icon-text > .status-text {
  2593. margin-left: -13px;
  2594. }
  2595. .status-icon-text > .status {
  2596. margin-right: 0px !important;
  2597. }
  2598. .status-picker .popout-menu-item {
  2599. -webkit-align-items: center;z
  2600. align-items: center;
  2601. }
  2602. .status-picker.popout-menu {
  2603. background: transparent !important;
  2604. }
  2605. .quick-message.isBlocked {
  2606. background: rgba(0, 0, 0, 0.53);
  2607. }
  2608. .user-popout .body .roles .member-roles::-webkit-scrollbar {
  2609. width: 0px;
  2610. padding-bottom: 7px;
  2611. }
  2612. .user-popout .body .roles .member-roles {
  2613. overflow-y: scroll;
  2614. max-height: 179px;
  2615. }
  2616. .user-popout .body .roles .member-roles {
  2617. padding-bottom: 7px;
  2618. }
  2619. .user-popout .body {
  2620. display: flex;
  2621. padding-bottom: 2px;
  2622. padding-top: 10px;
  2623. }
  2624. .user-popout .header {
  2625. height: 100px;
  2626. }
  2627. .user-popout .avatar-wrapper {
  2628. position: fixed;
  2629. margin: 4px 0px 14px -150px;
  2630. }
  2631. .user-popout {
  2632. width: 450px;
  2633. }
  2634. .section.roles {
  2635. max-width: 250px;
  2636. width: 250px;
  2637. }
  2638. .section.notes, .section.roles {
  2639. background: rgba(0, 0, 0, 0.53);
  2640. margin-left: 15px;
  2641. border-radius: 3px;
  2642. }
  2643. .user-popout .username-wrapper .activity, .user-popout .username-wrapper .discord-tag, .user-popout .username-wrapper .nickname {
  2644. text-align: left;
  2645. margin-left: 138px;
  2646. white-space: nowrap;
  2647. text-overflow: ellipsis;
  2648. overflow: hidden;
  2649. }
  2650. .user-popout .username-wrapper .nickname::before {
  2651. content: "Nickname:";
  2652. color: #cecece;
  2653. padding-right: 3px;
  2654. }
  2655. .user-popout .username-wrapper .nickname {
  2656. margin-bottom: 2px;
  2657. }
  2658. .creation-date-wrapper {
  2659. margin-left: -33px;
  2660. }
  2661. #user-profile-modal .header:after {
  2662. content: ' ';
  2663. background-color: transparent;
  2664. background-image: linear-gradient(-180deg,transparent,transparent);
  2665. }
  2666. #user-profile-modal .avatar-wrapper {
  2667. background-color: transparent;
  2668. top: 8px;
  2669. left: 0px;
  2670. }
  2671. #user-profile-modal .header .header-info .header-info-inner .discord-tag {
  2672. color: #e4e4e4;
  2673. }
  2674. #user-profile-modal .header .header-info .header-info-inner .discord-tag .discriminator {
  2675. color: #969696;
  2676. }
  2677. .avatar-profile {
  2678. width: 100px;
  2679. height: 100px;
  2680. background-size: cover;
  2681. }
  2682. #user-profile-modal .actions {
  2683. padding-top: 14px;
  2684. margin-left: -50px;
  2685. }
  2686. .connected-account {
  2687. width: 500px !important;
  2688. }
  2689. .connected-accounts {
  2690. max-width: 85%;
  2691. min-width: 85%;
  2692. }
  2693. #user-profile-modal .guilds .section .connected-accounts .connected-account .connected-account-name-inner .connected-account-name {
  2694. color: #bbbbbb;
  2695. }
  2696. #user-profile-modal .guilds .section .connected-accounts .connected-account {
  2697. border: 2px solid #000;
  2698. background: #000;
  2699. }
  2700. #user-profile-modal .header .header-info .header-info-inner .activity {
  2701. color: #fff;
  2702. }
  2703. .bot-tag { background: var(--main-color);}
  2704. .search-bar-clear { background: var(--main-color);}
  2705. .mention {
  2706. color: var(--main-color);
  2707. }
  2708. .mentioned .mention:hover {
  2709. color: #fff !important;
  2710. opacity: 0.9;
  2711. }
  2712. .theme-dark .message-group .comment .markup .mention {
  2713. background-color: ;
  2714. color: var(--main-color);
  2715. background: rgba(0,0,0,0.7);
  2716. border-radius: 3px;
  2717. padding: 1px 4px 2px 3px;
  2718. }
  2719. .theme-dark .message-group .comment .markup .mention:hover {
  2720. background-color: var(--main-color);
  2721. color: #fff;
  2722. opacity: 0.9;
  2723. }
  2724. .context-menu .item-toggle .checkbox {
  2725. margin-right: 18px;
  2726. }
  2727. .embed-color-pill[style*='background-color: rgb(114, 137, 218);'] {
  2728. background-color: var(--main-color) !important;
  2729. }
  2730. .premium-settings .subscription.active, .premium-settings .subscription {
  2731. background: var(--main-color) !important;
  2732. }
  2733. .premium-settings .subscription .btn-filled, .premium-settings .subscription.active .btn-filled {
  2734. color: var(--main-color);
  2735. }
  2736. .premium-settings .payment-subhead {
  2737. color: #fff;
  2738. }
  2739. .premium-settings .payment-method .payment-info .card-info .card-description {
  2740. color: #dbdbdb;
  2741. }
  2742. .premium-settings .payment-method .payment-info .card-info .card-description strong {
  2743. color: var(--main-color);
  2744. }
  2745. .premium-settings .payment-method .payment-info .card-info .card-details {
  2746. color: #a2a2a2;
  2747. }
  2748. .premium-settings .billing-history-list li.header-row {
  2749. color: var(--hover-color);
  2750. }
  2751. .premium-settings .billing-history-list li {
  2752. color: #a1a1a1;
  2753. }
  2754. .premium-settings .premium-header {
  2755. border-bottom: 0px solid transparent;
  2756. }
  2757. .btn-stroked {
  2758. border: 2px solid var(--main-color);
  2759. color: var(--main-color);
  2760. transition: .2s all linear;
  2761. }
  2762. .btn-stroked:hover {
  2763. background-color: var(--main-color);
  2764. color: #fff;
  2765. }
  2766. .theme-dark .recent-mentions-popout .mention-filter .label {
  2767. color: var(--main-color);
  2768. font-weight: bold;
  2769. }
  2770. #user-profile-modal .header .header-info .badge-premium {
  2771. margin-right: -46px;
  2772. background-size: 38px;
  2773. background-repeat: no-repeat;
  2774. left: 99px;
  2775. }
  2776. .badge-premium {
  2777. top: 89px !important;
  2778. right: 540px;
  2779. position: absolute;
  2780. }
  2781. .theme-dark .layers { background: transparent !important; }
  2782. .theme-light .layers { background: transparent !important; }
  2783.  
  2784. .guilds {
  2785. padding: 18px 20px 85px 14px !important;
  2786. }
  2787. .guilds-wrapper .guilds .guild.selected:before, .guilds-wrapper .guilds .guild.unread:before {
  2788. left: -20px !important;
  2789. }
  2790. /* SEARCH */
  2791. .search .search-bar {
  2792. border-bottom: 2px solid hsla(0, 0%, 100%, .04);
  2793. -wekbit-transition: all .3s ease-in-out;
  2794. transition: all .3s ease-in-out;
  2795. }
  2796. .search.focused .search-bar {
  2797. border-color: var(--main-color);
  2798. }
  2799. .search .search-bar .public-DraftEditorPlaceholder-root {
  2800. color: hsla(0, 0%, 100%, .3);
  2801. }
  2802. .search .search-bar .search-bar-icon .icon.icon-search-bar-clear {
  2803. background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…A1NzUsOSBMMTIuNzUsNi4zMDc1IEwxMS42OTI1LDUuMjUgWiIvPgogIDwvZz4KPC9zdmc+Cg==);
  2804. }
  2805. .search .search-bar .search-bar-icon .icon.icon-search-bar-eye-glass {
  2806. background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…MuNzg5NzQ2Mi0zLjc5NzM0MDktLjIwNDUzNjItLjIwNDk0NjJ6Ii8+CiAgPC9nPgo8L3N2Zz4=);
  2807. }
  2808. .search-answer,
  2809. .theme-dark .search-answer,
  2810. .search-filter,
  2811. .theme-dark .search-filter {
  2812. background-color: hsla(0, 0%, 100%, .1);
  2813. }
  2814. .search-answer {
  2815. margin-left: 0;
  2816. text-indent: -4px;
  2817. }
  2818. .search-popout,
  2819. .react-datepicker {
  2820. background-color: rgba(0, 0, 0, .7);
  2821. }
  2822. .search-popout .results-group .search-learn-more {
  2823. background-image: url(https://cdn.rawgit.com/Zerthox/ClearVision/master/icons/help.svg) !important;
  2824. background-repeat: no-repeat;
  2825. background-position: center;
  2826. background-size: 24px;
  2827. opacity: .7;
  2828. }
  2829. .search-popout .option.selected {
  2830. background-color: var(--main-color);
  2831. }
  2832. .search-popout .search-query {
  2833. border-color: transparent;
  2834. }
  2835. .search-popout .search-query.selected .keybind-shortcut span {
  2836. border-color: hsla(0, 0%, 100%, .7);
  2837. -webkit-box-shadow: inset 0 -4px 0 rgba(227, 227, 227, .7);
  2838. box-shadow: inset 0 -4px 0 rgba(227, 227, 227, .7);
  2839. }
  2840. .search-popout .results-group .search-clear-history {
  2841. background-image: url(https://cdn.rawgit.com/Zerthox/ClearVision/master/icons/close.svg) !important;
  2842. background-repeat: no-repeat;
  2843. background-position: center;
  2844. background-size: 18px;
  2845. opacity: .3;
  2846. }
  2847. .search-popout .results-group .search-clear-history:hover {
  2848. opacity: .7;
  2849. }
  2850. .search-popout .search-option .answer {
  2851. color: #caccce;
  2852. }
  2853. .search-popout .search-option .filter {
  2854. color: var(--main-color);
  2855. font-weight: bold;
  2856. }
  2857. .search-popout .search-option .non-text,
  2858. .react-datepicker .react-datepicker__current-month {
  2859. color: #555;
  2860. }
  2861. .search-popout .date-picker {
  2862. border-color: transparent;
  2863. }
  2864. .react-datepicker .react-datepicker__navigation.react-datepicker__navigation--next,
  2865. .react-datepicker .react-datepicker__navigation.react-datepicker__navigation--previous {
  2866. border-color: transparent;
  2867. background-image: url(https://cdn.rawgit.com/Zerthox/ClearVision/master/icons/expand_more.svg) !important;
  2868. background-repeat: no-repeat;
  2869. background-position: center;
  2870. background-size: 24px;
  2871. opacity: .7;
  2872. -webkit-transform: rotateZ(90deg);
  2873. transform: rotateZ(90deg);
  2874. }
  2875. .react-datepicker .react-datepicker__navigation.react-datepicker__navigation--next.react-datepicker__navigation--next,
  2876. .react-datepicker .react-datepicker__navigation.react-datepicker__navigation--previous.react-datepicker__navigation--next {
  2877. -webkit-transform: rotateZ(-90deg);
  2878. transform: rotateZ(-90deg);
  2879. }
  2880. .react-datepicker .react-datepicker__week:first-of-type .react-datepicker__day:not(.react-datepicker__day--disabled):not(.react-datepicker__day--outside-month) {
  2881. border-top: 1px solid hsla(0, 0%, 100%, .04) !important;
  2882. border-bottom: none !important;
  2883. }
  2884. .react-datepicker .react-datepicker__week:first-of-type + .react-datepicker__week .react-datepicker__day {
  2885. border-top: 1px solid hsla(0, 0%, 100%, .04) !important;
  2886. }
  2887. .react-datepicker .react-datepicker__week .react-datepicker__day:not(.react-datepicker__day--disabled):not(.react-datepicker__day--outside-month):last-of-type {
  2888. border-right: 1px solid hsla(0, 0%, 100%, .04) !important;
  2889. }
  2890. .react-datepicker .react-datepicker__day {
  2891. border-color: transparent !important;
  2892. border-left: 1px solid hsla(0, 0%, 100%, .04) !important;
  2893. border-bottom: 1px solid hsla(0, 0%, 100%, .04) !important;
  2894. }
  2895. .react-datepicker .react-datepicker__day.react-datepicker__day--selected:hover,
  2896. .react-datepicker .react-datepicker__day:hover,
  2897. .react-datepicker .react-datepicker__day.react-datepicker__day--today::after,
  2898. .search-popout .date-picker .date-picker-hint .hint-value {
  2899. background-color: var(--main-color);
  2900. -webkit-transition: background-color .3s ease-in-out;
  2901. transition: background-color .3s ease-in-out;
  2902. }
  2903. .search-popout .date-picker .date-picker-hint .hint-value:hover {
  2904. background-color: var(--hover-color);
  2905. }
  2906. .react-datepicker .react-datepicker__day-name,
  2907. .react-datepicker .react-datepicker__day {
  2908. color: hsla(0, 0%, 100%, .3);
  2909. }
  2910. .react-datepicker .react-datepicker__day--disabled,
  2911. .react-datepicker .react-datepicker__day--outside-month {
  2912. background: transparent;
  2913. border-color: hsla(0, 0%, 100%, .02) !important;
  2914. color: rgba(85, 85, 85, .5);
  2915. }
  2916. .react-datepicker .react-datepicker__day:not(.react-datepicker__day--disabled) + .react-datepicker__day--disabled,
  2917. .react-datepicker .react-datepicker__day:not(.react-datepicker__day--outside-month) + .react-datepicker__day--outside-month {
  2918. border-left-color: hsla(0, 0%, 100%, .04) !important;
  2919. }
  2920. .search-popout .date-picker .date-picker-hint {
  2921. border-color: transparent;
  2922. }
  2923. .search-results-wrap,
  2924. .theme-dark .search-results-wrap {
  2925. background-color: rgba(0, 0, 0, .9);
  2926. }
  2927. .search-results-wrap .search-header,
  2928. .theme-dark .search-results-wrap .search-header,
  2929. .react-datepicker .react-datepicker__header {
  2930. background-color: rgba(0, 0, 0, .3);
  2931. }
  2932. .search-results-wrap .search-header .tab,
  2933. .search-results-wrap .search-header .total-results,
  2934. .search-results-wrap .search-header a {
  2935. color: #fff;
  2936. }
  2937. .search-results-wrap .search-header .tab.selected,
  2938. .search-results-wrap .search-header .tab:hover {
  2939. border-bottom: 2px solid #fff;
  2940. }
  2941. .search-results-wrap .search-header .tab.selected,
  2942. .theme-dark .search-results-wrap .search-header .tab.selected {
  2943. color: var(--main-color);
  2944. border-color: var(--main-color);
  2945. }
  2946. .search-results-wrap .channel-separator .channel-name {
  2947. color: #fff;
  2948. }
  2949. .search-results-wrap .channel-separator::before {
  2950. border-color: hsla(0, 0%, 100%, .1);
  2951. }
  2952. .search-results-wrap .search-result {
  2953. border-bottom: 1px solid hsla(0, 0%, 100%, .04);
  2954. }
  2955. .search-results-wrap .search-result.expanded {
  2956. border-color: transparent !important;
  2957. border-bottom: 1px solid hsla(0, 0%, 100%, .04) !important;
  2958. }
  2959. .search-results-wrap .search-result .search-result-message.after,
  2960. .search-results-wrap .search-result .search-result-message.before {
  2961. opacity: .3;
  2962. }
  2963. .search-results-wrap .search-result:not(.expanded) .search-result-message.before {
  2964. -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, transparent 100%);
  2965. }
  2966. .search-results-wrap .search-result:not(.expanded) .search-result-message.after {
  2967. -webkit-mask-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, transparent 100%);
  2968. }
  2969. .search-results-wrap .search-result .search-result-message .message-group {
  2970. padding-bottom: 0;
  2971. }
  2972. .search-results-wrap .channel-separator .channel-name,
  2973. .theme-dark .search-results-wrap .channel-separator .channel-name {
  2974. background-color: transparent;
  2975. }
  2976. .search-results-wrap .search-result .hit,
  2977. .theme-dark .search-results-wrap .search-result .hit {
  2978. background-color: rgba(0 ,0, 0, .3) !important;
  2979. border-color: transparent !important;
  2980. box-shadow: none !important;
  2981. }
  2982. .search-popout .results-group::before,
  2983. .search-popout .option::after,
  2984. .search-results-wrap .search-result::before,
  2985. .search-results-wrap .search-result::after {
  2986. display: none;
  2987. }
  2988. /* REACTIONS MODAL */
  2989. .message-reactions-modal {
  2990. background-color: rgba(0, 0, 0, .7);
  2991. }
  2992. .message-reactions-modal .message-reactions-list .scroller-wrap {
  2993. background-color: rgba(0, 0, 0, .3);
  2994. }
  2995. .message-reactions-modal .message-reactions-list-inner {
  2996. background-color: transparent;
  2997. }
  2998. .message-reactions-modal .message-reactions-reactors .reactor {
  2999. box-shadow: inset 0 -1px 0 0 hsla(0, 0%, 100%, .04);
  3000. }
  3001. .message-reactions-modal .message-reactions-list-inner .reaction {
  3002. -webkit-transition: background-color .3s ease-in-out;
  3003. transition: background-color .3s ease-in-out;
  3004. }
  3005. .message-reactions-modal .message-reactions-list-inner .reaction + .reaction {
  3006. margin-top: 3px;
  3007. }
  3008. .message-reactions-modal .message-reactions-list-inner .reaction:not(.selected) {
  3009. background-color: hsla(0, 0%, 100%, .04);
  3010. }
  3011. .message-reactions-modal .message-reactions-list-inner .reaction:not(.selected):hover {
  3012. background-color: hsla(0, 0%, 100%, .1);
  3013. }
  3014. .message-reactions-modal .message-reactions-list-inner .reaction.selected {
  3015. background-color: var(--hover-color) !important;
  3016. }
  3017. .message-reactions-modal .message-reactions-list-inner .reaction.selected:hover {
  3018. background-color: var(--main-color) !important;
  3019. }
  3020. .message-reactions-modal .message-reactions-list-inner .reaction .count,
  3021. .message-reactions-modal .message-reactions-reactors .reactor .name {
  3022. color: hsla(0, 0%, 100%, .5);
  3023. }
  3024. .message-reactions-modal .message-reactions-list-inner .reaction.selected .count {
  3025. color: hsla(0, 0%, 100%, .7) !important;
  3026. }
  3027. .message-reactions-modal .message-reactions-reactors .reactor .remove {
  3028. width:0px;
  3029. height:0px;
  3030. padding: 12px;
  3031. margin-top: 8px;
  3032. background-image: url(https://cdn.rawgit.com/Zerthox/ClearVision/master/icons/close.svg);
  3033. background-repeat: no-repeat;
  3034. background-position: center;
  3035. background-size: 18px;
  3036. opacity: .3;
  3037. }
  3038. .message-reactions-modal .message-reactions-reactors .reactor .remove:hover {
  3039. opacity: .7;
  3040. }
  3041. /* REACTION BUTTONS */
  3042. .reaction {
  3043. padding: 0 3px;
  3044. -webkit-transition: background .1s ease-in-out;
  3045. transition: background .1s ease-in-out;
  3046. }
  3047. .reaction .reaction-count,
  3048. .theme-dark .reaction .reaction-count {
  3049. margin-left: 3px;
  3050. color: hsla(0, 0%, 100%, .3);
  3051. }
  3052. .reaction .emoji {
  3053. margin: 1px 0 !important;
  3054. }
  3055. .reaction.reaction-me {
  3056. background: transparent !important;
  3057. position: relative;
  3058. }
  3059. .reaction:hover {
  3060. background: rgba( 255, 255, 255, .1) !important;
  3061. }
  3062. .reaction .reaction-count {
  3063. -webkit-transition: color .1s ease-in-out;
  3064. transition: color .1s ease-in-out;
  3065. }
  3066. .reaction:hover .reaction-count {
  3067. color: rgba( 255, 255, 255, .5) !important;
  3068. }
  3069. .reaction.reaction-me .reaction-count {
  3070. color: hsla(0, 0%, 100%, .5) !important;
  3071. }
  3072. .reaction.reaction-me:hover .reaction-count {
  3073. color: rgba( 255, 255, 255, .7) !important;
  3074. }
  3075. .reaction.reaction-me::after {
  3076. content: "";
  3077. position: absolute;
  3078. top: 0;
  3079. right: 0;
  3080. bottom: 0;
  3081. left: 0;
  3082. background: var(--main-color);
  3083. border-radius: 3px;
  3084. opacity: .5;
  3085. z-index: -1;
  3086. -webkit-transition: opacity .1s ease-in-out;
  3087. transition: opacity .1s ease-in-out;
  3088. }
  3089. .reaction.reaction-me:hover::after {
  3090. opacity: .7;
  3091. }
  3092. .message-group .btn-option:hover {
  3093. -webkit-animation: load8 0s infinite linear !important;
  3094. animation: load8 0s infinite linear !important;
  3095. }
  3096. /*emoji*/
  3097. .emoji-picker .dimmer {
  3098. background-color: transparent;
  3099. }
  3100. .emoji-picker .header .search-bar {
  3101. background-color: transparent !important;
  3102. }
  3103. .emoji-picker .search-bar .search-bar-inner,
  3104. .emoji-picker .search-bar.search-bar-light .search-bar-inner {
  3105. background-color: rgba(0, 0, 0, 0.55);
  3106. color: #fff;
  3107. border: 1px solid transparent;
  3108. }
  3109. .emoji-picker .sticky-header {
  3110. background-color: transparent;
  3111. }
  3112. .emoji-picker .categories .item.selected {
  3113. border-bottom-color: var(--main-color);
  3114. }
  3115. .emoji-picker .categories .item.people {
  3116. background-image: url(https://discordapp.com/assets/0509bf058793ef8ddd770a977e63614c.svg);
  3117. }
  3118. .emoji-picker .categories .item.nature {
  3119. background-image: url(https://discordapp.com/assets/aafe899a4d7ad7717acc64f5b8f36342.svg);
  3120. }
  3121. .emoji-picker .categories .item.food {
  3122. background-image: url(https://discordapp.com/assets/0eb5a2b715ff649e9757a232996817ab.svg);
  3123. }
  3124. .emoji-picker .categories .item.activity {
  3125. background-image: url(https://discordapp.com/assets/8674c1028a63d29fb605be53eeedf1bf.svg);
  3126. }
  3127. .emoji-picker .categories .item.travel {
  3128. background-image: url(https://discordapp.com/assets/13e86ddf4302f697243425b2f954d00b.svg);
  3129. }
  3130. .emoji-picker .categories .item.objects {
  3131. background-image: url(https://discordapp.com/assets/6d9a5b47dc3bf7adf54f19b1e3f6c5ad.svg);
  3132. }
  3133. .emoji-picker .categories .item.symbols {
  3134. background-image: url(https://discordapp.com/assets/83095e6af6c7cf33669e3ab169296867.svg);
  3135. }
  3136. .emoji-picker .categories .item.flags {
  3137. background-image: url(https://discordapp.com/assets/ccda5cf0a64abbd18fdb9f914b55292e.svg);
  3138. }
  3139. .emoji-picker .categories .item.recent {
  3140. background-image: url(https://discordapp.com/assets/0f1f2dff98b5e2099086e303d9be0dad.svg);
  3141. }
  3142. .emoji-picker {
  3143. width: 346px;
  3144. height: 327px;
  3145. overflow: hidden;
  3146. background-color: rgba(0, 0, 0, 0.55);
  3147. border: none;
  3148. -webkit-box-shadow: none;
  3149. box-shadow: none;
  3150. }
  3151. .emoji-picker .search-bar {
  3152. background-color: transparent;
  3153. }
  3154. .diversity-selector .popout,
  3155. .emoji-picker .diversity-selector .popout,
  3156. .bda-dark .emoji-picker .diversity-selector .popout {
  3157. background: rgba(0, 0, 0, 0.3);
  3158. border: 1px solid rgba(0, 0, 0, 0.7);
  3159. }
  3160. .emoji-picker .dimmer.visible,
  3161. .bda-dark .emoji-picker .dimmer.visible {
  3162. pointer-events: auto;
  3163. background-color: rgba(0, 0, 0, 0.5);
  3164. }
  3165. #friends .friends-header,
  3166. .theme-dark #friends .friends-header {
  3167. border-bottom: 1px solid transparent;
  3168. -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  3169. box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  3170. }
  3171. #friends .friends-table .friends-table-header,
  3172. .theme-dark #friends .friends-table .friends-table-header {
  3173. border-bottom: 1px solid hsla(0, 0%, 100%, 0.04);
  3174. }
  3175. #friends .friends-table .friends-table-header .friends-column-separator,
  3176. .theme-dark #friends .friends-table .friends-table-header .friends-column-separator {
  3177. background-color: hsla(0, 0%, 100%, 0.04);
  3178. }
  3179. #friends .friends-table .friends-table-header .friends-column,
  3180. .theme-dark #friends .friends-table .friends-table-header .friends-column {
  3181. color: hsla(0, 0%, 100%, 0.5);
  3182. }
  3183. #friends .friends-table .friends-table-header .friends-column::after,
  3184. .theme-dark #friends .friends-table .friends-table-header .friends-column::after {
  3185. color: hsla(0, 0%, 100%, 0.5);
  3186. }
  3187. .emoji-picker .category {
  3188. height: 21px;
  3189. color: #BBBBBB;
  3190. background-color: rgba(0, 0, 0, .3) !important;
  3191. border-radius: 2px;
  3192. text-align: center;
  3193. color: var(--main-color);
  3194. font-size: 11px;
  3195. font-weight: 700;
  3196. line-height: 21px;
  3197. text-transform: uppercase;
  3198. letter-spacing: .08em;
  3199. }
  3200. .emoji-picker .sticky-header .category {
  3201. display: none;
  3202. }
  3203. .item:hover {
  3204. background-color: rgba(0, 0, 0, 0.5);
  3205. border-radius: 3px;
  3206. }
  3207. .emoji-picker .categories .item {
  3208. border-radius: 0;
  3209. }
  3210. .emoji-picker .no-search-results .sad-discord {
  3211. opacity: 0.6;
  3212. -webkit-filter: invert(90%);
  3213. filter: invert(90%);
  3214. }
  3215. .emoji-picker .no-search-results {
  3216. color: #B2B2B2;
  3217. }
  3218. .emoji-picker {
  3219. background-color: rgba(0, 0, 0, 0.55) !important;
  3220. }
  3221. #bda-qem-favourite-container .scroller-wrap .scroller::-webkit-scrollbar,#bda-qem-twitch-container .scroller-wrap .scroller::-webkit-scrollbar,.emoji-picker .scroller-wrap .scroller::-webkit-scrollbar{background:#212121;width:6px!important;display:none;}
  3222.  
  3223. #bda-qem-favourite-container .scroller-wrap .scroller::-webkit-scrollbar-thumb,#bda-qem-twitch-container .scroller-wrap .scroller::-webkit-scrollbar-thumb,.emoji-picker .scroller-wrap .scroller::-webkit-scrollbar-thumb{border:none !important;background-color:rgba(225, 225, 225, 0.2) !important;display:initial;border-radius:0!important}
  3224.  
  3225. #bda-qem-favourite-container .scroller-wrap .scroller::-webkit-scrollbar-thumb:active,#bda-qem-twitch-container .scroller-wrap .scroller::-webkit-scrollbar-thumb:active,.emoji-picker .scroller-wrap .scroller::-webkit-scrollbar-thumb:active{border:none !important;background-color:rgba(225, 225, 225, 0.4) !important;display:initial;border-radius:0!important}
  3226.  
  3227. /*Server/Client Settings*/
  3228.  
  3229. .ui-button.brand.filled:hover{background-color:var(--hover-color);}
  3230.  
  3231. .ui-button.brand.filled, .ui-tab-bar.SIDE .ui-tab-bar-item.selected{background-color:var(--main-color);}
  3232.  
  3233. .ui-tab-bar.SIDE .ui-tab-bar-item.brand{color:var(--main-color);}
  3234.  
  3235. .ui-standard-sidebar-view .sidebar-region,.ui-standard-sidebar-view .sidebar-region .scrollbar{background:rgba(0,0,0,0.8) !important;}
  3236.  
  3237. .theme-dark .ui-standard-sidebar-view {background: transparent;}
  3238.  
  3239. .ui-standard-sidebar-view .content-region,.ui-standard-sidebar-view .content-region .scrollbar{background:rgba(0,0,0,0.8) !important;}
  3240.  
  3241. .ui-tab-bar-item:hover{background-color: rgba(0, 0, 0, 0.3) !important;}
  3242.  
  3243. .ui-card-primary{background:rgba(0, 0, 0, 0.18)!important;}
  3244.  
  3245. .theme-dark .ui-standard-sidebar-view .btn-close:hover{background-color:var(--main-color);border-color:var(--hover-color);}
  3246.  
  3247. .ui-switch-checkbox:checked+.ui-switch{background:var(--main-color);}
  3248.  
  3249. .theme-dark .ui-card-primary .ui-form-title.h5{color:#fff;}
  3250.  
  3251. .theme-dark .ui-card-primary.editable{border:2px solid var(--main-color) !important;}
  3252.  
  3253. .theme-dark .ui-radiogroup .checked{border-color:var(--hover-color);}
  3254.  
  3255. .theme-dark .ui-checkbox.checked{background:#131313;}
  3256.  
  3257. polyline[stroke*="#7289da"]{stroke:var(--main-color) !important;}
  3258.  
  3259. .ui-checkbox-wrapper .input:focus+.ui-checkbox{box-shadow:none;}
  3260.  
  3261. .user-settings-modal .tab-bar.SIDE .tab-bar-item:before{opacity:1!important;border-left:0px;margin-top:4px;-webkit-transition:all 100ms ease;transition:all 100ms ease;content:url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTkuNDMgMTIuOThjLjA0LS4zMi4wNy0uNjQuMDctLjk4cy0uMDMtLjY2LS4wNy0uOThsMi4xMS0xLjY1Yy4xOS0uMTUuMjQtLjQyLjEyLS42NGwtMi0zLjQ2Yy0uMTItLjIyLS4zOS0uMy0uNjEtLjIybC0yLjQ5IDFjLS41Mi0uNC0xLjA4LS43My0xLjY5LS45OGwtLjM4LTIuNjVDMTQuNDYgMi4xOCAxNC4yNSAyIDE0IDJoLTRjLS4yNSAwLS40Ni4xOC0uNDkuNDJsLS4zOCAyLjY1Yy0uNjEuMjUtMS4xNy41OS0xLjY5Ljk4bC0yLjQ5LTFjLS4yMy0uMDktLjQ5IDAtLjYxLjIybC0yIDMuNDZjLS4xMy4yMi0uMDcuNDkuMTIuNjRsMi4xMSAxLjY1Yy0uMDQuMzItLjA3LjY1LS4wNy45OHMuMDMuNjYuMDcuOThsLTIuMTEgMS42NWMtLjE5LjE1LS4yNC40Mi0uMTIuNjRsMiAzLjQ2Yy4xMi4yMi4zOS4zLjYxLjIybDIuNDktMWMuNTIuNCAxLjA4LjczIDEuNjkuOThsLjM4IDIuNjVjLjAzLjI0LjI0LjQyLjQ5LjQyaDRjLjI1IDAgLjQ2LS4xOC40OS0uNDJsLjM4LTIuNjVjLjYxLS4yNSAxLjE3LS41OSAxLjY5LS45OGwyLjQ5IDFjLjIzLjA5LjQ5IDAgLjYxLS4yMmwyLTMuNDZjLjEyLS4yMi4wNy0uNDktLjEyLS42NGwtMi4xMS0xLjY1ek0xMiAxNS41Yy0xLjkzIDAtMy41LTEuNTctMy41LTMuNXMxLjU3LTMuNSAzLjUtMy41IDMuNSAxLjU3IDMuNSAzLjUtMS41NyAzLjUtMy41IDMuNXoiLz48L3N2Zz4=);}
  3262.  
  3263. .user-settings-modal .tab-bar.SIDE .tab-bar-item.selected,.user-settings-modal .tab-bar.SIDE .tab-bar-item:hover{opacity:1!important;}
  3264.  
  3265. .user-settings-modal .tab-bar.SIDE .tab-bar-item:hover{-webkit-transition:0ms;transition:0ms}
  3266.  
  3267. .user-settings-modal .tab-bar.SIDE .tab-bar-item{padding-left:35px;margin-left:15px;padding-top:10px;opacity:.3;color:#fff;}
  3268.  
  3269. .ui-tab-bar.SIDE .ui-tab-bar-item:before{margin-right:10px;vertical-align:-30%;}
  3270.  
  3271. .ui-tab-bar-item:before{opacity:0.7;}
  3272.  
  3273. .ui-tab-bar-item:hover:before, .ui-tab-bar-item.selected:before{opacity:1 !important;}
  3274.  
  3275. .theme-dark .layer, .theme-dark .layers{background: transparent;}
  3276.  
  3277. .deprecated-settings-modal .settings-inner{background-color: rgba(0, 0, 0, 0.65);}
  3278.  
  3279. .deprecated-settings-modal .settings-actions {background-color: rgba(0, 0, 0, 0.70);border-top: 0px solid transparent;}
  3280.  
  3281. .guilds-wrapper .btn-download-apps {display: none;}
  3282.  
  3283. .guilds-wrapper .guilds .guild .guild-inner a{line-height: 40px;}
  3284.  
  3285. .guilds-wrapper .guilds .guild .guild-inner:first-of-type:hover {background-color: var(--main-color) !important;}
  3286.  
  3287. .guilds-wrapper .guilds .guild.selected .guild-inner{background-color: var(--main-color) !important;}
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!