☰

Greasy Fork is available in English.

Discord Custom CSS

Allows you to set a custom background for Discord and other cool effects!

ეს სკრიპტი არ უნდა იყოს პირდაპირ დაინსტალირებული. ეს ბიბლიოთეკაა, სხვა სკრიპტებისთვის უნდა ჩართეთ მეტა-დირექტივაში // @require https://update.greatest.deepsurf.us/scripts/39893/260992/Discord%20Custom%20CSS.js. 

  1. // ==UserScript==
  2. // @name         Discord Custom CSS
  3. // @namespace    https://discord.gg/BwqMNRn
  4. // @version      2.0
  5. // @description  Allows you to set a custom background for Discord and other cool effects!
  6. // @author       Lucario
  7. // @include      https://discordapp.com/*
  8. // @include      http://discordapp.com/*
  9. // @exclude      https://discordapp.com/invite/*
  10. // @exclude      http://discordapp.com/invite/*
  11. // @exclude      https://discordapp.com/oauth2/*
  12. // @exclude      http://discordapp.com/oauth2/*
  13. // @exclude      https://discordapp.com/developers/*
  14. // @exclude      http://discordapp.com/developers/*
  15. // @grant        none
  16. // @run-at       document-start
  17. // ==/UserScript==
  18.  
  19. var alpha = 0;
  20. var popoutAlpha = 0.5;
  21. var hoverAlpha = 0.2;
  22. var backgroundImage = "https://cdn.discordapp.com/attachments/424742013410476035/427152919607902228/albert.png";
  23. var stretchImage = false; //BUG (MAYBE) FIXED!!!
  24.  
  25. const divWhitelistIDs = [
  26.     "user-profile-modal"
  27. ];
  28.  
  29. const divWhitelistClasses = [
  30.     "inner-1_1f7b",
  31.     "tab-bar-container",
  32.     "tab-bar",
  33.     "tab-bar-item",
  34.     "avatar-wrapper",
  35.     "avatar-profile",
  36.     "status",
  37.     "header-info",
  38.     "header-info-inner",
  39.     "discord-tag",
  40.     "activity",
  41.     "scroller-wrap fade",
  42.     "guilds scroller",
  43.     "additional-actions-icon",
  44.     "section",
  45.     "section-header",
  46.     "note",
  47.     "guild",
  48.     "avatar-large",
  49.     "guild-name",
  50.     "guild-nick",
  51.     "guild-inner",
  52.     "avatar-large",
  53.     "context-menu",
  54.     "item",
  55.     "badge",
  56.     "new-messages-indicator-guild",
  57.     "popout-menu",
  58.     "popout-menu-item",
  59.     "popout-menu-item-label",
  60.     "popout-menu-icon",
  61.     "wrapper-2xO9RX",
  62.     "user-popout",
  63.     "nickname",
  64.     "username-wrapper",
  65.     "label",
  66.     "inner-1_1f7b",
  67.     "upload-modal",
  68.     "filename",
  69.     "description",
  70.     "footer",
  71.     "comment",
  72.     "uploadInput-3oaE4N",
  73.     "emojiButtonNormal-2yO7yT emojiButton-3c_qrT emojiButton-38mF6t",
  74.     "spriteNormal-3BYqCK sprite-3pvJkd",
  75.     "innerEnabled-gLHeOL inner-3if5cm flex-3B1Tl4 innerNoAutocomplete-kaUXJZ",
  76.     "channelTextAreaEnabled-c05Zpy channelTextArea-1HTP3C channel-text-area-upload margin-top-8",
  77.     "emojiButtonHovered-2DiAsP emojiButton-3c_qrT emojiButton-38mF6t",
  78.     "spriteHovered-2ymMOw sprite-3pvJkd",
  79.     "emoji-picker",
  80.     "header",
  81.     "dimmer",
  82.     "category",
  83.     "sprite-item",
  84.     "diversity-selector",
  85.     "scrollerWrap-2uBjct",
  86.     "row",
  87.     "sticky-header",
  88.     "emoji-item",
  89.     "popout",
  90.     "categories",
  91.     "update-notice",
  92.     "protip",
  93.     "tip",
  94.     "modal-3HOjGZ",
  95.     "header-3sp3cE",
  96.     "inner-tqJwAU",
  97.     "selectable-prgIYK",
  98.     "form-inner",
  99.     "switchWrapper-3sSQdm",
  100.     "switch-3lyafC",
  101.     "track-1h2wOF",
  102.     "flexChild-1KGW5q",
  103.     "date-1aJe8-",
  104.     "small-3-03j1 size12-1IGJl9 height16-1qXrGy primary-2giqSn",
  105.     "bar-2cFRGz",
  106.     "embed",
  107.     "embed-color-pill",
  108.     "actions",
  109.     "action create",
  110.     "action join",
  111.     "action-header",
  112.     "action-body",
  113.     "action-icon",
  114.     "unread-23Kvxk",
  115.     "or",
  116.     "form-actions",
  117.     "control-group",
  118.     "instructions",
  119.     "region-select",
  120.     "region-select-inner",
  121.     "region-select-flag",
  122.     "region-select-name",
  123.     "help-text",
  124.     "avatar-uploader",
  125.     "avatar-uploader-inner",
  126.     "avatar-uploader-acronym",
  127.     "avatar-uploader-hint",
  128.     "rtc-connection-popout",
  129.     "sparkline",
  130.     "popout-bottom",
  131.     "avatar-hint",
  132.     "avatar-popout",
  133.     "quick-message-wrapper",
  134.     "channel-name",
  135.     "icon-friends",
  136.     "connected-accounts",
  137.     "connected-account",
  138.     "connected-account-name",
  139.     "connected-account-name-inner",
  140.     "connected-account-open-icon",
  141.     "friend",
  142.     "title",
  143.     "subtitle",
  144.     "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignStart-pnSyE6 noWrap-v6g9vO",
  145.     "flex-lFgbSz flex-3B1Tl4 vertical-3X17r5 flex-3B1Tl4 directionColumn-2h-LPR justifyStart-2yIZo0 alignStretch-1hwxMa noWrap-v6g9vO switchItem-1uofoz marginBottom20-2Ifj-2",
  146.     "flex-lFgbSz flex-3B1Tl4 vertical-3X17r5 flex-3B1Tl4 directionColumn-2h-LPR justifyStart-2yIZo0 alignStretch-1hwxMa noWrap-v6g9vO switchItem-1uofoz marginBottom20-2Ifj-2 disabled-2c1Mfv",
  147.     "description-3MVziF formText-1L-zZB description-3Ijq-M marginBottom20-2Ifj-2 modeDefault-389VjU primary-2giqSn",
  148.     "ui-form-item",
  149.     "title-1M-Ras",
  150.     "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignCenter-3VxkQP noWrap-v6g9vO",
  151.     "info-1Z508c",
  152.     "contentsDefault-nt2Ym5 contents-4L4hQM contentsFilled-3M8HCx contents-4L4hQM",
  153.     "instant-invite-modal",
  154.     "expire-text",
  155.     "checkbox",
  156.     "checkbox-inner",
  157.     "blurb",
  158.     "form-header",
  159.     "control-groups",
  160.     "Select has-value",
  161.     "Select-control",
  162.     "Select-placeholder",
  163.     "Select-input",
  164.     "settings-right",
  165.     "settings-inner",
  166.     "radio",
  167.     "radio-inner",
  168.     "radio-container",
  169.     "radio-button",
  170.     "notification-settings-modal-channel-settings-header",
  171.     "notification-settings-modal-channel-settings-list",
  172.     "channel-notification-settings",
  173.     "flex-horizontal flex-spacer content",
  174.     "flex-horizontal flex-spacer content-inner",
  175.     "flex-vertical flex-spacer",
  176.     "scroller-wrap",
  177.     "contentsDefault-nt2Ym5 contents-4L4hQM contentsLink-2ScJ_P contents-4L4hQM",
  178.     "medium-2KnC-N size16-3IvaX_ height20-165WbF primary-2giqSn",
  179.     "embed-author",
  180.     "embed-content",
  181.     "embed-content-inner",
  182.     "embed-field",
  183.     "embed-field-name",
  184.     "embed-field-value",
  185.     "embed-fields",
  186.     "spacing-3XGYwJ marginBottom20-2Ifj-2 medium-2KnC-N size16-3IvaX_ height20-165WbF primary-2giqSn",
  187.     "slider",
  188.     "item-slider",
  189.     "slider-handle",
  190.     "slider-handle-track",
  191.     "Select-value",
  192.     "emoji-alias-input",
  193.     "emoji-row-text",
  194.     "emoji-uploader",
  195.     "description-3MVziF",
  196.     "connection-status",
  197.     "connecting",
  198.     "connecting-inner",
  199.     "quote",
  200.     "attribution",
  201.     "connecting-problems",
  202.     "connecting-problems-text",
  203.     "connecting-problems-buttons",
  204.     "wrapperHoveredText-1PA_Uk",
  205.     "upload-modal-in",
  206.     "upload-drop-modal",
  207.     "upload-area",
  208.     "bgScale",
  209.     "autocomplete-1TnWNR",
  210.     "typing",
  211.     "file",
  212.     "settings-actions",
  213.     "toolbar-badge",
  214.     "results-group",
  215.     "history",
  216.     "search-option",
  217.     "option",
  218.     "empty"
  219. ];
  220.  
  221. const recursiveWhitelistClasses = {
  222.     "body": ["section roles", "section notes"],
  223.     "scroller-fzNley": ["sticky-header"],
  224.     "icons": ["wrap-one"]
  225. };
  226.  
  227. const zeroAlphaClasses = [
  228.     "member-inner",
  229.     "member-username",
  230.     "member-activity",
  231.     "message",
  232.     "message-text",
  233.     "markup",
  234.     "body",
  235.     "titlebar",
  236.     "titlebar-edge",
  237.     "accessory",
  238.     "content-1orzGj",
  239.     "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignCenter-3VxkQP noWrap-v6g9vO td z-index-boost",
  240.     "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyEnd-1ceqOU alignCenter-3VxkQP noWrap-v6g9vO td z-index-boost",
  241.     "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignStretch-1hwxMa noWrap-v6g9vO",
  242.     "avatar-xsmall",
  243.     "code-1RiHF2",
  244.     "countdown-column",
  245.     "username",
  246.     "flex-lFgbSz flex-3B1Tl4 vertical-3X17r5 flex-3B1Tl4 directionColumn-2h-LPR justifyStart-2yIZo0 alignStretch-1hwxMa noWrap-v6g9vO name-and-tag",
  247.     "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignCenter-3VxkQP noWrap-v6g9vO",
  248.     "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignCenter-3VxkQP noWrap-v6g9vO ui-role-list",
  249.     "overflow-button",
  250.     "default-3bB32Y formText-1L-zZB tag modeDefault-389VjU primary-2giqSn",
  251.     "default-3bB32Y formText-1L-zZB name modeDefault-389VjU primary-2giqSn",
  252.     "role-wrapper",
  253.     "member",
  254.     "nameDefault-Lnjrwm",
  255.     "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignCenter-3VxkQP noWrap-v6g9vO margin-reset",
  256.     "nameDefaultText-QoumjC",
  257.     "scroller-fzNley scroller-NXV0-d",
  258.     "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignStart-pnSyE6 noWrap-v6g9vO wrapperDefault-1Dl4SS",
  259.     "marginReset-1YolDJ",
  260.     "content-2mSKOj",
  261.     "wrapper-fDmxzK",
  262.     "containerDefault-7RImuF",
  263.     "nameUnreadText-1pxldj",
  264.     "iconSpacing-5GIHkT",
  265.     "nameSelectedText-32NDX5",
  266.     "modal-image",
  267.     "accountDetails-15i-_e",
  268.     "button-1aU9q1",
  269.     "nameDefaultVoice-1swZoh",
  270.     "nameHoveredVoice-TIoHRJ",
  271.     "wrapper-2ldvyE",
  272.     "header-toolbar",
  273.     "search",
  274.     "attachment-image",
  275.     "DraftEditor-root",
  276.     "public-DraftEditorPlaceholder-root",
  277.     "public-DraftEditorPlaceholder-inner",
  278.     "DraftEditor-editorContainer",
  279.     "public-DraftEditor-content",
  280.     "public-DraftStyleDefault-block public-DraftStyleDefault-ltr",
  281.     "nameHoveredText-2FFqiz",
  282.     "search-bar-icon",
  283.     "nameHovered-1YFSWq",
  284.     "nameMutedText-1YDcP-",
  285.     "nameDefault-Lnjrwm",
  286.     "topic",
  287.     "messages",
  288.     "status-text",
  289.     "status-icon-text",
  290.     "helper",
  291.     "message-group",
  292.     "avatar-small",
  293.     "friends-column",
  294.     "friends-row",
  295.     "friends-table",
  296.     "friends-table-header",
  297.     "channel-activity",
  298.     "channel private",
  299.     "scroller-fzNley",
  300.     "filename",
  301.     "speed",
  302.     "progress",
  303.     "attachment",
  304.     "icon-file",
  305.     "upload",
  306.     "wrap-one",
  307.     "wrap-two",
  308.     "wrap-three",
  309.     "icon one",
  310.     "icon two",
  311.     "icon three",
  312.     "autocompleteInner-N7OQf1",
  313.     "autocompleteRowVertical-3_UxVA",
  314.     "xsmall-2rXiD4",
  315.     "avatarStatus-3VdB8Y",
  316.     "selector-nbyEfM",
  317.     "descriptionUsername-1quCGz",
  318.     "descriptionDiscriminator-3KCIMj",
  319.     "marginLeft8-34JoM2",
  320.     "contentTitle-sL6DrN",
  321.     "nameDefault-1I0lx8",
  322.     "userDefault-2_cnT0",
  323.     "draggable-3SphXU",
  324.     "avatarContainer-303pFz",
  325.     "avatarDefault-3jtQoc",
  326.     "iconSpacing-1WJZFe",
  327.     "nameLockedVoice-wNOMNa",
  328.     "content-249Pr9",
  329.     "description-YnaVYa",
  330.     "edit-message",
  331.     "edit-container-outer",
  332.     "edit-container-inner",
  333.     "edit-operation",
  334.     "spacing-CsDO_x",
  335.     "btn-option",
  336.     "btn-reaction",
  337.     "search-learn-more",
  338.     "search-clear-history",
  339.     "header-tab-bar-wrapper",
  340.     "mention-filter",
  341.     "value",
  342.     "channel-separator",
  343.     "action-buttons",
  344.     "jump-button",
  345.     "text",
  346.     "search-for",
  347.     "keybind-shortcut-dim",
  348.     "embed-inner",
  349.     "empty-icon-guilds",
  350.     "empty-text",
  351.     "empty-icon-friends",
  352.     "system-message-content",
  353.     "system-message",
  354.     "system-message-icon",
  355.     "attachment-inner",
  356.     "metadata"
  357. ];
  358.  
  359. function hasWhitelistedClass(div){
  360.     var classes = div.className.split(" ");
  361.     for (const w of divWhitelistClasses){
  362.         if (div.className == w){
  363.             return true;
  364.         }
  365.         for (const c of classes){
  366.             if (c == w){
  367.                 return true;
  368.             }
  369.         }
  370.     }
  371.     return false;
  372. }
  373.  
  374. function hasZeroAlphaClass(div){
  375.     var classes = div.className.split(" ");
  376.     for (const w of zeroAlphaClasses){
  377.         if (div.className == w){
  378.             return true;
  379.         }
  380.         for (const c of classes){
  381.             if (c == w){
  382.                 return true;
  383.             }
  384.         }
  385.     }
  386.     return false;
  387. }
  388.  
  389. function recursivelyWalk(nodes, cb) {
  390.     for (const node of nodes){
  391.         var ret = cb(node);
  392.         if (ret) {
  393.             return ret;
  394.         }
  395.         if (node.childNodes && node.childNodes.length) {
  396.             var ret = recursivelyWalk(node.childNodes, cb);
  397.             if (ret) {
  398.                 return ret;
  399.             }
  400.         }
  401.     }
  402. }
  403.  
  404. function checkAllRecursiveWalks(d){
  405.     var returnData = false;
  406.     Object.keys(recursiveWhitelistClasses).forEach((k) => {
  407.         d.className.split(" ").forEach((n) => {
  408.             if (k == n) {
  409.                 recursiveWhitelistClasses[k].some((cc) => {
  410.                     if (recursivelyWalk(d.childNodes, (node) => node.className == cc)){
  411.                         returnData = true;
  412.                         return true;
  413.                     }
  414.                 });
  415.             }
  416.         });
  417.         if (returnData === true) return;
  418.     });
  419.     return returnData;
  420. }
  421.  
  422. var observer = new MutationObserver((mutations) => {
  423.     mutations = mutations.map(m => m.target).filter(m => m.tagName && m.tagName.toUpperCase() == "DIV");
  424.     //console.log(mutations);
  425.     if (mutations.length < 1) return;
  426.     [].forEach.call(document.getElementsByTagName("div"), d => {
  427.         if (d.style.backgroundColor == `rgba(0,0,0,${alpha})` || d.style.backgroundColor == `rgba(0,0,0,${popoutAlpha})`) return;
  428.         if (d.className == "connecting"){
  429.             Object.assign(d.style,{backgroundColor: `#888`, backgroundImage: `url("${backgroundImage}")`, backgroundRepeat: `no-repeat`, webkitBackgroundSize: `${stretchImage ? "100vw 100vh" : "cover"}`, mozBackroundSize: `${stretchImage ? "100vw 100vh" : "cover"}`, oBackgroundSize: `${stretchImage ? "100vw 100vh" : "cover"}`, backgroundSize: `${stretchImage ? "100vw 100vh" : "cover"}`});
  430.             return;
  431.         }
  432.         if (d.className == "search" && d.parent){
  433.             if (d.parent.className == "theme-dark" || d.parent.className == "theme-light"){
  434.                 d.parent.style.backgroundColor = "rgb(0,0,0,0)";
  435.             }
  436.         }
  437.         if (d.className == "channel private"){
  438.             d.style.opacity = 0.7;
  439.         }
  440.         if (!d.className && !d.id) return;
  441.         if (checkAllRecursiveWalks(d)){
  442.             return;
  443.         }
  444.         if (d.className == "messages-popout scroller"){
  445.             d.style.backgroundColor = `rgba(0,0,0,${popoutAlpha})`;
  446.             return;
  447.         }
  448.         if (hasZeroAlphaClass(d)){
  449.             d.style.backgroundColor = "rgba(0,0,0,0)";
  450.         }else if ((divWhitelistIDs.indexOf(d.id) < 0) && !hasWhitelistedClass(d)){
  451.             d.style.backgroundColor = `rgba(0,0,0,${alpha})`;
  452.         }
  453.     });
  454.     [].forEach.call(document.getElementsByTagName("a"), a => {
  455.         if (!a.href) return;
  456.         if (a.href.endsWith("/channels/@me") && a.draggable !== false && a.style.backgroundColor !== `rgba(0,0,0,${alpha})`){
  457.             a.style.backgroundColor = `rgba(0,0,0,${alpha})`;
  458.         }
  459.     });
  460. });
  461. observer.observe(document.getElementsByTagName("body")[0], {attributes: true, childList: true, characterData: true, subtree: true});
  462.  
  463. var css = `
  464. .message-group-blocked {display:none;}
  465. body {background-color:#888;background-image: url("${backgroundImage}");background-repeat: no-repeat;-webkit-background-size: ${stretchImage ? "100vw 100vh" : "cover"};-moz-background-size: ${stretchImage ? "100vw 100vh" : "cover"};-o-background-size: ${stretchImage ? "100vw 100vh" : "cover"};background-size: ${stretchImage ? "100vw 100vh" : "cover"};}
  466. .theme-dark .selectorSelected-2M0IGv {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(16,16,16,${hoverAlpha})),to(rgba(20,20,20,${hoverAlpha})));background:linear-gradient(90deg,rgba(16,16,16,${hoverAlpha}) 85%,rgba(20,20,20,${hoverAlpha}));}
  467. .theme-light .selectorSelected-2M0IGv {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(162,162,162,${hoverAlpha})),to(rgba(166,166,166,${hoverAlpha})));background:linear-gradient(90deg,rgba(162,162,162,${hoverAlpha}) 85%,rgba(166,166,166,${hoverAlpha}));}
  468. .theme-dark .autocomplete-1TnWNR {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(16,16,16,${popoutAlpha})),to(rgba(20,20,20,${popoutAlpha})));background:linear-gradient(90deg,rgba(16,16,16,${popoutAlpha}) 85%,rgba(20,20,20,${popoutAlpha}));}
  469. .theme-light .autocomplete-1TnWNR {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(162,162,162,${popoutAlpha})),to(rgba(166,166,166,${popoutAlpha})));background:linear-gradient(90deg,rgba(162,162,162,${popoutAlpha}) 85%,rgba(166,166,166,${popoutAlpha}));}
  470. .theme-dark .channel-members .member.popout-open, .theme-dark .channel-members .member:hover {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(16,16,16,${hoverAlpha})),to(rgba(20,20,20,${hoverAlpha})));background:linear-gradient(90deg,rgba(16,16,16,${hoverAlpha}) 85%,rgba(20,20,20,${hoverAlpha}));}
  471. .theme-light .channel-members .member.popout-open, .theme-light .channel-members .member:hover {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(162,162,162,${hoverAlpha})),to(rgba(166,166,166,${hoverAlpha})));background:linear-gradient(90deg,rgba(162,162,162,${hoverAlpha}) 85%,rgba(166,166,166,${hoverAlpha}));}
  472. .theme-dark .channel-members .member:hover .member-username{color:#fff;}
  473. .theme-light .channel-members .member:hover .member-username{color:#222;}
  474. .theme-dark .channel-members .member.popout-open .status,.theme-dark .channel-members .member:hover .status{border-color:rgba(16,16,16,${hoverAlpha});}
  475. .theme-light .channel-members .member.popout-open .status,.theme-light .channel-members .member:hover .status{border-color:rgba(162,162,162,${hoverAlpha});}
  476. .theme-dark .channel-members-loading, .theme-light .channel-members-loading{background-color:rgba(0,0,0,0);}
  477. .theme-dark .channel-members-loading .background, .theme-light .channel-members-loading .background{background-image:none;background-color:rgba(0,0,0,0);}
  478. .theme-dark .channel-members-loading .heading, .theme-light .channel-members-loading .heading{background-image:none;background-color:rgba(0,0,0,0);}
  479. .theme-dark .channel-members-loading .member, .theme-light .channel-members-loading .member{background-image:none;background-color:rgba(0,0,0,0);}
  480. .theme-dark .channel-members-loading .member:nth-child(2n-4),.theme-dark .channel-members-loading .member:nth-child(7n-1), .theme-light .channel-members-loading .member:nth-child(2n-4),.theme-light .channel-members-loading .member:nth-child(7n-1){background-image:none;background-color:rgba(0,0,0,0);}
  481. .theme-dark .channel-members-loading .member:nth-child(3n+2),.theme-dark .channel-members-loading .member:nth-child(7n+4), .theme-light .channel-members-loading .member:nth-child(3n+2),.theme-light .channel-members-loading .member:nth-child(7n+4){background-image:none;background-color:rgba(0,0,0,0);}
  482. .channel-members .member{display:-webkit-box;display:-ms-flexbox;display:flex;color:rgba(16,16,16,${hoverAlpha});padding:5px 16px 5px 30px;font-weight:500;cursor:pointer;line-height:30px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;}
  483. .theme-dark .wrapperHoveredText-1PA_Uk:hover {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(16,16,16,${hoverAlpha})),to(rgba(20,20,20,${hoverAlpha})));background:linear-gradient(90deg,rgba(16,16,16,${hoverAlpha}) 85%,rgba(20,20,20,${hoverAlpha}));}
  484. .theme-light .wrapperHoveredText-1PA_Uk:hover {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(162,162,162,${hoverAlpha})),to(rgba(166,166,166,${hoverAlpha})));background:linear-gradient(90deg,rgba(162,162,162,${hoverAlpha}) 85%,rgba(166,166,166,${hoverAlpha}));}
  485. .theme-dark .chat form .typing {background-color:rgba(0,0,0,0);}
  486. .theme-light .chat form .typing {background-color:rgba(0,0,0,0);}
  487. .theme-dark .chat>.content{background-color:rgba(0,0,0,0);}
  488. .theme-light .chat>.content{background-color:rgba(0,0,0,0);}
  489. .scroller-wrap .scroller::-webkit-scrollbar-track-piece {visibility: hidden;}
  490. .theme-dark .scroller-wrap .scroller::-webkit-scrollbar-thumb {border: 0px;background-color: rgba(0,0,0,0.4)!important;}
  491. .theme-light .scroller-wrap .scroller::-webkit-scrollbar-thumb {border: 0px;background-color: rgba(255,255,255,0.4)!important;}
  492. .scroller-wrap .scroller::-webkit-scrollbar {width: 10px;}
  493. .theme-dark .popout-bottom {background: rgba(0,0,0,${popoutAlpha});}
  494. .theme-light .popout-bottom {background: rgba(255,255,255,${popoutAlpha});}
  495. .results-group .option:after {background: none;}
  496. .theme-dark .results-group .user, .theme-dark .results-group .option, .theme-dark .search-popout .search-option, .theme-dark .option.search-query.selected {background: rgba(0,0,0,${popoutAlpha * 0.5});}
  497. .theme-light .results-group .user, .theme-light .results-group .option, .theme-light .search-popout .search-option, .theme-light .option.search-query.selected {background: rgba(0,0,0,${popoutAlpha * 0.5});}
  498. .theme-dark .results-group .user.selected, .theme-dark .results-group .option.selected, .theme-dark .search-popout .search-option.selected {background: rgba(0,0,0,${popoutAlpha * 0.75});}
  499. .theme-light .results-group .user.selected, .theme-light .results-group .option.selected, .theme-light .search-popout .search-option.selected {background: rgba(0,0,0,${popoutAlpha * 0.75});}
  500. `;
  501. var head = document.head || document.getElementsByTagName('head')[0];
  502. var style = document.createElement('style');
  503.  
  504. style.type = 'text/css';
  505. if (style.styleSheet){
  506.   style.styleSheet.cssText = css;
  507. }else{
  508.   style.appendChild(document.createTextNode(css));
  509. }
  510.  
  511. head.appendChild(style);