/** * @name Discord+ * @version 3.1.1 * @author PlusInsta * @authorLink https://plusinsta.xyz * @description A sleek, customizable Discord theme. * @website https://plusinsta.xyz/discord-plus/ * @source https://github.com/PlusInsta/discord-plus/blob/master/DiscordPlus-source.theme.css * @invite 2Jwh2nS */ @import url(//plusinsta.xyz/discord-plus/DiscordPlus-source.theme.css); /* I've commented most of these values so you can change them yourself. If you're having trouble, or you want to do more than what these values allow for, drop by our server and we can probably help you out! */ /* Font import */ @import url(https://fonts.googleapis.com/css?family=Poppins:400,700|Roboto:400,700|Righteous); /* This link loads fonts. Go to fonts.google.com and have a look! If there's any fonts you like, click them, select styles that are the closest to 400 and 700. If you want more fonts, back out to the main page and add more. When you're done, click "View selected families" in the top right, click the Embed tab, and replace the entire line with the "CSS rules" it gives you. After that, just set the fonts below! */ :root { /* Background image. Falls back to accent color if invalid. To use an image on your computer, send it anywhere on Discord, then right-click and Copy Link, then paste it between the ()'s'. */ --dplus-background: url(https://images5.alphacoders.com/114/thumb-1920-1144159.jpg); /* Accent color, used to decorate the UI with colors. */ --dplus-accent-ui: rgb(123, 100, 255); --dplus-accent-ui-hover: rgb(93, 63, 211); /* Fonts */ --dplus-font-ui: 'Poppins'; --dplus-font-body: 'Roboto'; --dplus-font-header: 'Righteous'; /* Round corner sizes, measured in pixel radius Set avatar/server to 50% for circles UI radius must be in pixels */ --dplus-radius-ui: 10px; --dplus-radius-avatar: 20%; --dplus-radius-server: 20%; /* This determines margins and padding */ --dplus-spacing-ui: 10px; --dplus-spacing-app: 10px; /* The Home icon */ --dplus-icon-home-dark: url(https://cdn.discordapp.com/attachments/352456634632634369/905844604190998568/Jabami_Icon.jpg); --dplus-icon-home-light: url(https://cdn.discordapp.com/attachments/352456634632634369/905844604190998568/Jabami_Icon.jpg); /* Icon sizes */ --dplus-icon-avatar-chat: 64px; --dplus-icon-avatar-list: 32px; --dplus-icon-avatar-profile: 80px; --dplus-icon-server-sidebar: 48px; --dplus-icon-server-list: 32px; /* Width of different elements */ --dplus-channels-width: 240px; --dplus-members-width: 240px; --dplus-scrollbar-width: 10px; /* Blur percentage. Set to 0 to disable blur. Performance may be affected by this option. */ --dplus-blur-scale: 0; /* Background covers | Explanations below */ --dplus-dark-bgc-ui-base: hsla(0, 0%, 0%, 0.74); --dplus-dark-bgc-ui-base-hover: hsla(0, 0%, 0%, 0.82); --dplus-dark-bgc-ui-card: hsla(0, 0%, 7%, 0.75); --dplus-dark-bgc-ui-card-hover: hsla(0, 0%, 15%, 0.50); --dplus-dark-bgc-chatmsg: hsla(0, 0%, 0%, 0.74); --dplus-dark-bgc-chatmsg-hover: hsla(0, 0%, 0%, 0.82); --dplus-dark-bgc-popout: hsla(0, 0%, 0%, 0.75); --dplus-dark-bgc-button: hsla(0, 0%, 15%, 0.50); --dplus-dark-bgc-button-hover: hsla(0, 0%, 20%, 0.60); --dplus-dark-bgc-server-button: hsla(0, 0%, 15%, 0.50); --dplus-dark-bgc-server-button-hover: hsla(0, 0%, 20%, 0.60); --dplus-light-bgc-ui-base: hsla(0, 0%, 97%, 0.88); --dplus-light-bgc-ui-base-hover: hsla(0, 0%, 100%, 0.90); --dplus-light-bgc-ui-card: hsla(0, 0%, 93%, 0.75); --dplus-light-bgc-ui-card-hover: hsla(0, 0%, 50%, 0.25); --dplus-light-bgc-chatmsg: hsla(0, 0%, 97%, 0.88); --dplus-light-bgc-chatmsg-hover: hsla(0, 0%, 100%, 0.90); --dplus-light-bgc-popout: hsla(0, 0%, 100%, 0.80); --dplus-light-bgc-button: hsla(0, 0%, 50%, 0.80); --dplus-light-bgc-button-hover: hsla(0, 0%, 40%, 0.50); --dplus-light-bgc-server-button: hsla(0, 0%, 95%, 0.75); --dplus-light-bgc-server-button-hover: hsla(0, 0%, 100%, 1); } /* Show edited message time */ .timestamp-p1Df1m:not(.timestampInline-_lS3aK, .timestampVisibleOnHover-9PEuZS) time::after { content: " (" attr(aria-label) ")"; color: var(--text-muted); font-size: 0.625rem; font-weight: 400; line-height: 1; text-transform: lowercase; } .edited-1v5nT8:not(.message-translate-indicator) { display: none; } /* Visible Offline Tags */ .offline-22aM7E .wrapper-1VLyxH > svg > foreignObject{mask:url(#svg-mask-avatar-status-round-32);} .offline-22aM7E .wrapper-1VLyxH > svg > foreignObject::before { content: ""; width: 10px; height: 10px; background-color: hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%);; display: block; right: 0px; bottom: 0px; position: absolute; border-radius: 50%; } .offline-22aM7E .wrapper-1VLyxH > svg > foreignObject::after{ content: ""; width: 6px; height: 6px; background-color: var(--background-secondary-alt); display: block; right: 2px; bottom: 2px; position: absolute; border-radius: 50%; z-index: 999!important; } .offline-22aM7E{opacity: 1;} /* Messages Slide In Chat */ @keyframes slide-up { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0px); } } .message-2CShn3 { animation: slide-up 0.4s ease; } /* Pop-out Animation */ .menu-1QACrS, .emojiPicker-6YCk8a, .browser-mnQ1T7, .messagesPopoutWrap-3zryHW, .wrapper-1NB3WY, .container-3u7RcY, .container-2o3qEW, .container-2ebMPP, .userPopout-2j1gM4 { animation: custom-menu-animation 250ms ease; transform-origin: top; } @keyframes custom-menu-animation { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } /* BetterDiscordSettingsOnTop */ .bd-sidebar-header, [aria-controls="settings-tab"], [aria-controls="emotes-tab"], [aria-controls="customcss-tab"], [aria-controls="plugins-tab"], [aria-controls="themes-tab"], [aria-controls="themes-tab"] + .separator-2wx7h6, [aria-controls="pluginrepo-tab"], [aria-controls="pluginrepo-tab"] + .separator-2wx7h6, [aria-controls="themerepo-tab"] + .separator-2wx7h6, [aria-controls="themerepo-tab"]{ order: -1; } /* Channel Names Capitalized */ .channelName-3KPsGw { text-transform: capitalize; } /* Bigger Title Bar */ .winButton-3UMjdg { height: 32px; width: 32px; margin-top: 0px; padding-left: 8px; padding-right: 8px; } .withFrame-2dL45i { height: fit-content; margin-top: 0px; } .wordmarkWindows-2dq6rw { margin-top: 8px; margin-left: 8px; padding: 0px; } /* Better Jump To Present Button */ [class*="jumpToPresentBar"] { display: contents; } [class*="jumpToPresentBar"] > button:first-child { display: none; } [class*="jumpToPresentBar"] > button:last-child { position: absolute; z-index: 1; bottom: 24px; right: 22px; padding: 8px !important; height: auto; background-color: #5865F2; box-shadow: var(--elevation-high); border-radius: 100px; display: flex; font-size: 0px; color: transparent; transition: font-size .2s .1s, color .2s, padding .4s .1s; } [class*="jumpToPresentBar"] > button svg { order: -1; margin: 0px; height: 24px; width: 24px; top: auto; margin-right: 0px; margin-left: 0px; color: #FFFFFF; transition: margin .6s; } [class*="jumpToPresentBar"]:hover > button { padding: 8px 18px !important; font-size: 14px; color: #FFFFFF; transition: font-size .2s, color .2s .1s, padding .4s; } [class*="jumpToPresentBar"]:hover > button svg { margin-right: 2px; margin-left: -6px; } /*category containers*/ .containerDefault-3TQ5YN { margin-top: .2em; margin-bottom: .2em; padding: 0px !important; height: 1.4em !important; border: 1px solid RGBA(0, 0, 0, 0.5); border-radius: 5px; background-color: RGBA(0, 0, 0, 0.4); } /*channel containers*/ .content-1gYQeQ { background-color: RGBA(0, 0, 0, 0.1); border: 2px solid var(--background-tertiary); padding: 0px; } .iconItem-1EjiK0 { margin-left: 3px !important; padding: 0px 6px !important; } .mainContent-20q_Hp{ padding: 0px 2px !important; } @import url(https://maendisease.github.io/BetterDiscordStuff/css/wellThisIsAwkwardSoTryThis.css); @import url(https://maendisease.github.io/BetterDiscordStuff/css/bdAddonMini.css); /* Explanations: * bgc is short for background cover / color * dark/light corresponds to the current active theme * ui-base is the main UI * ui-base-hover is used when hovering over clickable elements * ui-card is for cards like in server discovery * ui-card-hover is for hovering over cards * chatmsg governs messages in chat and the message box * chatmsg-hover is for hovering over a message * popout affects all popouts, like context menu, profiles, etc. * server-button affects server icons on the left side of the screen * server-button-hover affects servers icons when hovered over */