☰

Discord Custom Styling

Custom styles for Discord

  1. // ==UserScript==
  2. // @name         Discord Custom Styling
  3. // @namespace    https://gf.qytechs.cn/es/scripts/486252-discord-custom-styling/
  4. // @version      1.3
  5. // @description  Custom styles for Discord
  6. // @author       sam_speak
  7. // @match        https://discord.com/*
  8. // @grant        none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Function to add CSS styles to the page
  16.     function addStyles() {
  17.         // Styles for NSFW labeling
  18.         const nsfwStyle = document.createElement('style');
  19.         nsfwStyle.innerHTML = `
  20.             [class*=linkTop_]:has(> [class*=iconContainer__] [d^="M18.09 1.63"]) > [class*=children_]::after {
  21.                 content: "NSFW";
  22.                 background: var(--status-danger-background);
  23.                 color: var(--status-danger-text);
  24.                 padding: 0 6px;
  25.                 border-radius: 8px;
  26.                 font-size: 12px;
  27.                 font-weight: 700;
  28.                 letter-spacing: .02em;
  29.                 line-height: 16px;
  30.                 margin-left: 4px;
  31.             }
  32.         `;
  33.         document.head.appendChild(nsfwStyle);
  34.          // Additional styles for custom scrollbar
  35.         const scrollbarStyle = document.createElement('style');
  36.         scrollbarStyle.innerHTML = `
  37.             [class*="none_"]::-webkit-scrollbar {
  38.                 width: 5px;
  39.                 background: transparent;
  40.                 border: none;
  41.             }
  42.  
  43.             [class*="none_"]::-webkit-scrollbar-thumb {
  44.                 background: #101115;
  45.             }
  46.         `;
  47.         document.head.appendChild(scrollbarStyle);
  48.  
  49.         // Styles for rotating buttons
  50.         const rotateStyle = document.createElement('style');
  51.         rotateStyle.innerHTML = `
  52.             button.button__4f306 {
  53.                 border-radius: 50%;
  54.             }
  55.  
  56.             .button__4f306:last-child,
  57.             .attachButton_b1db83 .attachButtonInner__3ce2b,
  58.             .emojiButton__30ec7 .contents_fb6220,
  59.             .closeButton__34341 {
  60.                 transition: transform 1s ease;
  61.             }
  62.  
  63.             .button__4f306:last-child:hover,
  64.             .attachButton_b1db83:hover .attachButtonInner__3ce2b,
  65.             .emojiButton__30ec7:hover .contents_fb6220,
  66.             .closeButton__34341:hover {
  67.                 transform: rotate(360deg);
  68.             }
  69.         `;
  70.         document.head.appendChild(rotateStyle);
  71.  
  72.         // Styles for user popout customization
  73.         const popoutStyle = document.createElement('style');
  74.         popoutStyle.innerHTML = `
  75.             .activityUserPopoutV2__32328:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 {
  76.                 margin-left: 22px;
  77.             }
  78.  
  79.             .activityUserPopoutV2__32328:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:first-child::before,
  80.             .activityUserPopoutV2__32328:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:nth-child(2)::before,
  81.             .activityUserPopoutV2__32328:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:nth-child(3)::before {
  82.                 -webkit-mask-repeat: no-repeat;
  83.                 -webkit-mask-size: contain;
  84.                 padding: 7px;
  85.                 margin-left: -17px;
  86.                 margin-top: 2px;
  87.                 content: '';
  88.                 background-color: var(--header-primary);
  89.                 position: absolute;
  90.             }
  91.  
  92.             .activityUserPopoutV2__32328:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:first-child::before {
  93.                 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-music-4'%3E%3Cpath d='M9 18V5l12-2v13'%3E%3C/path%3E%3Cpath d='m9 9 12-2'%3E%3C/path%3E%3Ccircle cx='6' cy='18' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='16' r='3'%3E%3C/circle%3E%3Cline x1='12' x2='12' y1='19' y2='22'%3E%3C/line%3E%3C/svg%3E");
  94.             }
  95.  
  96.             .activityUserPopoutV2__32328:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:nth-child(2)::before {
  97.                 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-mic'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'%3E%3C/path%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'%3E%3C/path%3E%3Cline x1='12' x2='12' y1='19' y2='22'%3E%3C/line%3E%3C/svg%3E");
  98.             }
  99.  
  100.             .activityUserPopoutV2__32328:has([class^=timeBarUserPopoutV2_]) .contentImagesUserPopoutV2__04250 > div:nth-child(3)::before {
  101.                 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-disc-2'%3E%3Ccircle cx='12' cy='12' r='4'%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='12' x2='12' y2='12.01'%3E%3C/line%3E%3C/svg%3E");
  102.             }
  103.         `;
  104.         document.head.appendChild(popoutStyle);
  105.  
  106.         // Custom styles for mentions
  107.         const mentionStyle = document.createElement('style');
  108.         mentionStyle.innerHTML = `
  109.             /* Make My Mention Different From Other Mentions without affecting #CHANNEL */
  110.             .theme-dark .mentioned__58017 .mention {
  111.                 color: red !important;
  112.             }
  113.  
  114.             .theme-dark .mention {
  115.                 color: grey;
  116.                 background-color: transparent;
  117.             }
  118.  
  119.             /* Better Mentions Pulse (after fix) */
  120.             .mentioned__58017 .mention {
  121.                 background-color: transparent !important;
  122.             }
  123.             .theme-dark .mentioned__58017 .mention {
  124.                 cursor: pointer;
  125.                 box-shadow: 0 0 0 red;
  126.                 animation: pulse 1.6s infinite;
  127.             }
  128.  
  129.             .cozy_f5c119 .messageContent__21e69 {
  130.                 padding-top: 1px;
  131.             }
  132.  
  133.             @-webkit-keyframes pulse {
  134.                 0% {
  135.                     -webkit-box-shadow: 0 0 2px 2px transparent;
  136.                 }
  137.                 70% {
  138.                     -webkit-box-shadow: 0 0 2px 2px red;
  139.                 }
  140.                 100% {
  141.                     -webkit-box-shadow: 0 0 0 0 transparent;
  142.                 }
  143.             }
  144.  
  145.             @keyframes pulse {
  146.                 0% {
  147.                     -moz-box-shadow: 0 0 0 0 transparent;
  148.                     box-shadow: 0 0 0 0 transparent;
  149.                 }
  150.                 70% {
  151.                     -moz-box-shadow: 0 0 2px 2px red;
  152.                     box-shadow: 0 0 2px 2px red;
  153.                 }
  154.                 100% {
  155.                     -moz-box-shadow: 0 0 0 0 transparent;
  156.                     box-shadow: 0 0 0 0 transparent;
  157.                 }
  158.             }
  159.         `;
  160.         document.head.appendChild(mentionStyle);
  161.  
  162.         // Additional styles for sidebar and panels
  163.         const sidebarPanelStyle = document.createElement('style');
  164.         sidebarPanelStyle.innerHTML = `
  165.             [class^="sidebar_"] [class^="panels_"] {
  166.                 margin-right: 5px;
  167.                 margin-bottom: 5px;
  168.                 margin-left: 5px;
  169.                 border: 1px solid var(--background-modifier-accent);
  170.                 border-radius: 20px;
  171.                 box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.45);
  172.             }
  173.  
  174.             [class^="sidebar_"] [class^="panels_"] [class^="container_"],
  175.             [class^="sidebar_"] [class^="panels_"] [class^="panel_"] {
  176.                 background: transparent !important;
  177.             }
  178.  
  179.             [class^="sidebar_"] [class^="panels_"] [class^="container_"] [class^="avatarWrapper_"] + [class^="flex_"] {
  180.                 margin-left: -10px;
  181.             }
  182.  
  183.             #vc-spotify-player {
  184.                 border-top-left-radius: 20px;
  185.                 border-top-right-radius: 20px;
  186.             }
  187.  
  188.             /* Nitro Theme Shit */
  189.             html.custom-theme-background [class^="sidebar_"] {
  190.                 background: var(--bg-overlay-3);
  191.             }
  192.             html.custom-theme-background [class^="sidebar_"] [class^="panels_"] {
  193.                 background: var(--bg-overlay-1);
  194.             }
  195.         `;
  196.          // Additional styles for timestamp opacity
  197.         const timestampOpacityStyle = document.createElement('style');
  198.         timestampOpacityStyle.innerHTML = `
  199.             [class*="timestamp"][class*="CompactTimeStamp"] {
  200.                 opacity: 0;
  201.                 will-change: opacity;
  202.             }
  203.  
  204.             [class*="messageListItem"] > [class*="message"]:hover [class*="timestamp"][class*="CompactTimeStamp"] {
  205.                 opacity: 1;
  206.             }
  207.         `;
  208.         document.head.appendChild(timestampOpacityStyle);
  209.         document.head.appendChild(sidebarPanelStyle);
  210.          // Custom styles for channel, members, dms, and settings
  211.         const customHoverStyle = document.createElement('style');
  212.         customHoverStyle.innerHTML = `
  213.             .wrapper__7bcde .link__95dc0,
  214.             .container__4f20e,
  215.             .channel_c21703,
  216.             .side_b4b3f6 .item__48dda {
  217.                 transition: margin-left 0.2s ease;
  218.             }
  219.  
  220.             .wrapper__7bcde:hover .link__95dc0,
  221.             .side_b4b3f6 .item__48dda:hover {
  222.                 margin-left: 10px;
  223.             }
  224.  
  225.             .container__4f20e:hover,
  226.             .channel_c21703:hover {
  227.                 margin-left: 18px;
  228.             }
  229.         `;
  230.         document.head.appendChild(customHoverStyle);
  231.          // Additional styles for user context menu
  232.         const userContextMenuStyle = document.createElement('style');
  233.         userContextMenuStyle.innerHTML = `
  234.             #user-context-close-dm,
  235.             #user-context-remove-friend,
  236.             #user-context-block {
  237.                 color: var(--status-danger);
  238.             }
  239.  
  240.             #user-context-close-dm:active,
  241.             #user-context-remove-friend:active,
  242.             #user-context-block:active {
  243.                 background-color: var(--red-500) !important;
  244.                 color: var(--white-500) !important;
  245.             }
  246.  
  247.             #user-context-close-dm[class*="focused-"],
  248.             #user-context-remove-friend[class*="focused-"],
  249.             #user-context-block[class*="focused-"] {
  250.                 background-color: var(--button-danger-background);
  251.                 color: var(--white-500);
  252.             }
  253.         `;
  254.         document.head.appendChild(userContextMenuStyle);
  255.  
  256.  
  257.          // Additional styles for sidebar view and layer
  258.         const customStyles = document.createElement('style');
  259.         customStyles.innerHTML = `
  260.             .standardSidebarView__1129a {
  261.                 top: 0 !important;
  262.             }
  263.  
  264.             .layer__2efaa + .layer__2efaa {
  265.                 top: 48px !important;
  266.             }
  267.  
  268.             .wrapper__7bcde:hover .sidebarRegionSidebar_2-vFDq {
  269.                 background-color: var(--background-modifier-hover);
  270.                 border-radius: 20px;
  271.                 margin-right: 5px;
  272.             }
  273.         `;
  274.         const imageWrapperStyle = document.createElement('style');
  275.         imageWrapperStyle.innerHTML = `
  276.     [class^="imageWrapper_"] img[class^="lazyImg"] {
  277.         object-fit: contain !important;
  278.     }
  279.        `;
  280.         document.head.appendChild(imageWrapperStyle);
  281.  
  282.  
  283.         document.head.appendChild(customStyles);
  284.  
  285.         // Custom styles for the text
  286.         const textStyles = document.createElement('style');
  287.         textStyles.innerHTML = `
  288.             .text-xs-semibold_a3a2b4.barText__1a44f { font-size: 0px; }
  289.             .text-xs-semibold_a3a2b4.barText__1a44f:before {
  290.                 font-size:12px;
  291.                 content: "LOOK AT THIS!";
  292.                 position: absolute;
  293.                 top: 4px;
  294.             }
  295.             .bar__004d9 { width: 100px; } /* adjust if needed for bar width, incase the text goes off the bar */
  296.         `;
  297.         document.head.appendChild(textStyles);
  298.     }
  299.  
  300.     // Call the function to add styles when the page loads
  301.     addStyles();
  302. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址