/* ----------------------------------------ADDONS---------------------------------------- */ @import url("https://api.fonts.coollabs.io/css2?family=Quicksand&display=swap"); @import url("https://dablulite.github.io/css-snippets/AccentSwap/import.css"); @import url("https://discordstyles.github.io/RadialStatus/dist/RadialStatus.css"); @import url("https://discord-extensions.github.io/modern-indicators/src/source.css"); /* @import url("https://minidiscordthemes.github.io/SettingsIcons/SettingsIcons.theme.css"); */ @import url("https://gold-me.github.io/DiscordIcons/main.css"); /* accent swap */ :root { --accent-h: 227 !important; --accent-s: 58% !important; --accent-l: 65% !important; } /* radial status */ :root { --rs-small-spacing: 1px; --rs-medium-spacing: 2px; --rs-large-spacing: 3px; --rs-small-width: 2px; --rs-medium-width: 3px; --rs-large-width: 4px; --rs-avatar-shape: calc(var(--avatar-radius) - 4%); --rs-phone-visible: block; --rs-online-color: #43b581; --rs-idle-color: #faa61a; --rs-dnd-color: #f04747; --rs-offline-color: #636b75; --rs-streaming-color: #643da7; --rs-invisible-color: #747f8d; --rs-self-speaking-color: #57d39b; --rs-phone-color: var(--rs-online-color); } /* modern indicators */ [class*="sidebar_"] [class*="containerDefault_"], [class*="sidebar_"] [class*="channel_"] { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } [class*="sidebar_"] [class*="containerDefault_"]:has([class*="modeSelected_"], [class*="modeConnected_"]), [class*="sidebar_"] [class*="channel_"]:has([class*="selected_"]) { border-radius: 0 24px 24px 0; } /* discord icons */ :root { --si-animations : false; --si-color: white; --si-permacolor: true; } /* ----------------------------------------MAIN---------------------------------------- */ /* variables */ :root { --blurple: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); --avatar-radius: 28%; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; } /* font */ * { font-family: 'Quicksand', sans-serif; } /* recoloring */ .theme-dark { --background-primary: hsl(224, 20%, 12%) !important; --background-secondary: hsl(224, 20%, 9%) !important; --background-secondary-alt: var(--background-tertiary) !important; --background-tertiary: hsl(224, 20%, 6%) !important; --background-accent: var(--background-tertiary) !important; --background-floating: var(--background-tertiary) !important; --background-modifier-hover: rgba(255, 255, 255, 0.04) !important; --background-modifier-active: rgba(255, 255, 255, 0.06) !important; --background-modifier-selected: rgba(255, 255, 255, 0.08) !important; --background-message-hover: hsla(0, 0%, 0%, 0.15); --text-link: hsl(214, 77%, 74%) !important; } /* minimal scrollbars */ ::-webkit-scrollbar-thumb { background-color: var(--background-tertiary) !important; } ::-webkit-scrollbar-track { background: none !important; } /* remove help button */ [aria-label="Help"] { display: none; } /* squared avatars */ img[class*="avatar"], [class*="wrapper_"] foreignObject { mask: none; border-radius: var(--avatar-radius); } /* offline browsing */ [class*="fixClipping_"] { background: var(--background-tertiary); border-radius: var(--radius-md); opacity: 0.9; height: 130px; width: 150px; top: unset !important; left: unset !important; right: 16px; bottom: 16px; } [class*="fixClipping_"] [class*="content_"] { position: fixed; display: flex; justify-content: center; align-items: center; height: 125px; width: 150px; top: 0; } [class*="fixClipping_"] [class*="problems_"] { padding-bottom: 16px; } [class*="fixClipping_"] [class*="statusLink_"] { margin: 0; } [class*="fixClipping_"] [class*="text_"], [class*="fixClipping_"] [class*="problemsText_"], [class*="fixClipping_"] [class*="links_"]:not([class*="statusLink_"]) { display: none; } /* ----------------------------------------SERVER LIST---------------------------------------- */ /* server click animation */ [class*="guilds_"] [class*="wrapper_"] svg { transition: transform 0.1s; } [class*="guilds_"] [class*="wrapper_"] svg:active { transform: scale(0.95); } /* squared server icons */ [class*="guilds_"] [class*="wrapper_"] foreignObject, [class*="guilds_"] [class*="wrapperSimple_"], [class*="guilds_"] [class*="folderIconWrapper_"], [class*="guilds_"] [class*="guildIcon_"] { mask: none; border-radius: var(--avatar-radius); } /* badge shadow */ [class*="guilds_"] [class*="lowerBadge_"] { filter: drop-shadow(0 0 3px #000); } /* slim open folders */ [class*="guilds_"] [class*="expandedFolderBackground_"] { left: 25%; width: 50%; } /* ----------------------------------------CHANNEL LIST---------------------------------------- */ /* clean user panel */ [class*="panels_"] [class*="container_"]:has([class*="avatarWrapper_"]) { padding: 8px; height: fit-content; } [class*="panels_"] [class*="container_"] [class*="content_"] { padding: 0; flex-direction: column; } [class*="panels_"] [class*="container_"] [class*="avatarWrapper_"] { background: none; margin: 0; padding: 0 0 8px 0; width: 100%; } [class*="panels_"] [class*="container_"] [class*="nameTag_"] { display: flex; align-items: center; gap: 8px; } [class*="panels_"] [class*="container_"] [class*="nameTag_"] [class*="panelSubtextContainer_"] { width: 100%; } [class*="panels_"] [class*="container_"]:has([class*="avatarWrapper_"]) [class*="flex_"] { gap: 8px; width: 100%; } [class*="panels_"] [class*="container_"]:has([class*="avatarWrapper_"]) button, [class*="panels_"] [class*="container_"] [class*="micButtonParent_"] { background-color: var(--background-primary); border-radius: var(--radius-xs); width: 100%; } [class*="panels_"] [class*="container_"]:has([class*="avatarWrapper_"]) button:hover, [class*="panels_"] [class*="container_"] [class*="micButtonParent_"]:hover { background-color: var(--background-secondary); } /* clean status picker */ [class*="statusPickerModalMenu_"] [class*="description"] { opacity: 0; height: fit-content; max-height: 0; margin-bottom: 0; transition: 0.25s; } [class*="statusPickerModalMenu_"] [class*="item"][class*="focused"] [class*="description"] { opacity: 1; height: fit-content; max-height: 32px; } [class*="statusPickerModalMenu_"] [id="set-status-submenu-online"][class*="focused"] { background-color: var(--green-360); } [class*="statusPickerModalMenu_"] [id="set-status-submenu-idle"][class*="focused"] { background-color: var(--yellow-330); } [class*="statusPickerModalMenu_"] [id="set-status-submenu-dnd"][class*="focused"] { background-color: var(--red-400); } [class*="statusPickerModalMenu_"] [id="set-status-submenu-invisible"][class*="focused"] { background-color: var(--primary-400); } /* persistent server banner */ :not([class*="bannerVisible_"]) > [class*="animatedContainer_"] { opacity: 0.5 !important; height: 138px; } /* channel group lines */ [class*="sidebar_"] [class*="wrapperCommon_"] { padding-left: 10px; padding-right: 10px; } [class*="sidebar_"] [class*="wrapperCommon_"] [class*="icon_"] { display: none; } [class*="sidebar_"] [class*="wrapperCommon_"] [class*="container_"] { display: flex; align-items: center; justify-content: center; color: white; opacity: 0.8; } [class*="sidebar_"] [class*="wrapperCommon_"] [class*="container_"]::before { background: linear-gradient(to left, var(--blurple) 50%, transparent); content: ""; height: 2px; flex-grow: 1; transition: flex-grow 0.2s; margin-right: 6px; } [class*="sidebar_"] [class*="wrapperCommon_"] [class*="container_"]::after { background: linear-gradient(to right, var(--blurple) 50%, transparent); content: ""; height: 2px; flex-grow: 1; transition: flex-grow 0.2s; margin-left: 6px; } [class*="sidebar_"] [class*="collapsed_"] [class*="container_"]:before, [class*="sidebar_"] [class*="collapsed_"] [class*="container_"]:after { flex-grow: 0; } /* smaller channel icons */ [class*="sidebar_"] [class*="icon_"] { height: 16px; width: 16px; } /* colored lock badge */ [class*="sidebar_"] [class*="icon_"] path[d^="M16 4h.5v-"] { fill: hsl(38, 95.7%, 54.1%); } /* colored nsfw badge */ [class*="sidebar_"] [class*="icon_"] path[d^="M18.09 1.63c.4-"] { fill: hsl(359, 82.6%, 59.4%); } /* persistent channel ping indicator */ [class*="sidebar_"] [class*="channelInfo_"] { display: block !important; margin-left: 4px; } /* ----------------------------------------HOME---------------------------------------- */ /* friends list */ [class*="peopleColumn_"] { padding: 16px 16px 0 16px; } [class*="peopleColumn_"] > div > div { display: grid; gap: 16px; } [class*="peopleList_"] { order: 2; margin-top: 16px; } [class*="peopleColumn_"] [class*="searchBar_"] { margin: 0; order: 1; } [class*="peopleColumn_"] [class*="searchBar_"] [class*="inner_"] { display: flex; } [class*="peopleColumn_"] [class*="title_"] { font-size: 20px; text-transform: capitalize; margin: 16px 0 0 0; } [class*="peopleColumn_"] [class*="blockedIgnoredSettingsNotice_"] { margin: 0; } [class*="peopleListItem_"] { background-color: var(--background-secondary); } [class*="peopleListItem_"], [class*="peopleListItem_"]:hover, [class*="peopleListItem_"][class*="active_"] { border: none; border-radius: var(--radius-md); margin: 0; padding: 16px 14px; flex-grow: 1; } [class*="peopleListItem_"] [class*="userInfo_"] { overflow: visible; align-items: center; flex: none; } [class*="peopleListItem_"] [class*="wrapper_"] { margin: 0 !important; margin-right: 10px !important; } [class*="peopleListItem_"] [class*="wrapper_"] foreignObject[mask*=mobile]:after { display: none !important; } [class*="peopleListItem_"] [class*="actionButton_"] { background-color: var(--background-tertiary); border-radius: var(--avatar-radius); } /* ----------------------------------------CHAT---------------------------------------- */ /* animations */ @keyframes slide-in { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0px); } } @keyframes popout { from { transform:scale(0); opacity:0 } } @keyframes stretch-in { from { transform: scale(1, 0.5); opacity: 0; } } /* slide-in animations */ [data-list-item-id*="chat-messages"]:not(:has([class*="contents"] [class*="isSending"])) /* chat */ { animation: slide-in 0.2s; } [data-list-item-id*="chat-messages"]:has([class*="contents"] [class*="isSending"]) /* chat */ { visibility: hidden; } [class*="voiceUser_"] /* vc join */ { animation: slide-in 0.2s; } /* popout animations */ [class*="menu_"], /* right click menu */ [class*="userProfileOuter_"], /* user popout */ [class*="popoutContainer_"] /* emoji tooltip */ { animation: popout 0.2s; } /* stretch-in animations */ [class*="recentMentionsPopout_"], /* inbox */ [class*="messagesPopoutWrap_"], /* pins */ [class*="browser_"] /* threads */ { animation: stretch-in 0.3s; transform-origin: top; } [class*="drawerSizingWrapper_"] /* emoji picker */ { animation: stretch-in 0.3s; transform-origin: bottom; } /* bubble chat box */ [class*="chatContent_"] [class*="form_"], [class*="chatContent_"] [class*="form_"] [class*="clipContainer_"] { margin-top: 0; padding-top: 0; } [class*="chatContent_"] [class*="form_"] [class*="inner_"], [class*="chatContent_"] [class*="form_"] [class*="buttons_"] { margin-right: 0 !important; padding-left: 0; column-gap: 8px; } [class*="chatContent_"] [class*="form_"] [class*="scrollableContainer_"], [class*="chatContent_"] [class*="form_"] [class*="attachedBars_"] { background: none; } [class*="chatContent_"] [class*="form_"] [class*="textArea_"] { background-color: var(--background-secondary); border-radius: var(--radius-sm); } [class*="chatContent_"] [class*="form_"] [class*="slateTextArea_"] { right: 0; padding-left: 12px; padding-right: 12px; } [class*="chatContent_"] [class*="form_"] button { background-color: var(--background-secondary); border-radius: var(--radius-sm); height: 44px; width: 44px; margin: 0; padding: 0; translate: none !important; } [class*="chatContent_"] [class*="form_"] button:hover, [class*="chatContent_"] [class*="form_"] [aria-expanded="true"] { background-color: var(--background-secondary-alt); } [class*="chatContent_"] [class*="form_"] [class*="replyBar_"], [class*="chatContent_"] [class*="form_"] [class*="channelAttachmentArea_"], [class*="chatContent_"] [class*="form_"] [class*="threadSuggestionBar_"] { background-color: var(--background-secondary); border-radius: var(--radius-sm); border: none; box-shadow: none; margin: 0; margin-bottom: 8px; } [class*="chatContent_"] [class*="form_"]::before, [class*="chatContent_"] [class*="form_"]::after, [class*="chatContent_"] [class*="form_"] [class*="scrollableContainer_"]::-webkit-scrollbar, [class*="chatContent_"] [class*="form_"] [class*="uploadInput_"], [class*="chatContent_"] [class*="form_"] [class*="divider_"], [class*="channelTextAreaDisabled"] { display: none; } /* hide gift button */ [aria-label="Send a gift"] { display: none; } /* small jump to present */ [class*="jumpToPresentBar_"] { background-color: var(--background-secondary); border-radius: var(--radius-sm); left: auto; margin-bottom: 8px; padding: 4px 12px; width: fit-content; transition: margin 0.1s; } [class*="jumpToPresentBar_"]:active { margin-bottom: 6px; } [class*="jumpToPresentBar_"] [class*="barButtonBase_"] { padding: 0; font-weight: 400; } [class*="jumpToPresentBar_"] [class*="barButtonMain_"] { display: none; } /* modern emoji picker */ [class*="drawerSizingWrapper_"] [class*="navList_"] { justify-content: space-evenly; } [class*="drawerSizingWrapper_"] [class*="categorySection_"] [class*="wrapper_"]:not(.vc-dragging-wrapper) { background-color: var(--background-tertiary); border-radius: 0 24px 24px 0; margin-left: -8px; margin-bottom: 8px; } [class*="drawerSizingWrapper_"] [class*="categorySection_"] [class*="wrapper_"]:after { display: none; } [class*="drawerSizingWrapper_"] [class*="categorySection_"] [class*="header_"] { width: 100%; padding: 0 8px; } [class*="drawerSizingWrapper_"] [class*="categorySection_"] [class*="headerLabel_"] { flex-grow: 1; } /* minimal search bar */ [class*="upperContainer_"] [class*="search_"] { order: -1; } [class*="upperContainer_"] [class*="searchBar_"] { background: none; } [class*="upperContainer_"] [class*="searchBar_"]:not(:has([class*="clear_"])) { width: 24px; } [class*="upperContainer_"] [class*="searchBar_"]:focus-within { width: 240px; } [class*="upperContainer_"] [class*="searchBar_"] .DraftEditor-root { background-color: var(--background-tertiary); border-radius: var(--radius-xs); } [class*="upperContainer_"] [class*="searchBar_"] [class*="iconContainer_"] { width: 24px; height: 24px; cursor: pointer; transition: 0.1s; } [class*="upperContainer_"] [class*="searchBar_"]:hover [class*="iconContainer_"], [class*="upperContainer_"] [class*="searchBar_"]:focus-within [class*="iconContainer_"], [class*="upperContainer_"] [class*="searchBar_"]:has([class*="clear_"]) [class*="iconContainer_"] { width: 18px; height: 18px; } /* wrapping channel topic */ [class*="upperContainer_"] [class*="topic_"] { white-space: normal; line-height: 16px; } /* bubble message actions */ [class*="messageListItem_"] [class*="buttonContainer_"] [class*="buttonsInner_"] { background: none; border: none; box-shadow: none !important; grid: repeat(2, 32px) / auto-flow 32px; grid-auto-flow: column; gap: 4px; } [class*="messageListItem_"] [class*="buttonContainer_"] [class*="button_"] { background-color: var(--background-secondary-alt); border-radius: var(--radius-sm); padding: 0; height: 32px; width: 32px; } [class*="messageListItem_"] [class*="buttonContainer_"] [aria-label="Edit"], [class*="messageListItem_"] [class*="buttonContainer_"] [aria-label="Reply"] { order: 1; grid-row: span 2; height: calc(32px * 2 + 4px); width: calc(32px * 1.25); margin-left: 4px; } [class*="messageListItem_"] [class*="popoverReactionHoverBar_"] [class*="separator_"] { display: none; } /* message list */ [class*="messageListItem_"] [class*="message_"] { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } [class*="messageListItem_"] [class*="replying_"]:hover, [class*="messageListItem_"] [class*="replying_"][class*="selected_"] { background: var(--background-message-highlight) !important; } /* solid replied bar */ [class*="repliedMessage_"] { background-color: var(--background-secondary-alt); border-radius: var(--radius-sm); padding: 4px 6px; transition: background-color 0.1s; width: fit-content; max-width: 45vw; } [class*="repliedMessage_"]::before { border-color: var(--background-secondary-alt); margin-right: 0; margin-bottom: -6px; } [class*="replyAvatar_"] { border-radius: var(--avatar-radius); } /* bold date seperator */ [class*="divider_"] [class*="content_"] { background: var(--background-secondary-alt); color: white; font-weight: 500; padding: 4px; } /* link embeds */ [class*="embedFull_"] { border: none; border-radius: var(--radius-sm); margin-left: 10px; } [class*="embedFull_"]:after { content: ""; position: absolute; border: 3px solid; border-color: inherit; border-radius: 24px; top: 1px; bottom: 1px; left: -10px; } [class*="embedFull_"] [class*="grid_"] { border: 1px solid var(--background-secondary-alt); border-radius: var(--radius-sm); } /* audio embeds */ [class*="wrapperAudio_"], [class*="wrapperAudio_"][class*="newMosaicStyle_"] { padding: 0; } [class*="wrapperAudio_"] [class*="audioMetadata_"] { padding: 16px; } [class*="wrapperAudio_"] [class*="audioMetadata_"]::before { height: 32px; } [class*="wrapperAudio_"] [class*="audioControls_"] { border-radius: 0 0 var(--radius-sm) var(--radius-sm); width: auto; margin-top: 0; padding: 0 8px; } /* emoji/sticker tooltips */ [class*="popoutContainer_"] { max-width: 232px; } [class*="popoutContainer_"] [class*="emojiSection_"] { flex-direction: column; align-items: center; } [class*="popoutContainer_"] [class*="emojiSection_"] [class*="flex_"] { display: flex; flex-direction: column; align-items: center; text-align: center; } [class*="popoutContainer_"] [class*="emojiSection_"] .emoji { width: 150px !important; height: 150px !important; margin-bottom: 16px; } [class*="popoutContainer_"] [class*="emojiSection_"] [class*="assetWrapper_"] { width: 200px !important; height: 200px !important; margin-bottom: 16px; } /* reaction tooltip */ [class*="reactionTooltipInner_"] { display: block; text-align: center; max-width: 150px; } [class*="reactionTooltipEmoji_"] { height: 100px !important; width: 100px !important; margin-bottom: 16px; } /* ----------------------------------------USER POPOUTS---------------------------------------- */ /* no nitro border */ [id*="popout_"] [class*="custom-profile-theme"] { --custom-user-profile-theme-padding: 0 !important; } /* no avatar mask */ [id*="popout_"] [class*="inner_"] [class*="mask_"] circle { display: none; } [id*="popout_"] [class*="inner_"] [class*="overlay_"]:after { border-radius: var(--avatar-radius); } /* filled role colors */ [class*="role_"] { background-color: hsla(0, 0%, 0%, 0.25); border: none; padding: 6px; transform: translate(0); overflow: hidden; } [class*="role_"] [class*="roleCircle_"] { margin: 0 2px 0 1px; } [class*="role_"] [class*="roleCircle_"]::after { content: ""; position: absolute; background: inherit; opacity: 0.4; height: 100%; width: 100%; right: 0; } [class*="role_"] [class*="roleRemoveButton_"] { position: static; } [class*="role_"] [class*="roleRemoveIcon_"] { top: 12px; left: 14px; right: 0; bottom: 0; } [class*="role_"] [class*="roleName_"] { padding: 4px 6px 4px 0; margin-right: -6px; z-index: 1; } /* filled role selection colors */ [id*="popout_"] [class*="container_"] [class*="combobox_"] [class*="item_"] { position: relative; } [id*="popout_"] [class*="container_"] [class*="combobox_"] [class*="item_"] [class*="roleCircle_"]::after { position: absolute; content: ""; background: inherit; border-radius: var(--radius-xs); left: 0; width: 100%; height: 100%; opacity: 0.25; } /* ----------------------------------------USER MODALS---------------------------------------- */ /* ----------------------------------------SETTINGS---------------------------------------- */ /* settings sidebar */ [class*="layers_"] [class*="layer_"] { transform: none !important; opacity: 1 !important; } [class*="layers_"] [class*="layer_"]:not([class*="baseLayer_"]) { background: none; pointer-events: none; } [class*="layer_"][aria-hidden="false"] + [class*="layer_"][aria-hidden="false"] { display: none; } [class*="layers_"] [class*="layer_"][class*="animating_"] * { pointer-events: auto !important; } [class*="layers_"] [class*="standardSidebarView_"] { left: unset; flex-direction: row-reverse; pointer-events: auto; opacity: 1 !important } [class*="layers_"] [class*="standardSidebarView_"] [class*="sidebar_"] { padding: 16px; padding-right: 8px; } [class*="layers_"] [class*="standardSidebarView_"] [class*="contentRegion_"], [class*="layers_"] [class*="standardSidebarView_"] [class*="contentRegionScroller_"] { border-radius: var(--radius-md) 0 0 var(--radius-md); } [class*="layers_"] [class*="standardSidebarView_"] [class*="contentColumn_"] { width: 740px; padding: 32px; } [class*="layers_"] [class*="standardSidebarView_"] [class*="toolsContainer_"] { position: absolute; z-index: -1; } [class*="layers_"] [class*="standardSidebarView_"] [class*="toolsContainer_"] [class*="tools_"], [class*="layers_"] [class*="standardSidebarView_"] [class*="toolsContainer_"] [class*="closeButton_"] { background: rgba(0, 0, 0, 0.5); border-radius: 0; position: fixed; width: 100%; height: 100%; top: 0; left: 0; } [class*="layers_"] [class*="standardSidebarView_"] [class*="toolsContainer_"] [class*="closeButton_"], [class*="layers_"] [class*="standardSidebarView_"] [class*="toolsContainer_"] [class*="keybind_"] { color: transparent !important; } /* slim switches */ [class*="control_"] [class*="container_"] { height: 18px; width: 36px; } [class*="control_"] [class*="container_"] [class*="slider_"] { margin-top: 0; } [class*="control_"] [class*="container_"]:not([class*="checked_"]) [class*="slider_"] { margin-left: 0; } [class*="control_"] [class*="container_"] [class*="slider_"] svg { display: none; } /* grid account panel */ [class*="accountProfileCard_"] { background-color: var(--background-secondary); } [class*="accountProfileCard_"] circle { display: none; } [class*="accountProfileCard_"] .background__1fed1, [class*="accountProfileCard_"] .fieldSpacer__1fed1, [class*="accountProfileCard_"] .fieldSpacerBottom__1fed1 { margin: 0; } [class*="accountProfileCard_"] .fieldList__1fed1 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } [class*="accountProfileCard_"] .field__1fed1 { display: flex; flex-direction: column; background-color: var(--background-primary); border-radius: var(--radius-sm); height: 120px; padding: 16px; } [class*="accountProfileCard_"] .fieldButton__1fed1 { width: 100%; } [class*="accountProfileCard_"] .removeButton__1fed1 { background-color: var(--button-danger-background); transition: 0.2s; } [class*="accountProfileCard_"] .removeButton__1fed1:hover { background-color: var(--button-danger-background-hover); } /* ----------------------------------------VENCORD---------------------------------------- */ /* MoreUserTags */ span[data-tag="webhook"] { background-color: dimgray; color: white; } span[data-tag="owner"] { background-color: gold; color: black; } span[data-tag="admin"] { background-color: royalblue; color: white; } span[data-tag="staff"] { background-color: darkslateblue; color: white; } span[data-tag="mod"], span[data-tag="vc mod"], span[data-tag="chat mod"] { background-color: green; color: white; }