API tools faq
paste
Advertisement
ANOX_

Discord : Better Thème 2

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