API tools faq
paste
Advertisement
AlexisBaccaraHD

Untitled

AlexisBaccaraHD
Jan 20th, 2018
67
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.63 KB | None | 0 0
raw download clone embed print report
  1. //META{"name":"Squared","description":"A square, dark, minimal, theme.","author":"Dreemlan","version":"2.0"}*//
  2.  
  3.  
  4. /* FONT */
  5. body {
  6. font-family: Maven Pro;
  7. }
  8.  
  9. /* CHAT MESSAGES */
  10. .theme-dark .message-group .comment .markup {
  11. font-size: 15px;
  12. }
  13.  
  14. /* MEMBERS LIST USERNAME */
  15. .channel-members .member .member-username-inner {
  16. font-size: 16px;
  17. letter-spacing: 0px;
  18. }
  19.  
  20. /* ACTIVE GAMES */
  21. .channel-members .member .member-activity {
  22. font-size: 12px;
  23. }
  24.  
  25. .message-group h2 strong {
  26. font-size: 20px;
  27. letter-spacing: 0.3px;
  28. }
  29.  
  30. .chat .user-name:hover {
  31. border: 1px solid;
  32. text-decoration: none;
  33. padding: 2px 4px 2px 4px;
  34. }
  35.  
  36. /* SERVER LIST BAR */
  37.  
  38. /* SERVER ICONS SQUARE */
  39. .guild div * {
  40. border-radius: 0 !important;
  41. }
  42. /* DISPLAY # ONLINE */
  43. .guilds-wrapper .guilds .friends-online {
  44. display: none;
  45. }
  46. /* PRIVATE MESSAGE NOTIFICATION */
  47. .guilds-wrapper .guilds .guild .guild-inner {
  48. border-radius: 0 !important;
  49. }
  50.  
  51. .badge {
  52. border-radius: 0;
  53. }
  54.  
  55. .guilds-wrapper .guilds .guild.audio .guild-inner:after {
  56. border-radius: 0;
  57. background-color: var(--fifth-color);
  58. }
  59.  
  60. /* SELECTED SERVER BAR */
  61. .guilds-wrapper .guilds .guild.selected:before {
  62. background-color: rgba(200, 200, 200, 1.0);
  63. border-radius: 0px;
  64. height: 25px;
  65. margin-top: -12px;
  66. }
  67.  
  68. /* FRIENDS ICON TOP LEFT */
  69. .guilds-wrapper .guilds .friends-icon {
  70. background-color: var(--fifth-color);
  71. background-image: url(https://raw.githubusercontent.com/Dreemlan/squared-theme/master/assets/friend-icon.png);
  72. background-size: 30px 30px;
  73. width: 50px;
  74. height: 50px;
  75. padding-top: 8px;
  76. padding-bottom: 5px;
  77. }
  78.  
  79. .guilds-wrapper .guilds .guild .guild-inner a {
  80. background-color: var(--fifth-color);
  81. }
  82.  
  83. /* ADD A SERVER COLOR */
  84. .guilds-wrapper .guilds .guild+.guild {
  85. background-color: var(--fifth-color);
  86. }
  87.  
  88. /* BACKGROUND COLOR */
  89. .scroller.guilds {
  90. background-color: var(--fifth-color);
  91. padding-top: 0;
  92. }
  93.  
  94. /* ADD SERVER BUTTON */
  95. .guilds-wrapper .guilds .guild {
  96. border-radius: 0px;
  97. }
  98.  
  99. /* SEPARATOR */
  100. .guilds-wrapper .guild-separator:after {
  101. background-color: var(--third-color);
  102. margin-top: 0px;
  103. margin-left:-20px;
  104. margin-right: 0px;
  105. width: 80px;
  106. height: 4px;
  107. }
  108.  
  109. .guild-inner {
  110. background-color: transparent !important;
  111. }
  112.  
  113. .guilds-wrapper .guilds-add {
  114. border: 1px solid var(--first-color);
  115. color: var(--first-color);
  116. }
  117.  
  118. .guilds-wrapper .guilds-error {
  119. border-radius: 0;
  120. background-color: var(--fifth-color);
  121. }
  122.  
  123. .guilds .guild:first-child {
  124. margin-top: -3px;
  125. }
  126.  
  127. .titlebar {
  128. left: 80px;
  129. }
  130.  
  131. .titlebar + div {
  132. margin-left: -80px;
  133. }
  134.  
  135. /* BOTTOM LEFT USER INFO */
  136.  
  137. /* USER AVATAR */
  138. .account .avatar-small {
  139. }
  140.  
  141. /* USERNAME */
  142. .account .account-details .username {
  143. display: none;
  144. }
  145.  
  146. /* ACCOUNT ID */
  147. .account .account-details .discriminator {
  148. }
  149.  
  150. /* BUTTON GROUP*/
  151. .account .btn-group {
  152. border: none;
  153. }
  154.  
  155. /* BUTTONS */
  156. .account .btn-deafen, .account .btn-mute, .account .btn-settings {
  157. background-color: var(--second-color);
  158. box-shadow: none;
  159. border: none;
  160. }
  161.  
  162. /* ACCOUNT INFO / BUTTONS BOX */
  163. .account {
  164. background-color: var(--second-color);
  165. border: none;
  166. }
  167.  
  168. .account .status {
  169. width: 7px;
  170. height: 7px;
  171. border-radius: 0;
  172. }
  173.  
  174. .guilds-wrapper .guilds .guild.unread:before {
  175. border-radius: 0;
  176. }
  177.  
  178. /* CONNECTED VOICE */
  179.  
  180. #rtc-connection {
  181. background-color: var(--second-color);
  182. border-right: 2px solid rgba(0, 0, 0, 0.2);
  183. }
  184.  
  185. #rtc-connection .btn-group {
  186. border: none;
  187. }
  188.  
  189. #rtc-connection .btn-info {
  190. display: none;
  191. }
  192.  
  193. #rtc-connection .btn-disconnect {
  194. background-color: var(--second-color);
  195. box-shadow: none;
  196. border: none;
  197. }
  198.  
  199.  
  200.  
  201. /* TEXT/VOICE CHANNEL */
  202.  
  203. .nameDefault-Lnjrwm {
  204. color: var(--thirdText-color);
  205. }
  206.  
  207. .wrapper-fDmxzK {
  208. height: 28px;
  209. }
  210.  
  211. .avatarDefault-3jtQoc, .avatarSpeaking-3teDH6 {
  212. border-radius: 0;
  213. }
  214.  
  215. .nameDefault-1I0lx8 {
  216. color: var(--thirdText-color);
  217. font-size: 14px;
  218. }
  219.  
  220. .content-2mSKOj {
  221. background-color: var(--third-color);
  222. border-radius: 0;
  223. }
  224.  
  225. .nameDefaultText-QoumjC, .nameDefaultVoice-1swZoh, .nameLockedText-2fGz07, .nameLockedVoice-wNOMNa {
  226. color: var(--fourthText-color);
  227. font-size: 14px;
  228. }
  229.  
  230. .header-1tSljs {
  231. background-color: var(--second-color);
  232. margin-top: 2px;
  233. border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  234. }
  235.  
  236. .channels-wrap {
  237. background-color: var(--second-color);
  238. }
  239.  
  240. .container-iksrDt {
  241. background: none;
  242. }
  243.  
  244. .container-3lnMWU {
  245. background: none;
  246. border-bottom: none;
  247. }
  248.  
  249. .container-RYiLUQ {
  250. background-color: var(--third-color);
  251. }
  252.  
  253. /* SERVER TITLE */
  254. .guild-header header {
  255. background-color: var(--second-color);
  256. height: 57px;
  257. }
  258.  
  259. /* SERVER TITLE HOVER */
  260. .guild-header header:hover {
  261. background-color: var(--first-color);
  262. }
  263.  
  264. /* CHANNEL LIST */
  265. .scroller.guild-channels {
  266. background-color: var(--third-color);
  267. border: 2px solid rgba(0, 0, 0, 0.1);
  268. }
  269.  
  270. /* SERVER TITLE SHADOW */
  271. .guild-header header {
  272. box-shadow: none;
  273. }
  274.  
  275. /* ACTIVE TEXT CHANNEL BAR */
  276. .guild-channels .channel-text.selected:before {
  277. display: none;
  278. }
  279.  
  280. /* TEXT CHANNEL LIST ITEMS */
  281. .guild-channels .channel-text a {
  282. padding: 4px 10px 4px 19px;
  283. }
  284.  
  285. /* TEXT CHANNEL LIST ITEMS SELECTED */
  286. .guild-channels .channel-text.selected a {
  287. background-color: var(--fourth-color);
  288. }
  289.  
  290. .guild-channels .channel-text:hover.channel-muted:before, .guild-channels .channel-text:hover:not(.unread):before {
  291. display: none;
  292. }
  293.  
  294. /* SHOW MUTED TEXT CHANNELS */
  295. .guild-channels .toggle-muted-text-channels a {
  296. text-decoration: none;
  297. }
  298.  
  299. /* VOICE CHANNEL MARGIN */
  300. .guild-channels .channel-voice-states {
  301. margin-top: 3px;
  302. }
  303.  
  304. /* VOICE CHANNEL LIST */
  305. .guild-channels .channel-voice {
  306. padding-top: 4px;
  307. padding-bottom: 4px;
  308. }
  309.  
  310. /* NEW UNREAD MESSAGE IN CHANNEL */
  311. .guild-channels .channel-text.unread:not(.selected):not(.channel-muted):before {
  312. height: 4px;
  313. border-radius: 0px;
  314. }
  315.  
  316. /* TEXT/VOICE CHANNEL WIDTH */
  317. .channels-wrap {
  318. width: 220px;
  319. }
  320.  
  321. .guild-channels .channel .channel-name {
  322. font-weight: 400;
  323. }
  324.  
  325. .guild-channels .channel-text:hover {
  326. background: var(--fifth-color);
  327. }
  328.  
  329. /* SQUARE AVATARS */
  330. .avatar-large, .avatar-profile, .avatar-small, .avatar-xlarge, .avatar-xsmall, .avatar-xxlarge {
  331. border-radius: 0px;
  332. }
  333.  
  334. /* PRIVATE MESSAGES */
  335.  
  336. .private-channels .scroller {
  337. background-color: var(--third-color);
  338. border: 2px solid rgba(0, 0, 0, 0.1);
  339. border-radius: 0px;
  340. }
  341.  
  342. .private-channels .search-bar {
  343. background-color: var(--second-color);
  344. border-radius: 0px;
  345. border: none;
  346. }
  347.  
  348. .private-channels .channel.selected a {
  349. background-color: var(--fourth-color);
  350. }
  351.  
  352. .private-channels .channel.selected:before {
  353. display: none;
  354. }
  355.  
  356. .private-channels .channel .close {
  357. margin-right: 10px;
  358. }
  359.  
  360. .private-channels .channel .icon-friends {
  361. border-radius: 0;
  362. background-color: var(--third-color);
  363. }
  364.  
  365. .private-channels .channel:hover .channel-activity, .private-channels .channel:hover a {
  366. background-color: var(--fifth-color);
  367. }
  368.  
  369. .private-channels .channel:hover:before {
  370. display: none;
  371. }
  372.  
  373. .private-channels .channel:hover .icon-friends {
  374. background-color: var(--fifth-color);
  375. }
  376.  
  377. .private-channels .channel.selected .icon-friends {
  378. background-color: transparent;
  379. }
  380.  
  381. .search-bar .search-bar-inner, .search-bar input {
  382. border-radius: 0;
  383. }
  384.  
  385. /* SCROLLBARS */
  386.  
  387. /* CHANNEL + MEMBER LIST SCROLLBAR */
  388. .scroller-wrap.dark .scroller::-webkit-scrollbar-thumb, .scroller-wrap.fade.scroller::-webkit-scrollbar-track-piece {
  389. background-color: var(--scrollbar-color);
  390. }
  391.  
  392. /* SQUARE SCROLLBARS */
  393. .scroller-wrap .scroller::-webkit-scrollbar-thumb, .scroller-wrap .scroller::-webkit-scrollbar-track-piece {
  394. border-radius: 0px;
  395. }
  396.  
  397. /* MAIN CHAT SCROLLBAR */
  398. .theme-dark .friends-table .scroller-wrap ::-webkit-scrollbar-thumb, .theme-dark .messages-wrapper .scroller-wrap ::-webkit-scrollbar-thumb {
  399. background-color: var(--scrollbar-color);
  400. border: none;
  401. }
  402.  
  403. /* MAIN CHAT SCROLLBAR BACKGROUND */
  404. .theme-dark .friends-table .scroller-wrap ::-webkit-scrollbar-track-piece, .theme-dark .messages-wrapper .scroller-wrap ::-webkit-scrollbar-track-piece {
  405. background-color: var(--first-color);
  406. border: none;
  407. }
  408.  
  409. /* FRIENDS LIST */
  410.  
  411. .private-channels {
  412. background-color: var(--third-color);
  413. }
  414.  
  415. #friends .friends-table .friends-table-body {
  416. background-color: var(--first-color);
  417. }
  418.  
  419. .theme-dark #friends {
  420. background-color: var(--first-color);
  421. }
  422.  
  423. .theme-dark #friends .friends-table .friends-table-header {
  424. background-color: var(--first-color);
  425. box-shadow: none;
  426. border: none;
  427. }
  428.  
  429. .theme-dark #friends .friends-header {
  430. background-color: var(--second-color);
  431. box-shadow: none;
  432. border-bottom: 2px solid var(--third-color);
  433. }
  434.  
  435. .theme-dark .friends-table .messages .divider:not(.red) div, .theme-dark .messages-wrapper .messages .divider:not(.red) div {
  436. background-color: var(--fifthText-color);
  437. }
  438.  
  439. .theme-dark .friends-table .messages .divider:not(.red) span, .theme-dark .messages-wrapper .messages .divider:not(.red) span {
  440. background-color: var(--first-color);
  441. border-radius: 0px;
  442. color: rgba(100, 100, 100, 1.0);
  443. }
  444.  
  445. .theme-dark #friends .friends-header .tab-bar .tab-bar-item.tab-bar-item-primary,
  446. .theme-dark #friends .friends-header .tab-bar .tab-bar-item.selected,
  447. .theme-dark #friends .friends-header .tab-bar .tab-bar-item:hover:not(.selected) {
  448. border-radius: 0;
  449. }
  450.  
  451. #friends .friends-table {
  452. z-index: 10;
  453. }
  454.  
  455. .avatar-small .status {
  456. border-radius: 0;
  457. width: 7px;
  458. height: 7px;
  459. border-color: var(--third-color);
  460. }
  461.  
  462. /* MISC BUTTONS */
  463.  
  464. /* HEADER TOOLBAR */
  465. .header-toolbar {
  466. position: absolute;
  467. bottom: 0;
  468. right: 0;
  469. margin-bottom: 20px;
  470. margin-right: -80px;
  471. z-index: 10;
  472. background-color: var(--second-color);
  473. padding-left: 22px;
  474. padding-top: 20px;
  475. border-top: 2px solid;
  476. border-color: rgba(24, 24, 24, 1.0);
  477. }
  478.  
  479. .win-buttons {
  480. margin-right: 80px;
  481. }
  482.  
  483. .header-toolbar .toolbar-badge {
  484. border-radius: 0;
  485. width: 7px;
  486. height: 7px;
  487. }
  488.  
  489. .theme-dark .header-toolbar .toolbar-badge {
  490. border-color: var(--second-color);
  491. }
  492.  
  493. /* TOP SEARCH BAR */
  494.  
  495. .search {
  496. position: fixed;
  497. top: 32px;
  498. right: 240px;
  499. }
  500.  
  501. .theme-dark .search .search-bar {
  502. background-color: var(--fourth-color);
  503. }
  504.  
  505. .search .search-bar {
  506. border-radius: 0;
  507. }
  508.  
  509. .popout.popout-bottom, .popout.popout-bottom-right {
  510. border-radius: 0;
  511. background-color: var(--second-color);
  512. border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  513. }
  514.  
  515. .search-popout .option.selected {
  516. background-color: var(--fourth-color);
  517. border-radius: 0;
  518. }
  519.  
  520. .search-popout .option:after, .search-popout .option.selected:after {
  521. background: none;
  522. }
  523.  
  524. .search-popout .results-group:before {
  525. display: none;
  526. }
  527.  
  528. .search-popout .search-query {
  529. border: none;
  530. }
  531.  
  532. .theme-dark .search-results-wrap {
  533. background-color: var(--third-color);
  534. border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  535. border-left: 2px solid rgba(0, 0, 0, 0.1);
  536. height: calc(100% - 72px) !important;
  537. z-index: 10;
  538. }
  539.  
  540. .theme-dark .search-results-wrap .search-result:before, .theme-dark .search-results-wrap .search-result:after {
  541. background: transparent;
  542. }
  543.  
  544. .theme-dark .search-results-wrap .search-result .hit {
  545. background-color: var(--first-color);
  546. box-shadow: none;
  547. border-radius: 0;
  548. }
  549.  
  550. .theme-dark .search-results-wrap .search-result .search-result-message.hit, .theme-dark .search-results-wrap .search-result.expanded {
  551. border: none;
  552. }
  553.  
  554. .theme-dark .search-results-wrap .search-header {
  555. background: var(--second-color);
  556. }
  557.  
  558. .theme-dark .search-results-wrap .channel-separator .channel-name {
  559. background: transparent;
  560. }
  561.  
  562. .theme-dark .search-results-wrap .channel-separator:before {
  563. display: none;
  564. }
  565.  
  566. .theme-dark .search-results-wrap .action-buttons .jump-button {
  567. background-color: transparent;
  568. }
  569.  
  570. .theme-dark .search-results-wrap .scroller-wrap .scroller::-webkit-scrollbar-thumb {
  571. background-color: var(--scrollbar-color) !important;
  572. border: none !important;
  573. }
  574.  
  575. .theme-dark .search-results-wrap .scroller-wrap .scroller::-webkit-scrollbar-track-piece{
  576. background-color: var(--third-color) !important;
  577. }
  578.  
  579. .react-datepicker {
  580. border: none;
  581. border-radius: 0;
  582. background-color: var(--second-color);
  583. }
  584.  
  585. .search-popout .date-picker {
  586. border: none;
  587. }
  588.  
  589. .react-datepicker .react-datepicker__current-month,
  590. .react-datepicker .react-datepicker__day-names,
  591. .react-datepicker .react-datepicker__header {
  592. background-color: var(--second-color);
  593. border: none;
  594. }
  595.  
  596. .react-datepicker .react-datepicker__day--disabled, .react-datepicker .react-datepicker__day--outside-month {
  597. background-color: var(--fourth-color);
  598. }
  599.  
  600. .react-datepicker .react-datepicker__day.react-datepicker__day--today:after {
  601. background-color: var(--firstText-color);
  602. }
  603.  
  604. .search-popout .date-picker .date-picker-hint .hint-value {
  605. border-radius: 0;
  606. background-color: var(--fifthText-color);
  607. }
  608.  
  609. .react-datepicker .react-datepicker__navigation.react-datepicker__navigation--next, .react-datepicker .react-datepicker__navigation.react-datepicker__navigation--previous {
  610. border: none;
  611. }
  612.  
  613. .search-popout .date-picker .date-picker-hint {
  614. border: none;
  615. }
  616.  
  617. .react-datepicker .react-datepicker__day.react-datepicker__day--selected:hover, .react-datepicker .react-datepicker__day:hover {
  618. background-color: var(--firstText-color);
  619. color: var(--second-color);
  620. }
  621.  
  622. /* POPOUT PINNED MESSAGES */
  623.  
  624. .popout.popout-bottom-right.no-arrow {
  625. margin-top: 57px !important;
  626. height: 100%;
  627. bottom: auto !important;
  628. top: auto !important;
  629. right: 0;
  630. left: auto !important;
  631. transform: none !important;
  632.  
  633. background-color: var(--second-color);
  634. border: 2px solid rgba(0, 0, 0, 0.2);
  635. border-radius: none;
  636. box-shadow: none;
  637. z-index: 0;
  638. }
  639.  
  640. .popout.popout-bottom-right.no-arrow .messages-popout-wrap {
  641. height: calc(100% - 130px) !important;
  642. }
  643.  
  644.  
  645. .theme-dark .themed-popout .header {
  646. background-color: var(--second-color);
  647. border: none;
  648. border-radius: none;
  649. box-shadow: none;
  650. }
  651.  
  652. .messages-popout {
  653. background-color: var(--second-color);
  654. border: none;
  655. border-radius: 0;
  656. box-shadow: none;
  657. }
  658.  
  659. .theme-dark .themed-popout {
  660. border: none;
  661. border-radius: none;
  662. box-shadow: none;
  663. }
  664.  
  665. .theme-dark .messages-popout-wrap .messages-popout .message-group {
  666. background-color: var(--second-color);
  667. border: none;
  668. border-radius: 0;
  669. box-shadow: none;
  670. }
  671.  
  672. .messages-popout .message-group .action-buttons {
  673. display: none;
  674. }
  675.  
  676. .theme-dark .themed-popout .footer {
  677. background-color: var(--second-color);
  678. }
  679.  
  680. .protip.popout-footer {
  681. margin-bottom: 25px;
  682. }
  683.  
  684. /* TOOLTIPS */
  685.  
  686. .tooltip {
  687. display: none;
  688. background-color: var(--fifth-color);
  689. color: white;
  690. border-radius: 0;
  691. }
  692.  
  693. .tooltip:after {
  694. display: none;
  695. }
  696.  
  697. .tooltip.tooltip-bottom {
  698. margin-top: -60px;
  699. }
  700.  
  701. /* POPOUT ONLINE STATUS */
  702.  
  703. .popout-menu {
  704. border-top: 2px solid var(--fourth-color);
  705. border-radius: 0;
  706. margin-top: 30px;
  707. margin-right: 0;
  708. }
  709.  
  710. .status-picker .popout-menu-item {
  711. background-color: var(--second-color);
  712. margin-right: 0;
  713. }
  714.  
  715. .popout-menu .popout-menu-separator {
  716. display: none;
  717. }
  718.  
  719. .popout.popout-invert.popout-top, .popout.popout-invert.popout-top-right, .popout.popout-top, .popout.popout-top-right {
  720. margin-left: -2px;
  721. margin-top: 0;
  722. margin-right: 0;
  723. border: none;
  724. box-shadow: none;
  725. }
  726.  
  727. .popout-menu .popout-menu-item:hover {
  728. background-color: var(--fifth-color);
  729. }
  730.  
  731. /* EDIT CHAT MESSAGE POPUP */
  732.  
  733. .option-popout {
  734. border: none;
  735. border-radius: 0;
  736. background-color: var(--fifth-color);
  737. }
  738.  
  739. .option-popout .btn-item {
  740. color: var(--thirdText-color);
  741. }
  742.  
  743. .option-popout .btn-item:hover {
  744. color: var(--firstText-color);
  745. }
  746.  
  747. /* CHAT WINDOW */
  748.  
  749. /* CHANNEL TITLE BAR */
  750. .theme-dark .chat .title-wrap {
  751. background-color: var(--second-color);
  752. box-shadow: none;
  753. border: none;
  754. }
  755.  
  756. /* EMBED MESSAGES */
  757. .theme-dark .message-group .embed {
  758. background-color: var(--third-color);
  759. border: 1px solid rgba(0, 0, 0, 0.3);
  760. border-radius: 0px;
  761. margin-top: 7px;
  762. margin-bottom: 7px;
  763. }
  764.  
  765. /* EMBED MESSAGES LEFT BAR */
  766. .theme-dark .message-group .embed-wrapper .embed-color-pill {
  767. display: none;
  768. }
  769.  
  770. /* TYPING */
  771. .theme-dark .chat form .typing {
  772. display: none;
  773. }
  774.  
  775. /* EMOJI BUTTON */
  776. .channel-textarea-emoji {
  777. display: none;
  778. }
  779.  
  780. /* UPLOAD ICON */
  781. .channel-textarea-upload {
  782. border: none;
  783. }
  784.  
  785. .theme-dark .channel-textarea-inner .channel-textarea-upload:hover {
  786. border: none;
  787. background-color: hsla(0, 0%, 100%, 0.0);
  788. }
  789.  
  790. /* MESSAGE BOX INNER */
  791. .theme-dark .channel-textarea-inner {
  792. background-color: transparent;
  793. border: none;
  794. box-shadow: none;
  795. margin-top: -7px;
  796. margin-right: 0px;
  797. width: auto;
  798. }
  799.  
  800. /* NEW UNREAD MESSAGES BAR */
  801. .chat .new-messages-bar {
  802. background-color: var(--second-color);
  803. border-bottom: 2px solid rgba(25, 25, 25, 1.0);
  804. border-radius: 0px;
  805. }
  806.  
  807. /* NEW UNREAD MESSAGES BAR */
  808. .chat .new-messages-bar:hover {
  809. background-color: var(--fourth-color);
  810. }
  811.  
  812. /* NEW UNREAD MESSAGES BAR TEXT */
  813. .chat .new-messages-bar button:last-child {
  814. color: white;
  815. }
  816.  
  817. .theme-dark .channel-textarea-inner textarea {
  818. background-color: transparent;
  819. width: 100%;
  820. }
  821.  
  822. /* MESSAGE WINDOW */
  823. .chat .messages {
  824. background-color: var(--first-color);
  825. border-top: 2px solid rgba(0, 0, 0, 0.3);
  826. margin-bottom: 70px;
  827. }
  828.  
  829. .theme-dark .message-group:not(.has-divider) {
  830. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  831. }
  832.  
  833. /* MARKUP CODE */
  834. .theme-dark .message-group .comment .markup code.inline, .theme-dark .message-group .comment .markup pre code {
  835. border-radius: 0px;
  836. border: none;
  837. background-color: var(--fourth-color);
  838. color: var(--secondText-color);
  839. }
  840.  
  841. .messages-wrapper {
  842. width: 100%;
  843. }
  844.  
  845.  
  846. .theme-dark .chat form {
  847. position: absolute;
  848. bottom: 0px;
  849. background-color: var(--second-color);
  850. padding: 0px;
  851. margin: 0px;
  852. height: 70px;
  853. border-radius: 0;
  854. border: none;
  855. width: 100%;
  856. border-top: 2px solid rgba(0, 0, 0, 0.2);
  857. box-shadow: none;
  858. z-index: 5;
  859. }
  860.  
  861.  
  862. .theme-dark .chat .title-wrap .topic {
  863. margin-right: 370px;
  864. }
  865.  
  866. /* MENTIONED LEFT BAR */
  867. .message-group .mentioned .message-text:after {
  868. display: none;
  869. }
  870.  
  871. .theme-dark .message-group .mentioned .message-text {
  872. background-color: var(--third-color);
  873. padding: 3px 0px 8px 10px;
  874. border: 1px solid rgba(0, 0, 0, 0.3);
  875. border-radius: 0;
  876. margin-top: 7px;
  877. }
  878.  
  879. .mention {
  880. color: var(--firstText-color);
  881. background-color: rgba(0, 0, 0, 0.3);
  882. }
  883.  
  884. .theme-dark .message-group .comment .markup .mention {
  885. background-color: var(--first-color);
  886. }
  887.  
  888. .theme-dark .message-group .comment .markup .mention:hover {
  889. background-color: var(--first-color);
  890. }
  891.  
  892. .theme-dark .chat {
  893. background-color: var(--second-color);
  894. }
  895.  
  896. .chat .welcome-message h1, .chat .welcome-message p {
  897. color: var(--thirdText-color);
  898. }
  899.  
  900. .message-group .comment .markup pre {
  901. border: none;
  902. border-radius: 0;
  903. }
  904.  
  905. /* MEMBER LIST */
  906.  
  907. .theme-dark .channel-members {
  908. background-color: var(--third-color);
  909. }
  910.  
  911. .scroller.channel-members {
  912. background-color: var(--third-color);
  913. border-left: 2px solid rgba(0, 0, 0, 0.1);
  914. border-top: 2px solid rgba(0, 0, 0, 0.1);
  915. }
  916.  
  917. /* MEMBERS LIST */
  918. .theme-dark .channel-members .member {
  919. padding: 3px 0px 3px 30px;
  920. }
  921.  
  922. .theme-dark .channel-members .member.popout-open, .theme-dark .channel-members .member:hover {
  923. background: var(--fifth-color);
  924. }
  925.  
  926. .channel-members-wrap {
  927. margin-bottom: 70px;
  928. }
  929.  
  930. /* STATUS ICON */
  931. .theme-dark .channel-members .avatar-small .status {
  932. width: 7px;
  933. height: 7px;
  934. border-radius: 0;
  935. border: 2px solid var(--third-color);
  936. }
  937.  
  938. .channel-members-loading {
  939. display: none;
  940. }
  941.  
  942. /* BACKGROUND COLOR */
  943. .theme-dark .chat>.content, .theme-dark .friends-table, .theme-dark .messages-wrapper {
  944. background-color: var(--second-color);
  945. }
  946.  
  947. /* RIGHT-CLICK USER POPUP */
  948.  
  949. .theme-dark.context-menu, .theme-dark.context-menu .context-menu {
  950. background-color: var(--fourth-color);
  951. border: 1.5px solid rgba(0, 0, 0, 0.2);
  952. border-radius: 0;
  953. box-shadow: none;
  954. }
  955.  
  956. .theme-dark.context-menu .item:hover {
  957. background-color: var(--fifth-color);
  958. border-radius: 0;
  959. }
  960.  
  961. .theme-dark.context-menu .item-subMenu {
  962. background-color: var(--fourth-color);
  963. }
  964.  
  965. .theme-dark.context-menu .slider .slider-bar, .slider-bar-fill {
  966. border-radius: 0;
  967. }
  968.  
  969. .context-menu .slider .slider-handle {
  970. border-radius: 0;
  971. border: 2px solid var(--fourth-color)
  972. }
  973.  
  974. .slider-bar-fill {
  975. background-color: var(--secondText-color);
  976. }
  977.  
  978. /* SERVER SETTINGS POPUP */
  979.  
  980. .popout.popout-bottom, .popout.popout-bottom-right {
  981. margin: 0;
  982. box-shadow: none;
  983. border-top: 2px solid rgba(0, 0, 0, 0.0);
  984. border-right: 2px solid rgba(0, 0, 0, 0.0);
  985. border-left: 2px solid rgba(0, 0, 0, 0.0);
  986. border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  987. }
  988.  
  989. .popout-menu {
  990. background-color: var(--second-color);
  991. margin-top: 0px;
  992. box-shadow: none;
  993. border: none;
  994. }
  995.  
  996. .popout-menu .popout-menu-item {
  997. box-shadow: none;
  998. border: none;
  999. color: var(--thirdText-color);
  1000. }
  1001.  
  1002. .popout-menu .popout-menu-item:hover {
  1003. box-shadow: none;
  1004. border: none;
  1005. color: var(--firstText-color);
  1006. }
  1007.  
  1008. .popout-menu .popout-menu-item.invite {
  1009. color: var(--thirdText-color);
  1010. }
  1011.  
  1012. .guild-header header:hover, .guild-header.popout-open header {
  1013. background-color: var(--second-color);
  1014. }
  1015.  
  1016. .popout-menu .popout-menu-item.invite:hover {
  1017. color: var(--firstText-color);
  1018. }
  1019.  
  1020. /* USER POPOUT */
  1021.  
  1022. .user-popout .body, .user-popout .footer {
  1023. background-color: var(--fourth-color);
  1024. border-radius: 0;
  1025. border: none;
  1026.  
  1027. }
  1028.  
  1029. .member-roles .member-role {
  1030. border-radius: 0;
  1031. border: none;
  1032. }
  1033.  
  1034. .quick-message {
  1035. border-radius: 0;
  1036. background-color: var(--fifth-color);
  1037. border: none;
  1038. color: var(--secondText-color);
  1039.  
  1040. }
  1041.  
  1042. .user-popout .header {
  1043. background: var(--fourth-color);
  1044. border-radius: 0;
  1045. }
  1046.  
  1047. .avatar-popout {
  1048. border-radius: 0;
  1049. }
  1050.  
  1051. .user-popout .avatar-wrapper .avatar-popout {
  1052. border: 1px solid rgba(0, 0, 0, 0.3);
  1053. }
  1054.  
  1055. .user-popout {
  1056. border: 1px solid rgba(0, 0, 0, 0.3);
  1057. border-radius: 0;
  1058. }
  1059.  
  1060. .user-popout .avatar-wrapper .avatar-popout .status {
  1061. border-radius: 0;
  1062. }
  1063.  
  1064. .user-popout .avatar-wrapper .avatar-hint {
  1065. border-radius: 0;
  1066. margin: 0;
  1067. }
  1068.  
  1069. /* USER PROFILE */
  1070.  
  1071. #user-profile-modal .header:after, #user-profile-modal .tab-bar-container, #user-profile-modal .scroller {
  1072. background: var(--second-color);
  1073. border: none;
  1074. }
  1075.  
  1076. #user-profile-modal {
  1077. border-radius: 0;
  1078. border: 1px solid rgba(0, 0, 0, 0.3);
  1079. }
  1080.  
  1081. #user-profile-modal .guilds .section .connected-accounts .connected-account {
  1082. border: none;
  1083. }
  1084.  
  1085. #user-profile-modal .guilds .section+.section {
  1086. border: none;
  1087. }
  1088.  
  1089. #user-profile-modal .header .header-info .header-info-inner .discord-tag .username, #user-profile-modal .guilds .section .connected-accounts .connected-account .connected-account-name-inner .connected-account-name {
  1090. color: var(--secondText-color);
  1091. }
  1092.  
  1093. #user-profile-modal .header .header-info .header-info-inner .discord-tag .discriminator {
  1094. color: var(--fourthText-color);
  1095. margin-left: 7px;
  1096. }
  1097.  
  1098. #user-profile-modal .guilds .guild .guild-name {
  1099. color: var(--fourthText-color);
  1100. }
  1101.  
  1102. #user-profile-modal .guilds .guild:hover {
  1103. background: var(--fourth-color);
  1104. }
  1105.  
  1106. .scroller-wrap .scroller::-webkit-scrollbar-thumb, .scroller-wrap .scroller::-webkit-scrollbar-track-piece {
  1107. background-color: var(--fifthText-color);
  1108. border: none;
  1109. }
  1110.  
  1111. #user-profile-modal .empty {
  1112. background-color: var(--second-color);
  1113. }
  1114.  
  1115. #user-profile-modal .tab-bar .tab-bar-item.selected, #user-profile-modal .tab-bar .tab-bar-item {
  1116. color: var(--fourthText-color);
  1117. border-bottom-color: var(--fourthText-color);
  1118. }
  1119.  
  1120. #user-profile-modal .actions .btn.add-friend {
  1121. border-radius: 0;
  1122. }
  1123.  
  1124. #user-profile-modal .guilds .section .section-header {
  1125. color: var(--fourthText-color);
  1126. }
  1127.  
  1128. /* SETTINGS */
  1129.  
  1130. .settings .settings-header {
  1131. border-radius: 0;
  1132. }
  1133.  
  1134. .tab-bar.SIDE {
  1135. background-color: var(--fourth-color);
  1136. }
  1137.  
  1138. .tab-bar.SIDE .tab-bar-item:before {
  1139. border-left: 3px solid rgba(200, 200, 200, 1.0);
  1140. }
  1141.  
  1142. .settings .settings-inner .settings-panel {
  1143. background-color: var(--second-color);
  1144. }
  1145.  
  1146. .form .control-group input[type=email], .form .control-group input[type=number], .form .control-group input[type=password], .form .control-group input[type=text], .form .control-group textarea {
  1147. background-color: var(--fourth-color);
  1148. border: none;
  1149. border-radius: 0;
  1150. }
  1151.  
  1152. .form .control-group input[type=email], .form .control-group input[type=number], .form .control-group input[type=password], .form .control-group input[type=text], .form .control-group textarea {
  1153. color: var(--fourthText-color);
  1154. padding: 0px 0px 0px 7px;
  1155. }
  1156.  
  1157. .user-settings-modal a, .form .control-group label a {
  1158. color: var(--thirdText-color);
  1159. }
  1160.  
  1161. .form .control-group label {
  1162. color: var(--fourthText-color);
  1163. }
  1164.  
  1165. .avatar-uploader .avatar-uploader-inner {
  1166. border: 5px solid rgba(25, 25, 25, 1.0);
  1167. border-radius: 0 !important;
  1168. }
  1169.  
  1170. .settings .settings-actions {
  1171. background-color: var(--second-color);
  1172. border-top: 1px solid rgba(0, 0, 0, 0.3);
  1173. border-radius: 0;
  1174. }
  1175.  
  1176. .form .btn-primary {
  1177. border-radius: 0;
  1178. }
  1179.  
  1180. .settings .settings-inner:first-child {
  1181. border-radius: 0;
  1182. }
  1183.  
  1184. .tab-bar.SIDE {
  1185. margin-right: -17px;
  1186. }
  1187.  
  1188. .settings-connections-wrapper {
  1189. background-color: var(--second-color);
  1190. }
  1191.  
  1192. .tab-bar.TOP .tab-bar-item.selected {
  1193. color: var(--firstText-color);
  1194. border-bottom: var(--firstText-color);
  1195. }
  1196.  
  1197. .tab-bar.TOP .tab-bar-item {
  1198. color: var(--thirdText-color);
  1199. }
  1200.  
  1201. .tab-bar.TOP {
  1202. border-color: var(--fourthText-color);
  1203. }
  1204.  
  1205. .tab-bar.TOP .tab-bar-item:hover {
  1206. border-color: var(--secondText-color);
  1207. }
  1208.  
  1209. .settings-connections-wrapper .user-settings-modal-connections .user-settings-modal-accounts-list h3,
  1210. .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,
  1211. .settings-connections-wrapper .user-settings-modal-connections .user-settings-modal-accounts-list .checkbox {
  1212. color: var(--thirdText-color);
  1213. }
  1214.  
  1215. .connect-account-btn .connect-account-btn-inner {
  1216. border-radius: 0;
  1217. }
  1218.  
  1219. .checkbox .checkbox-inner span {
  1220. border-radius: 0;
  1221. }
  1222.  
  1223. .checkbox .checkbox-inner input[type=checkbox]:checked+span {
  1224. background-color: var(--fourth-color);
  1225. border-color: var(--secondText-color);
  1226. }
  1227.  
  1228. .settings-connections-wrapper .user-settings-modal-connections .user-settings-modal-connections-list .connection {
  1229. border-radius: 0;
  1230. }
  1231.  
  1232. .settings-connections-wrapper .user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-header .btn-delete {
  1233. border-radius: 0;
  1234. }
  1235.  
  1236. .settings-connections-wrapper .user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations .integration {
  1237. border-radius: 0;
  1238. }
  1239.  
  1240. .settings-connections-wrapper .user-settings-modal-connections .user-settings-modal-connections-list {
  1241. box-shadow: 0 -1px rgba(20, 20, 20, 1.0);
  1242. }
  1243.  
  1244. .checkbox .checkbox-inner+span {
  1245. color: var(--secondText-color);
  1246. }
  1247.  
  1248. .slider-handle {
  1249. border-radius: 0;
  1250. border: 1px solid;
  1251. }
  1252.  
  1253. .slider-bar {
  1254. border-radius: 0;
  1255. }
  1256.  
  1257. .Select, .Select div, .Select input, .Select span, .Select-loading, .Select-menu-outer, .Select-option {
  1258. border-radius: 0;
  1259. }
  1260.  
  1261. .form .radio-group .radio {
  1262. color: var(--secondText-color);
  1263. }
  1264.  
  1265. .radio .radio-inner, .radio .radio-inner span:after {
  1266. border-radius: 0;
  1267. }
  1268.  
  1269. .user-settings-modal .settings-wrapper {
  1270. background-color: var(--second-color);
  1271. }
  1272.  
  1273. .settings .settings-inner .settings-panel-header {
  1274. border: none;
  1275. }
  1276.  
  1277. .user-settings-modal .account-warning {
  1278. border-radius: 0;
  1279. background-color: transparent;
  1280. }
  1281.  
  1282. div.control-group .shortcut-recorder input[type=text] {
  1283. border-radius: 0;
  1284. color: white;
  1285. }
  1286.  
  1287. .form hr {
  1288. border-bottom-color: var(--fourthText-color);
  1289. }
  1290.  
  1291. .now-playing {
  1292. border-radius: 0;
  1293. }
  1294.  
  1295. .user-settings-modal-games .games-table {
  1296. background-color: var(--second-color);
  1297. }
  1298.  
  1299. .user-settings-modal-games {
  1300. border: none;
  1301. }
  1302.  
  1303. .user-settings-modal-games .games-table .games-row .item-game .game-input {
  1304. color: var(--secondText-color);
  1305. }
  1306.  
  1307. .user-settings-modal-games .games-table .games-row .item-game .last-played {
  1308. color: var(--fourthText-color);
  1309. }
  1310.  
  1311. .user-settings-modal-games .games-table .games-row .item-game .game-name {
  1312. color: var(--firstText-color);
  1313. }
  1314.  
  1315. .user-settings-modal-games .games-table .games-row .item-game .game-input:focus, .user-settings-modal-games .games-table .games-row .item-game .game-input:hover {
  1316. border-radius: 0;
  1317. }
  1318.  
  1319. #overlay-explanation {
  1320. border-radius: 0;
  1321. border: 2px solid rgba(255, 100, 0, 1.0);
  1322. background-color: transparent;
  1323. }
  1324.  
  1325. .user-settings-modal-security .btn-ghost {
  1326. border-radius: 0;
  1327. }
  1328.  
  1329. /* AUTO COMPLETE MENTION */
  1330.  
  1331. .theme-dark .channel-textarea-autocomplete-inner {
  1332. background-color: var(--second-color);
  1333. border-radius: 0;
  1334. border-color: rgba(0, 0, 0, 0.3);
  1335. }
  1336.  
  1337. .theme-dark .channel-textarea-autocomplete-inner header {
  1338. background-color: var(--second-color);
  1339. border: none;
  1340. }
  1341.  
  1342. .theme-dark .channel-textarea-autocomplete-inner ul li.active {
  1343. background-color: var(--fourth-color);
  1344. }
  1345.  
  1346. .theme-dark .channel-textarea-autocomplete-inner:after {
  1347. display: none;
  1348. }
  1349.  
  1350. /* HELP POPUP */
  1351.  
  1352. .need-help-modal .header, .need-help-modal .form-inner .failed,
  1353. .need-help-modal .form-inner.loading,
  1354. .need-help-modal .footer {
  1355. border-radius: 0;
  1356. background-color: var(--second-color);
  1357. border: none;
  1358. }
  1359.  
  1360. .need-help-modal .header input[type=text] {
  1361. border: none;
  1362. box-shadow: none;
  1363. background-color: var(--fourth-color);
  1364. }
  1365.  
  1366. /* MODAL */
  1367. .markdown-modal {
  1368. border-radius: 0;
  1369. background-color: var(--first-color);
  1370. }
  1371.  
  1372. .markdown-modal .markdown-modal-header {
  1373. border: none;
  1374. }
  1375.  
  1376. .markdown-modal .scroller-wrap .scroller {
  1377. color: var(--thirdText-color);
  1378. }
  1379.  
  1380. .markdown-modal .markdown-modal-header {
  1381. color: var(--thirdText-color);
  1382. }
  1383.  
  1384. .theme-dark .chat .title-wrap .topic .mention {
  1385. background-color: transparent;
  1386. }
  1387.  
  1388. .theme-dark .chat .title-wrap .topic .mention:hover {
  1389. background-color: rgba(0, 0, 0, 0.3);
  1390. }
  1391.  
  1392. /* BLOCKED MESSAGES */
  1393.  
  1394. .theme-dark .friends-table .messages .message-group-blocked .message-group-blocked-btn, .theme-dark .messages-wrapper .messages .message-group-blocked .message-group-blocked-btn {
  1395. background-color: var(--second-color);
  1396. border: 1px solid rgba(0, 0, 0, 0.3);
  1397. }
  1398.  
  1399. .theme-dark .friends-table .messages .message-group-blocked, .theme-dark .messages-wrapper .messages .message-group-blocked {
  1400. border: none;
  1401. }
  1402.  
  1403. .theme-dark .friends-table .messages .message-group-blocked .message-group-blocked-btn:hover, .theme-dark .messages-wrapper .messages .message-group-blocked .message-group-blocked-btn:hover {
  1404. background-color: var(--fourth-color);
  1405. border: 1px solid rgba(0, 0, 0, 0.3);
  1406. }
  1407.  
  1408. .theme-dark .message-group:not(.has-divider), {
  1409. background-color: none;
  1410. border: none;
  1411. }
  1412.  
  1413. .theme-dark .friends-table .messages .message-group-blocked.revealed, .theme-dark .messages-wrapper .messages .message-group-blocked.revealed {
  1414. background-color: var(--second-color);
  1415. }
  1416.  
  1417.  
  1418.  
  1419.  
  1420. /* THEME COLORS */
  1421. :root {
  1422. --first-color: rgba(35, 35, 35, 1.0);
  1423. --second-color: rgba(30, 30, 30, 1.0);
  1424. --third-color: rgba(25, 25, 25, 1.0);
  1425. --fourth-color: rgba(20, 20, 20, 1.0);
  1426. --fifth-color: rgba(15, 15, 15, 1.0);
  1427. --scrollbar-color: rgba(50, 50, 50, 1.0);
  1428.  
  1429. --firstText-color: rgba(255, 255, 255, 1.0);
  1430. --secondText-color: rgba(200, 200, 200, 1.0);
  1431. --thirdText-color: rgba(150, 150, 150, 1.0);
  1432. --fourthText-color: rgba(100, 100, 100, 1.0);
  1433. --fifthText-color: rgba(45, 45, 45, 1.0);
  1434. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!