├── UnShittifyRounded.theme.css ├── RoundIconsSource.theme.css ├── UnShittify.theme.css ├── LICENSE.md ├── README.md └── UnShittifySource.theme.css /UnShittifyRounded.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name UnShittifyRounded 3 | * @author Nak.kiwi 4 | * @description Fix the blatant design mistakes and disalignments :D 5 | * @version 0.0.1 6 | */ 7 | 8 | /* ----------------- UN-SHITIFY DISCORD ------------------- *//* 9 | 10 | By @nak.kiwi (You can call me Nakki, feel free visit wy cozy website at nak.kiwi) 11 | 12 | A personal project to fix the blatant design mistakes and disalignments in the Discord app. 13 | If it's unreadable, it's by design, I didn't want you to steal my secret sauce. 14 | 15 | This is a discord unoficcial theme, it is not affiliated with Discord in any way. 16 | If you are discord and wish for this to be taken down, please message me at hello@nak.kiwi 17 | 18 | 19 | *//* ------------------------------------------------------- */ 20 | 21 | /* ----------------------- OPTIONS ------------------------- *//* 22 | 23 | - CIRCLE ICONS: 24 | - See https://github.com/MaiRiosIPla/unshittify-discord/blob/main/README.md 25 | 26 | *//* ------------------------------------------------------- */ 27 | 28 | @import url('https://mairiosipla.github.io/unshittify-discord/UnShittifySource.theme.css'); 29 | @import url('https://mairiosipla.github.io/unshittify-discord/RoundIconsSource.theme.css'); -------------------------------------------------------------------------------- /RoundIconsSource.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name RoundServerIcons 3 | * @author Nak.kiwi 4 | * @description :3 5 | * @version 0.0.1 6 | */ 7 | 8 | /* ----------------- UN-SHITIFY DISCORD (RoundServerIcons Part) ------------------- *//* 9 | 10 | By @nak.kiwi (You can call me Nakki, feel free visit wy cozy website at nak.kiwi) 11 | 12 | A personal project to fix the blatant design mistakes and disalignments in the Discord app. 13 | If it's unreadable, it's by design, I didn't want you to steal my secret sauce. 14 | 15 | This is a discord unoficcial theme, it is not affiliated with Discord in any way. 16 | If you are discord and wish for this to be taken down, please message me at hello@nak.kiwi 17 | 18 | 19 | *//* ------------------------------------------------------- */ 20 | 21 | /* ----------------------- OPTIONS ------------------------- *//* 22 | 23 | See https://github.com/MaiRiosIPla/unshittify-discord/blob/main/README.md 24 | 25 | *//* ------------------------------------------------------- */ 26 | 27 | 28 | .tutorialContainer__1f388 .wrapper_cc5dd2, /* DC logo */ 29 | .closedFolderIconWrapper__48112, /* Folders */ 30 | .folder__48112, 31 | .blobContainer_e5445c:not(.selected_e5445c) .wrapper__6e9f8, /* Servers */ 32 | .circleIconButton__5bc7e /* End buttons */ 33 | { 34 | border-radius: 100% !important; 35 | overflow: hidden !important; 36 | } 37 | -------------------------------------------------------------------------------- /UnShittify.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name UnShittify 3 | * @author Nak.kiwi 4 | * @description Fix the blatant design mistakes and disalignments :D 5 | * @version 0.0.1 6 | */ 7 | 8 | /* ----------------- UN-SHITIFY DISCORD ------------------- *//* 9 | 10 | By @nak.kiwi (You can call me Nakki, feel free visit wy cozy website at nak.kiwi) 11 | 12 | A personal project to fix the blatant design mistakes and disalignments in the Discord app. 13 | If it's unreadable, it's by design, I didn't want you to steal my secret sauce. 14 | 15 | This is a discord unoficcial theme, it is not affiliated with Discord in any way. 16 | If you are discord and wish for this to be taken down, please message me at hello@nak.kiwi 17 | 18 | 19 | *//* ------------------------------------------------------- */ 20 | 21 | /* ----------------------- OPTIONS ------------------------- *//* 22 | 23 | - CIRCLE ICONS: 24 | - See https://github.com/MaiRiosIPla/unshittify-discord/blob/main/README.md 25 | 26 | *//* ------------------------------------------------------- */ 27 | 28 | @import url('https://mairiosipla.github.io/unshittify-discord/UnShittifySource.theme.css'); 29 | @import url('https://mairiosipla.github.io/unshittify-discord/UnShittifySource.theme.css'); 30 | 31 | /* SETTINGS */ 32 | :root { 33 | /* Right padding of the top bar */ 34 | --top-bar-padding: 220px; 35 | /* Icon scale */ 36 | --icon-scale: 1; 37 | 38 | /* NSPG911 Refreshed Seamless Chat Bar */ 39 | /* Custom padding for the chat box */ 40 | --rscb-chat-box-padding: 8px; 41 | /* Whether you want the chat to not move up and down when someone starts typing */ 42 | --rscb-no-jump-chat: 0; 43 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | ## Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) 2 | 3 | **Canonical URL:** [https://creativecommons.org/licenses/by-nc-sa/4.0/](https://creativecommons.org/licenses/by-nc-sa/4.0/) 4 | 5 | [See the legal code](https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode) 6 | 7 | --- 8 | 9 | ### You are free to: 10 | 11 | - **Share** — copy and redistribute the material in any medium or format 12 | - **Adapt** — remix, transform, and build upon the material 13 | - The licensor **cannot revoke** these freedoms as long as you follow the license terms. 14 | 15 | --- 16 | 17 | ### Under the following terms: 18 | 19 | - **Attribution** — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use. 20 | - **NonCommercial** — You may not use the material for commercial purposes. 21 | - **ShareAlike** — If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original. 22 | - **No additional restrictions** — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits. 23 | 24 | --- 25 | 26 | ### Notices: 27 | 28 | You do not have to comply with the license for elements of the material in the public domain or where your use is permitted by an applicable exception or limitation. 29 | 30 | No warranties are given. The license may not give you all of the permissions necessary for your intended use. For example, other rights such as publicity, privacy, or moral rights may limit how you use the material. 31 | 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # UnShittify Discord 2 | By [@nak.kiwi](https://instagram.com/nak.kiwi) (You can call me Nakki, feel free visit wy cozy website at nak.kiwi) :3 3 | 4 | A personal project to fix the design mistakes and disalignments in the Discord app. 5 | If it's unreadable, it's by design, I didn't want you to steal my secret sauce. 6 | 7 | **Disclaimer:** This is a discord unoficcial theme, it is not affiliated with Discord in any way. 8 | If you are discord and wish for this to be taken down, please message me at hello@nak.kiwi 9 | 10 | - [Installation](#installation) 11 | - [Use to Create Other Themes](#use-to-create-other-themes) 12 | - [Features](#features) 13 | - [Known Issues](#known-issues) 14 | - [License](#license) 15 | 16 | ![image](https://github.com/user-attachments/assets/f47c80f4-8a5f-468d-9c43-3c41c501dd79) 17 | 18 | --- 19 | 20 | ## Installation (Vencord/BetterDiscord/Browser) 21 | 22 | ### Option 1: Download Importer (Auto Update) 23 | 24 | Download [UnShittify.theme.css](UnShittify.theme.css) or [UnShittifyRounded.theme.css](UnShittifyRounded.theme.css) and add it to your themes folder. 25 | 26 | > You won't need both themes for rounded icons. 27 | 28 | ### Option 2: Online Themes (Auto Update, no settings available) 29 | 30 | Add the following line to your "Online Themes" imports: 31 | 32 | ```css 33 | @import url("https://mairiosipla.github.io/unshittify-discord/UnShittifySource.theme.css"); 34 | ``` 35 | 36 | And the following for rounded icons: 37 | 38 | ```css 39 | @import url("https://mairiosipla.github.io/unshittify-discord/RoundIconsSource.theme.css"); 40 | ``` 41 | 42 | > [!NOTE] 43 | > You'll need both themes for rounded icons. 44 | 45 | ### Option 3 (For Bowsers using UserCSS extensions) 46 | 47 | >There are extra options: RoundIcons and RefreshedSeamlessChatBar Toggles. 48 | 49 | Check out [https://userstyles.world/style/21817](https://userstyles.world/style/21817) 50 | 51 | ### Option 4: Download Source (No Automatic Updates) 52 | 53 | Download the raw CSS files: 54 | 55 | - [UnShittifySource.theme.css](https://mairiosipla.github.io/unshittify-discord/UnShittifySource.theme.css) 56 | - [RoundIconsSource.theme.css](https://mairiosipla.github.io/unshittify-discord/RoundIconsSource.theme.css) 57 | 58 | And place them in your themes folder. 59 | 60 | > [!NOTE] 61 | > You'll need both themes for rounded icons. 62 | 63 | --- 64 | 65 | ## Use to Create Other Themes 66 | 67 | Simply add this CSS at the top of your file: 68 | 69 | ```css 70 | @import url("https://mairiosipla.github.io/unshittify-discord/UnShittifySource.theme.css"); 71 | ``` 72 | 73 | Optionally, you can also include rounded icons: 74 | 75 | ```css 76 | @import url("https://mairiosipla.github.io/unshittify-discord/RoundIconsSource.theme.css"); 77 | ``` 78 | > [!NOTE] 79 | > You'll need both themes for rounded icons. 80 | 81 | --- 82 | 83 | ## Features 84 | 85 | - Removed top bar and left it floating. The window can still be moved by nearing the mouse to the top of the window. 86 | 87 | ![image](https://github.com/user-attachments/assets/56cdf602-d1b7-48d6-9684-807799b73af4) 88 | 89 | 90 | - Adapted profile container to fit neatly under the rest of the users. 91 | 92 | ![Profile container fix](https://github.com/user-attachments/assets/b2e3b66d-2309-4e1a-88f4-f27d1cd4824f) 93 | 94 | - Aligned chat input field. 95 | 96 | ![Aligned chat input](https://github.com/user-attachments/assets/0ba33866-efe2-4a15-adf4-50206a51a26c) 97 | 98 | - Optional round server and folder icons. (Read [Installation](#installation) for more info) 99 | 100 | ![Rounded icons](https://github.com/user-attachments/assets/4e9a29c4-dd55-4dbd-9cbf-8620338908b0) 101 | 102 | - Server Icon Scaling (Read [Settings](#settings) for more info) 103 | 104 | --- 105 | 106 | ## Settings 107 | 108 | If using [Installation](#installation) methods 1 or 4, you can change the following settings by opening the theme.css file in a text editor: 109 | 110 | ```css 111 | /* SETTINGS */ 112 | :root { 113 | /* Right padding of the top bar */ 114 | --top-bar-padding: 220px; 115 | /* Icon scale */ 116 | --icon-scale: 1; 117 | 118 | /* NSPG911 Refreshed Seamless Chat Bar */ 119 | /* Custom padding for the chat box */ 120 | --rscb-chat-box-padding: 8px; 121 | /* Whether you want the chat to not move up and down when someone starts typing */ 122 | --rscb-no-jump-chat: 0; 123 | } 124 | ``` 125 | 126 | - `--top-bar-padding`: The right padding of the top bar. This is the space between the top bar and the right side of the window. Default is `220px`. You needn't change this unless you modified the top bar width, perhaps by removing some icons. 127 | - `--icon-scale`: The scale of the icons. Default is `1`. You can set this to any value you want, but I recommend keeping it between `1` and `1.3`. 128 | - `--rscb-chat-box-padding`: The padding of the "user is typing" box. Default is `8px`. 129 | - `--rscb-no-jump-chat`: Whether you want the chat to not move up and down when someone starts typing. Default is `0` (disabled). Set it to `1` to enable it. 130 | 131 | 132 | --- 133 | 134 | ## Known Issues 135 | 136 | - The drag icon may fail to register events at some window sizes. 137 | 138 | --- 139 | 140 | ## Contributing 141 | 142 | As long as you run the code through Prettier and use tabs instead of spaces, you're good to go. 😄 143 | Just open a pull request. 144 | 145 | --- 146 | 147 | ## License 148 | 149 | See [LICENSE.md](LICENSE.md) 150 | 151 | ## Credits 152 | Thanks to [@nspc911](https://github.com/nspc911) for the [Refreshed Seamless Chat Bar](https://github.com/NSPC911/themes/blob/main/vencord/RefreshedSeamlessChatBar.theme.css), Provided under the following license: 153 | 154 | ``` 155 | MIT License 156 | 157 | Copyright (c) 2024 NSPC911 158 | 159 | Permission is hereby granted, free of charge, to any person obtaining a copy 160 | of this software and associated documentation files (the "Software"), to deal 161 | in the Software without restriction, including without limitation the rights 162 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 163 | copies of the Software, and to permit persons to whom the Software is 164 | furnished to do so, subject to the following conditions: 165 | 166 | The above copyright notice and this permission notice shall be included in all 167 | copies or substantial portions of the Software. 168 | ``` 169 | -------------------------------------------------------------------------------- /UnShittifySource.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name UnShittifySource 3 | * @author Nak.kiwi 4 | * @description Fix the blatant design mistakes and disalignments :D 5 | * @version 0.0.1 6 | */ 7 | 8 | /* ----------------- UN-SHITIFY DISCORD ------------------- *//* 9 | 10 | By @nak.kiwi (You can call me Nakki, feel free visit wy cozy website at nak.kiwi) 11 | 12 | A personal project to fix the blatant design mistakes and disalignments in the Discord app. 13 | If it's unreadable, it's by design, I didn't want you to steal my secret sauce. 14 | 15 | This is a discord unoficcial theme, it is not affiliated with Discord in any way. 16 | If you are discord and wish for this to be taken down, please message me at hello@nak.kiwi 17 | 18 | 19 | *//* ------------------------------------------------------- */ 20 | 21 | /* ----------------------- OPTIONS ------------------------- *//* 22 | 23 | - CIRCLE ICONS: 24 | - See https://github.com/MaiRiosIPla/unshittify-discord/blob/main/README.md 25 | 26 | *//* ------------------------------------------------------- */ 27 | 28 | /* Imports */ 29 | /* Refreshed Seamless Chat Bar by NSPG911 */ 30 | @import url("https://nspc911.github.io/themes/vencord/RefreshedSeamlessChatBar.theme.css"); 31 | 32 | /* SETTINGS */ 33 | :root { 34 | /* Right padding of the top bar */ 35 | --top-bar-padding: 220px; 36 | /* Icon scale */ 37 | --icon-scale: 1; 38 | 39 | /* NSPG911 Refreshed Seamless Chat Bar */ 40 | /* Custom padding for the chat box */ 41 | --rscb-chat-box-padding: 8px; 42 | /* Whether you want the chat to not move up and down when someone starts typing */ 43 | --rscb-no-jump-chat: 0; 44 | } 45 | 46 | /* User modal */ 47 | .visual-refresh .panels_c48ade, .visual-refresh .panels__5e434 { 48 | right: var(--space-xs) !important; 49 | left: auto; 50 | bottom: var(--space-xs); 51 | width: calc(100% - var(--space-xs) * 2 - var(--custom-guild-list-width)); 52 | z-index: 200 !important; 53 | } 54 | 55 | /* Remove top row*/ 56 | .visual-refresh .base_c48ade, .visual-refresh .base__5e434 { 57 | grid-template-rows: [top] 0 [titleBarEnd] min-content [noticeEnd] 1fr [end]; 58 | } 59 | 60 | 61 | /* Top bar and dragging functionality */ 62 | .trailing_c38106 { 63 | gap: 2px; 64 | 65 | /* margin-left: calc(var(--custom-guild-list-width) + var(--space-8)); */ 66 | width: max-content; 67 | 68 | z-index: 2000 !important; 69 | position: absolute; 70 | 71 | background-color: var(--background-tertiary); 72 | border-radius: var(--radius-sm); 73 | top: 9px; 74 | right: var(--space-xs); 75 | left: unset; 76 | padding: 0; 77 | overflow: hidden; 78 | } 79 | .bar_c38106::before { 80 | content: ""; 81 | position: fixed; 82 | top:0; 83 | right:0; 84 | left: var(--custom-guild-sidebar-width); 85 | height: 10px; 86 | width: 200%; 87 | z-index: -1 !important; 88 | } 89 | .bar_c38106 { 90 | margin-left: var(--custom-guild-sidebar-width); 91 | height: 15px; 92 | min-height: unset !important; 93 | } 94 | 95 | /* Hide bar title */ 96 | .title__85643, 97 | .title_c38106 { 98 | display: none !important; 99 | } 100 | 101 | /* Make top icons not overlap bar icons*/ 102 | .container__9293f { 103 | padding-right: var(--top-bar-padding) !important; 104 | overflow: hidden !important; 105 | } 106 | 107 | 108 | /* Align discord logo and left bar */ 109 | .tree_ef3116 { 110 | margin-top: 1rem; 111 | } 112 | 113 | /* Chat input bar */ 114 | .channelTextArea_f75fb0 { 115 | margin-bottom: var(--space-xs); 116 | .inner__74017 { 117 | --custom-channel-textarea-text-area-max-height: 56px; 118 | --custom-channel-textarea-text-area-height: var( 119 | --custom-channel-textarea-text-area-max-height 120 | ); 121 | } 122 | } 123 | 124 | /* Fix for search bar */ 125 | .search__49676 > div { 126 | display: flex !important; 127 | flex-shrink: 1 !important; 128 | } 129 | .searchBar__97492 { 130 | width: auto !important; 131 | min-width: 100px !important; 132 | } 133 | 134 | /* Fix for user modal rescaling */ 135 | .actionButtons_e131a9 .button__201d5 { 136 | padding: unset !important; 137 | } 138 | 139 | /* Fix for server bar overflowing */ 140 | .itemsContainer_ef3116, .tree_ef3116 { 141 | height: calc(100% - 1rem); 142 | } 143 | .visual-refresh .guilds_c48ade, .visual-refresh .wrapper_ef3116 { 144 | margin-bottom: 0; 145 | } 146 | /* _____ Server icons scale _____________________________________________________*/ 147 | 148 | /* FOLDER SCALING */ 149 | .wrapper__48112 { 150 | --guildbar-folder-size: calc(48px / var(--icon-scale)); 151 | --custom-guild-list-width: calc((var(--guildbar-avatar-size) + var(--custom-guild-list-padding)*2)/var(--icon-scale)); 152 | zoom: var(--icon-scale); 153 | } 154 | /* Open folder Icon */ 155 | .folder__48112, .folderIconWrapper__48112 { 156 | height: calc(var(--guildbar-folder-size) * var(--icon-scale)); 157 | width: calc(var(--guildbar-folder-size) * var(--icon-scale)); 158 | } 159 | /* Folder BG */ 160 | .visual-refresh .expandedFolderBackground__48112 { 161 | left: calc(var(--custom-guild-list-padding)/var(--icon-scale) - (var(--guildbar-folder-size)* var(--icon-scale) - var(--guildbar-avatar-size)/var(--icon-scale))/2); 162 | width: calc(var(--guildbar-folder-size) * var(--icon-scale)); 163 | } 164 | /* Closed folders inner preview*/ 165 | .visual-refresh .closedFolderIconWrapper__48112 { 166 | zoom: var(--icon-scale); 167 | } 168 | /* DC logo */ 169 | .tutorialContainer__1f388 > .listItem__650eb > .listItemWrapper__91816, .tutorialContainer__650eb > .listItem__650eb > .listItemWrapper__91816 { 170 | zoom: var(--icon-scale); 171 | } 172 | #app-mount > div.appAsidePanelWrapper_a3002d > div.notAppAsidePanel_a3002d > div.app_a3002d > div > div.layers__960e4.layers__160d8 > div > div > div > div.content_c48ade > div.sidebar_c48ade > nav > ul > div.itemsContainer_ef3116 > div > div:nth-child(5) > div.listItemWrapper__91816 > div { 173 | zoom: var(--icon-scale); 174 | } 175 | 176 | /* SERVER SCALING */ 177 | .stack_dbd263[aria-label="Servers"] > .listItem__650eb > div:nth-child(2) .wrapper_cc5dd2 { 178 | zoom: var(--icon-scale); 179 | } 180 | .visual-refresh .listItem__650eb .wrapper_cc5dd2:not(.wrapper__48112) { 181 | 182 | } 183 | 184 | /* HIDE USERNAMES (FOR DEV SNAPSHOTS) */ 185 | /* .username__0a06e, .overflow__82b15 { 186 | filter: blur(3px); 187 | } */ 188 | 189 | /* Transitions for dev test */ 190 | /* * { 191 | transition: all 2s ease-in-out !important; 192 | } */ 193 | --------------------------------------------------------------------------------